Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Creación de meta boxes de WordPress mantenibles: El diseño

by
Read Time:9 minsLanguages:
This post is part of a series called Creating Maintainable WordPress Meta Boxes.
Creating Maintainable WordPress Meta Boxes
Creating Maintainable WordPress Meta Boxes: The Front-End

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En esta serie, estamos viendo paso a paso cómo crear meta boxes de WordPress mantenibles. Es decir, estamos viendo algunas prácticas recomendadas que podemos emplear en nuestro desarrollo de WordPress para asegurarnos de que estamos escribiendo código que sea mantenible por nosotros mismos o por nuestro equipo, conforme va evolucionando con el paso del tiempo.

En el primer artículo, analizamos la estructura de directorios inicial y configuramos el código básico necesario para ejecutar un plugin en WordPress. En este artículo, vamos a seguir planificando y construyendo nuestro plugin.

También hablaremos de las decisiones que estamos tomando en relación a la separación de partes de nuestro código y cómo esto condiciona su mantenibilidad.

Planificar los comentarios del autor

En el artículo anterior, comenzamos a trabajar en un plugin llamado Author's Commentary (comentarios del autor). La idea detrás del plugin es que permitirá a los autores de comentarios dejar varias notas y recursos asociados con la entrada que fueron utilizados ya sea como inspiración, o como reflexiones después de que la entrada fue escrita y recibida, así como otra información similar.

Al escribir una entrada, digamos que queremos capturar tres piezas específicas de información:

  1. Notas utilizadas al preparar la entrada
  2. Activos y recursos utilizados a lo largo de la entrada
  3. Tweets y enlaces a comentarios y a feedback recibido tras la publicación de la entrada

Para ser claros, queremos disponer de un medio para mantener las notas que contribuyeron en la creación de la entrada antes de ser escrita, enlaces a varios recursos, ya sean artículos externos, imágenes, vídeos, ejemplos de código, etc., y después mantener un listado de tweets, enlaces a comentarios y varios fragmentos de emails que hemos recibido.

En este punto, tenemos suficiente para continuar preparando el meta box y el diseño con pestañas para la misma.

Las pestañas del meta box

Antes de empezar a escribir cualquier código, vamos a nombrar las pestañas que se asociarán a cada uno de los estados de nuestra entrada como se ha indicado anteriormente. Hacer esto nos ayudará a organizar conceptualmente nuestros elementos de entrada para agruparlos lógicamente.

Concedido, puedes nombrarlas como más te guste, pero si estás siguiendo este tutorial y el código fuente proporcionado, esto es lo que puedes esperar ver.

  1. La primera pestaña se llamará Draft, ya que contendrá todos los puntos principales en forma de lista con viñetas, frases y otras notas que contribuyeron a la preparación de la entrada.
  2. La segunda pestaña se llamará Resources, ya que incluirá información sobre procedente de otras entradas, enlaces, vídeos, etc. a los que podríamos hacer referencia en nuestra entrada o que podamos incrustar en nuestra publicación.
  3. La pestaña final se llamará Published, ya que contendrá enlaces a comentarios, campos para el email y otra información que sea relevante para la entrada después de que esta haya sido publicada.

Bastante claro, ¿no? Hablaremos más sobre los elementos de entrada para cada pestaña una vez lleguemos a ese punto en el código, pero por ahora tenemos que centrarnos en crear el meta box e implementar las pestañas.

Crear el meta box

Para crear el meta box, aprovecharemos la función add_meta_box como se documenta en el Codex de WordPress. Para ello, vamos a introducir una nueva clase, actualizar el archivo de inicialización del plugin e introducir algunas vistas que se utilizarán para representar el marcado en el navegador.

La clase meta box

Para asegurarnos de que nuestro código está bien encapsulado y que cada clase representa una sola idea, vamos a crear una clase Authors_Commentary_Meta_Box. Esta clase será responsable de registrar un gancho con la acción add_meta_box, configurar el meta box y representar su contenido.

Para aquellos que no estén acostumbrados a crear plugins de una manera orientada a objetos con WordPress, este enfoque nos permite segmentar nuestras áreas de responsabilidad, como un meta box, y tener una sola clase que representa todo lo que implica la creación de uno.

Para ello, crea primero un archivo class-authors-commentary-meta-box.php en el directorio admin. A continuación, añade el siguiente código:

Los comentarios y el contenido de la clase deben hacer que sea relativamente fácil de comprender. Hace tres cosas, para ser claro, son las siguientes:

  1. El constructor registra la función add_meta_box con la acción correspondiente de WordPress.
  2. La función add_meta_box define las propiedades del cuadro meta.
  3. La función display_meta_box no hace nada todavía, en un momento trabajaremos en esto.

Antes de seguir adelante, hay algunos cambios que necesitamos introducir en el resto del plugin.

En primer lugar, necesitamos incluir este nuevo archivo en el archivo de inicialización del plugin. En authors-commentary.php, añade la siguiente línea de código por encima de la actual instrucción require_once:

Añadiremos esta línea por encima del código inicial porque este depende de que este archivo en particular sea ejecutado; por lo tanto, primero debe cargarse.

A continuación, necesitamos introducir una nueva propiedad en el lado de admin/class-authors-commentary.php que hará referencia a una instancia del meta box:

Por último, necesitamos crear una instancia del código en el constructor de la clase:

En este punto, debes ser capaz de activar el plugin, navegar a una página de entrada, y ver un meta box vacío:

Nada demasiado emocionante, pero tenemos lo que necesitamos para comenzar a introducir nuestra navegación por pestañas.

Añadir pestañas

En este punto, estamos preparados para introducir la parte de navegación mediante pestañas del meta box. En última instancia, nuestro objetivo es introducir el marcado y los estilos para la pestaña en esta entrada, y luego implementar el comportamiento de los elementos en el siguiente artículo de esta serie.

Dicho esto, primero vamos a crear un subdirectorio de views dentro del directorio admin. Técnicamente, lo hicimos en el artículo anterior; sin embargo, no teníamos contenido en el directorio, por lo que no se registró en el control del código fuente (por lo tanto, el directorio no fue añadido, así que si estás siguiendo el repositorio, ahora es el momento de crear el directorio).

A continuación, crea un archivo dentro del directorio views llamado authors-commentary-navigation.php. Este archivo servirá principalmente como marcado; sin embargo, incluirá también algo de PHP para el momento en que estemos creando este plugin.

Agrega el siguiente código al archivo. Lo discutiremos con más profundidad después del bloque de código:

Una vez hecho esto, inserta el siguiente código en Authors_Commentary_Meta_Box, añade el siguiente código para importar esta parte concreta del marcado:

Aparte del contenedor div que tenemos, observa lo siguiente:

  • Hemos envuelto tres anclas en un elemento h2. El elemento h2 contiene atributos de clase nav-tab-wrapper y current. Esto nos permite heredar estilos directamente de WordPress sin hacer nada por nuestra parte.
  • Cada ancla tiene una clase nav-tab la primera de las cuales tiene la clase nav-tab-active. Esto de nuevo nos proporciona algo de estilo heredado de WordPress.
  • Cada ancla también tiene el atributo href de javascript:; porque las anclas no nos van a llevar a ninguna parte. En su lugar, en un futuro tutorial, usaremos JavaScript para controlar las pestañas y el contenido que se muestra dentro de cada una.

En este punto, deberías ver lo siguiente:

Ten en cuenta que todos los estilos que se aplican a las pestañas han sido proporcionados por WordPress. Lo único que puedes ajustar es el margen que existe entre ellas y la línea horizontal bajo las mismas.

Hagámoslo ahora.

Incluir una hoja de estilo

En el directorio admin, añade otro subdirectorio denominado assets y dentro de él un directorio llamado css. A continuación, crea un archivo vacío llamado admin.css.

Después de eso, incluye las siguientes líneas en el archivo CSS:

A continuación, asegúrate de incluir la siguiente llamada en el constructor class-authors-commentary.php:

Por último, añade la siguiente función, que es responsable de encolar la actual hoja de estilos:

En este punto, debería verse mucho más limpio:

Hecho esto, hemos completado todo lo que tenemos que hacer para la base básica de las pestañas de navegación de nuestro meta box.

Preparación para avanzar

En el siguiente artículo, vamos a presentar el contenido de cada pestaña y vamos a trabajar a través del JavaScript que es necesario para alternar las pestañas y cada uno de sus contenidos.

Para aquellos que tienen más experiencia con WordPress, esta serie de artículos les podría parecer que avanza a un ritmo lento, pero ese es el objetivo, pretendemos ser lo más exhaustivos posible cuando se trata no sólo de construir nuestra interfaz de usuario, sino también de explicar el motivo detrás de cada una de nuestras decisiones.

Mientras tanto, no olvides echar un vistazo al código fuente en GitHub, continúa y formula cualquier pregunta o comentario en el feed que viene a continuación.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.