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

Crear Cajas Meta Mantenibles en WordPress

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

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

Actualmente, uno de los patrones de diseño más comunes - si no el más común - empleado en el desarrollo web es MVC (o Model/View/Controller), pero aún siendo tan popular, no es el único método para construir frameworks, bases, y otras librerías.

Un ejemplo: WordPress utiliza el patrón de diseño dirigido por eventos para alimentar su sistema de hooks. Y aunque los patrones de diseño no son excluyentes entre sí, es muy probable que reconozcas ese patrón concreto ya que es lo convierte a WordPress en una plataforma tan flexible.

Para dejarlo más claro, no significa que no se usen otros patrones a través de su código base (o cualquier otro código base de aplicación), simplemente no son tan fácilmente reconocibles.

Además de todo esto, una de las cosas por las que más se esfuerzan los desarrolladores profesionales es en escribir código mantenible. Pero conforme el código base envejece y más y más gente participa en él, aumenta la dificultad de continuar con el mismo nivel de organización, claridad, y mantenibilidad de forma consistente.

Todas las ideas que acabamos de apuntar se aplican también a WordPress con independencia de si estás trabajando en temas, plugins, extensiones, o cualquier otro tipo de proyecto. El asunto es que, es importante que te asegures de seguir los estándares y convenciones establecidas para la creación de estos proyectos.

Digamos que estás trabajando en un plugin que introduce una caja meta personalizada; no basta con introducirla. En lugar de eso, se van a crear grupos de opciones relacionadas.

Aquí es donde empieza a ponerse la cosa un poco más difícil. A través de esta serie, vamos a ver un método para escribir código mantenible en WordPress tomando como ejemplo la creación de un plugin que introduce meta boxes, distintas opciones, y una navegación por pestañas en el escritorio de WordPress.

Organizar las Cajas Meta

Cuando te encuentres metido en el proceso de planificación de las opciones para tus cajas meta, tendrás un par de opciones disponibles:

  1. Introducir una sóla caja meta por opción.
  2. Introducir una sóla caja meta con pestañas que agrupan lógicamente las distintas opciones.

Aquellos que hayáis usado WordPress durante un largo periodo de tiempo, estaréis familiarizados con la navegación mediante pestañas del escritorio, al menos en parte de su capacidad. Para aquellos que deseéis conocer cómo implementar esto, no sólo mediante programación, sino de una manera fácil de mantener, veremos cómo hacerlo a lo largo de esta serie de artículos.

En concreto, vamos a escribir un pequeño plugin para WordPress que introduce algunos campos, opciones relacionadas agrupadas mediante pestañas, y después vamos a añadir algunos elementos más para explicar cómo guardar, sanear y recuperar datos de forma correcta y segura.

Hacia Dónde Vamos

Como hago en la mayoría de los artículos que escribo que forman parte de una serie, me gustaría exponer lo que vamos a hacer antes de pasar al código. Esto proporciona una idea de base sobre lo que nos proponemos conseguir y sobre lo que veremos en los siguientes capítulos, así como qué es lo que vamos a hacer desde el punto de vista del código.

Como mínimo, ofrece un punto de referencia sobre cómo iremos avanzando a lo largo de la serie.

Antes de ver la estructuración, quiero mencionar que lo más importante de este artículo en concreto es entender las distintas consideraciones, así como el porqué hemos optado por hacer las cosas de la manera en la que lo haremos, es decir, entender cómo esto nos ayuda en el mantenimiento.

Por tanto, esto es lo que veremos en los próximos artículos:

  1. Sentar las bases para el plugin.
  2. Definir todas las opciones y organizarlas en pestañas.
  3. Implementar cada una de las opciones y pestañas junto con medidas de seguridad.
  4. Verlo todo en acción.

Como ocurre con cualquier tipo de desarrollo, la clave está en desglosar las cosas en componentes más pequeños. Por eso en este artículo vamos a empezar viendo los pasos necesarios para trabajar con un plugin que introduce una caja meta en un post type 'Entrada' estándar.

El Esqueleto del Plugin

Antes de avanzar, creamos el directorio de nuestro plugin. Debería incluir lo siguiente:

  • Un archivo de arranque del plugin.
  • La clase principal del plugin.
  • Entender cómo se organizan los archivos iniciales.
  • Un archivo README vacío.

Obviamente, deberíamos asegurarnos de que los directorios están bien organizados y de que el código es claro.

Para hacer que esto sea al menos práctico en algún sentido, vamos a llamar a este plugin "Author's Commentary" ("Comentarios del Autor") que nos permitirá compartir, mientras escribimos la entrada, algunos sinceros comentarios sobre nuestros pensamientos, y notas al margen.

Podremos hacerlo público en una futura artículo basado en tu feedback, pero por ahora sólo planeamos mantenerlo en el backend.

Dicho esto, empecemos.

Empezar con los Comentarios del Autor

Preparar el Directorio

Lo que tenemos que hacer es planificar la estructura de directorios que utilizaremos para el proyecto. Fíjate en la siguiente captura de pantalla, a continuación describo el objetivo de cada directorio.

En el directorio raíz se incluyen dos archivos:

  1. README.md es el archivo estándar README que viene con cualquier plugin para WordPress.
  2. authors-commentary.php es el auténtico responsable de iniciar el plugin. Este es el archivo de arranque.

Después, tenemos el directorio de administración. Este directorio incluye lo siguiente:

  1. assets, que incluyen subdirectorios tanto para nuestros archivos JavaScript como para los archivos CSS (usaremos vanilla CSS a lo largo de esta serie).
  2. class-authors-commentary.php que va a ser la clase principal que contendrá gran parte de la funcionalidad.
  3. views que incluye un subdirectorio llamado partials. El directorio views será el responsable de renderizar las pestañas e incluir todo el contenido de cada pestaña basándose en partials. Es decir, el directorio partials incluye el contenido de cada pestaña.

Ten en cuenta que podríamos añadir más directorios para el plugin conforme avancemos en esta serie. Es decir, esta estructura está sujeta a cambios ya que probablemente añadiremos o incluso moveremos algún contenido según progresemos, pero esta es la estructura básica necesaria para empezar.

Crear Los Archivos

Como ya tenemos la estructura básica del directorio y los archivos necesarios en su sitio, podemos empezar a escribir parte del código. Observa que aunque el plugin será funcional desde su activación, realmente no hará nada hasta que empecemos a escribir código en las próximas partes de esta serie.

Dicho esto, avancemos y organicemos los archivos necesarios para conseguir que el plugin funcione en el escritorio de WordPress.

Lo primero que tenemos que hacer es organizar la cabecera del plugin de manera que incluya el bloque de documentación necesaria para que WordPress muestre el plugin en el escritorio:

La condicional final asegura que cualquiera que intente acceder al archivo directamente, el script abortará la ejecución.

Después, tenemos que asegurarnos de que el archivo del núcleo del plugin que empezamos más arriba reconoce la clase principal creada en el paso anterior. Para conseguirlo, solo necesitamos una sencilla declaración require_once.

Pero antes de invocar requirre_once, tenemos que incluir un archivo, ¿no? Para ello, saltemos al subdirectorio admin y en la clase class-author-commentary.php, vamos a añadir el siguiente código.

Los comentarios se explican por sí solos, pero lo explicaré todo después de completar el bloque de código:

Observa que en el código de arriba, todo lo que hemos hecho - aparte de proporcionar documentación para nuestra clase, propiedades, y el constructor - es establecer un constructor que acepte un $name y un parámetro $version.

Esto será útil más adelante cuando importemos las dependencias JavaScript y las hojas de estilos. Por ahora, sin embargo, esto es todo lo que necesitamos para empezar.

Hecho esto, podemos volver a authors-commentary.php y escribir el código para poner en marcha el plugin.

Primero, usaremos require_once para importar la clase que acabamos de crear:

Después crearemos una sencilla función y otra función de llamada para iniciar el proceso:

Observa que no definimos ningún hook en este archivo. Todo va a residir eventualmente en el subpaquete - esto nos ayuda a separar nuestras preocupaciones más eficazmente, hace que el código sea más fácilmente mantenible, y nos permite mantenerlo lo más orientado a objetos que sea posible.

Observa que esto define una sencilla función que, cuando es invocada tan pronto se activa el plugin, crea una instancia de la clase Author_Commentary_Admin después de pasar los parámetros $name y $version necesarios.

Sentar las Bases

En este punto ya hemos sentado todas las bases que nos ayudarán a avanzar en el desarrollo posterior de nuestro plugin. Deberías poder descargar el archivo desde GitHub, instalarlo en WordPress, y activarlo.

De nuevo, esto no mostrará realmente nada, pero preparará el código base para las siguientes tareas que iniciaremos en el siguiente artículo.

Si tienes alguna duda relativa al código que acabamos de ver o sobre qué pretendemos conseguir con esta serie, no dudes en dejar un comentario; en cualquier caso, estoy deseando verte en la próxima entrega.

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.