Mejore su flujo de trabajo ¡separe su marcado de su lógica!

En este tutorial, explicaré una técnica que le permite utilizar un archivo de plantilla para todas sus necesidades de HTML. Ya no tendrá que hacer 'eco' de cadenas dentro de sus funciones, o preocuparse por ingresar y salir de PHP solo para generar un marcado.

He pasado muchos años utilizando frameworks MVC (como Zend y hoy en día Laravel) donde es una buena práctica separar su 'lógica de programación' (funciones o métodos) de su 'vista' (el marcado HTML resultante). Esta siempre conduce a una base de código más mantenible y en realidad es mucho más fácil de escribir. Teniendo este trasfondo, me invitó a encontrar una solución similar al desarrollar complementos para WordPress. No es nada demasiado sofisticado: solo es un pequeño 'ayudante' que te permitirá eliminar todos los fragmentos de código HTML y las 'escapadas' extrañas de tus funciones y colocarlas de forma segura en su propio archivo 'plantilla'.

Entonces, espero que este tutorial te suene interesante y sin más preámbulos, comencemos!


Paso 1 Entendiendo lo que vamos a mejorar

Comencemos este tutorial echando un vistazo a lo que vamos a mejorar..

Es muy común ver algo como esto dentro de un complemento: (este fragmento proviene de uno de mis propios tutoriales en este sitio: p)

 add_shortcode ('faq', function () $ posts = get_posts (array (// Obtenga el FAQ Tipo de mensaje personalizado 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq',)); $ faq = '
'; // Abra el contenedor foreach ($ posts como $ post) // Genere el marcado para cada pregunta $ faq. = Sprintf (('

% 1 $ s

'), $ post-> post_title, wpautop ($ post-> post_content)); $ faq. = '
'; // Cerrar el contenedor return $ faq; // Devolver el HTML. );

¿Qué está mal con eso??

Pues nada, en realidad. Pero podría ser más limpio, más fácil de escalar y más fácil de mantener.!

Corriendo de arriba a abajo, podemos ver que todos dentro de una sola función somos:

  1. Consultar la base de datos para publicaciones de un determinado tipo.
  2. Asignar una cadena HTML a una variable
  3. Realizar un bucle y concatenar más marcas en la cadena
  4. Devolviendo la cadena construida

Ahora bien, puedes estar mirando esto y pensando "¡Gran cosa! Solo son unas pocas líneas de HTML, ¿cuál es el problema?" En algunos aspectos, está bien dentro de sus derechos para pensar así. Pero recuerde, en este momento solo hay 17 líneas de código. ¿Qué sucede cuando amplía / mejora el complemento? ¿Qué sucede cuando su complemento crece hasta 50/100/1000 líneas de código (o más)? ¿Seguirá siendo feliz teniendo cadenas de HTML alrededor de su función en varios lugares? ¿Qué sucede cuando desea generar algún HTML que necesite un poco de 'escape' para que funcione correctamente dentro de su código PHP??

¡Esperamos que pueda ver que este enfoque para crear y generar marcado HTML puede ser muy problemático! Sin mencionar que se vuelve muy difícil mantener y mejorar el HTML cuando está disperso.

Así que, con todo esto en mente, me he propuesto cambiar la forma en que piensas acerca de cómo generar HTML en WordPress. Siempre.


Paso 2 Creando el complemento Renderizador de vista

Ok, vamos a romper con esto.

Crea los archivos y carpetas

  1. Crear una nueva carpeta de plugin llamada Ver
  2. Dentro de esa carpeta, crea el archivo de complemento view_renderer.php
  3. Ahora crea un archivo llamado View.php - Esta sera nuestra clase

Incluir la clase

Nuestro plugin es simple, solo incluye el Ver clase para que podamos usarlo en cualquiera de nuestros otros complementos.

 / * view_renderer.php * / include ('View.php');

Ok, ahora que hemos incluido el Ver clase, es hora de construirlo.

La clase de vista

Aquí tenemos una clase llamada Ver con una sola función estática llamada hacer (Esto nos permitirá utilizar la sintaxis Ver :: render ($ plantilla) desde cualquier lugar dentro de nuestros plugins) y toma dos parámetros:

  1. $ filePath - La ruta al archivo de plantilla. No olvides que vamos a mantener nuestras plantillas dentro del Ver carpeta que creamos anteriormente
  2. $ viewData - Cualquier variable a la que nos gustaría tener acceso dentro de la plantilla (mucho más sobre esto más adelante)

Copie el siguiente código en View.php:

 

Entonces, ¿qué es exactamente lo que está pasando aquí??

  1. En primer lugar estamos comprobando si el $ viewData varible tiene un valor (es decir, ¿enviamos algo para usar en la plantilla?). Si lo hace, extraemos los contenidos (más sobre esto más adelante).

  2. Entonces estamos haciendo uso del buffer de salida de PHP. Nos permite analizar un archivo PHP y guardar el contenido en una variable

  3. Finalmente devolvemos la cadena.

Nota: No olvide activar el complemento ahora desde el panel de administración

Parece bastante simple eh? ¡Exactamente! Pero si bien parece ser solo una pequeña función muy simple, en realidad nos brinda el lujo de poder escribir nuestros complementos de una manera súper organizada, escalable y mantenible. Por favor, permítame demostrar ...


Paso 3 Un ejemplo del mundo real

Vamos a crear un simple plugin llamado Deslizador

** Nota: Esto es sólo para fines de demostración. Siéntete libre de usar tu propio plugin aquí.

  1. Crea una carpeta llamada Deslizador
  2. En esa carpeta, crea un archivo llamado Slider.php
  3. Copie el siguiente código en Slider.php
 

Añadir un código corto

Bien, ahora vamos a agregar un shortcode que recogerá las últimas 5 publicaciones y las mostrará en una lista con el título y el contenido. (En aras de la brevedad, agregaremos nuestra clase de complementos y nuestros enlaces de acción en el mismo archivo de complementos, pero no hagas esto en la "vida real": p)

 / ** * Agregar el código corto (PHP 5.3 y superior) * / add_shortcode ('slider', function () return Slider :: display (););

Eso nos permitirá simplemente usar [control deslizante] en cualquier publicación / página y se mostrará el resultado de Control deslizante :: pantalla ()

Añadir la clase de control deslizante y monitor() Método

 class Slider public static function display () // Return HTML HERE. 

Recibe las últimas 5 publicaciones.

 / * * Obtener las últimas 5 publicaciones * / visualización de la función estática pública () $ posts = get_posts (array ('numberposts' => 5)); 

Ahora tenemos una serie de enviar objetos y estamos listos para construir nuestro HTML en bucle a través de ellos. ¡Pero no vamos a comenzar simplemente a insertar cadenas HTML en nuestra función aquí! En su lugar, vamos a pasar la matriz de objetos a un archivo de plantilla y tendremos todo el HTML generado fuera de peligro..

Crear la plantilla

  1. Crea una carpeta llamada plantillas
  2. Dentro de esa carpeta, crea un archivo llamado 01.template.php

Esta plantilla mantendrá todo nuestro marcado y nos permitirá acceder a los datos que enviar para después.

Enviando datos a la plantilla

Cada vez que queremos usar cualquier variable dentro de nuestras plantillas, podemos simplemente enviar ellos estableciendo un valor en el $ viewData formación. Cualquier persona familiarizada con el uso de marcos MVC se sentirá como en casa con este enfoque.

 $ viewData = array ('posts' => $ posts);

La matriz llave aquí ('puestos') es importante porque así es como nos referiremos a los datos dentro de la plantilla. (Puedes llamar a esto como quieras, pero apégate a algo que tenga sentido).

Construyendo la Plantilla

Bien, hemos visto cómo recuperar las últimas 5 publicaciones y cómo enviar esa matriz de objetos a la plantilla, ahora es el momento de completar el archivo de la plantilla..

 
  • post_title?>

    post_content?>

Ah! ¿Qué bien se siente tener todo ese marcado en su propio archivo separado, lejos de nuestra lógica de programación y recuperación de datos? Genial, lo sé! La parte más importante de este enfoque es que solo estamos 'accediendo' a datos desde variables dentro de la plantilla. Toda la 'lógica' debe hacerse dentro del método que llama a la plantilla. Esto conduce a un flujo de trabajo muy agradable ya que tiene una completa separación de inquietudes.

Solo imagine lo fácil que será ahora cuando esté listo para desarrollar este complemento. No más concatenación de cadenas y caracteres de escape dentro de las funciones.

Devolviendo la plantilla renderizada

Ok, hemos visto todas las partes componentes, veamos cómo encaja todo para permitirnos renderizar una plantilla y recuperar una cadena (que luego podemos volver a nuestro código corto):

  1. Primero necesitamos almacenar una referencia a nuestra plantilla en una propiedad estática
  2. Entonces tenemos que comprobar que la Ver la clase existe
  3. Luego generamos la ruta completa a nuestro archivo de plantilla al tomar una referencia al directorio del complemento actual y concatenar nuestra propiedad estática $ plantilla
  4. Finalmente, llamamos a nuestro Ver :: render () Método y pasarlo los dos parámetros necesarios.

En este caso, nosotros regreso el resultado de la plantilla renderizada porque así es como códigos cortos trabajo. Pero si estuvieras necesitando eco los resultados en su lugar (por ejemplo, cuando creas una página de administrador, la devolución de llamada espera que tu salida se imprima directamente), luego simplemente reemplaza regreso con eco.

los monitor() Método completo

 clase Slider static $ template = '/templates/01.template.php'; pantalla de función estática pública () si (class_exists ('View')) // Obtenga los últimos 5 mensajes $ posts = get_posts (array ('numberposts' => 5)); // Establecer vista de datos $ viewData = array ('posts' => $ posts); // Obtener la ruta completa al archivo de plantilla. $ templatePath = dirname (__FILE__). static :: $ template; // Devuelve el retorno HTML renderizado View :: render ($ templatePath, $ viewData);  else return "Está intentando renderizar una plantilla, pero no podemos encontrar la clase de vista"; 

¡Espero que pueda apreciar el nivel de organización que este enfoque le brindará! Ahora tu monitor La función solo es responsable de recopilar los datos que necesita y de devolver el resultado de la plantilla renderizada..


Llevándolo más lejos

Nuestro ejemplo anterior es tan básico como se pone. Aun así, sigue siendo un flujo de trabajo muy mejorado. Ahora veamos otro ejemplo que muestra lo útil que puede ser..

Digamos, por ejemplo, que su complemento hace uso de un meta box personalizado. Para hacer eso tendríamos que:

  1. Añadir una función constructora a la Deslizador clase
  2. Agrega un método para agregar el metabox a cada publicación
  3. Agregue un método de devolución de llamada para representar el HTML para el meta box.
  4. Agregue el enlace apropiado en el archivo del complemento para crear una instancia de la clase solo cuando agregue / edite publicaciones
  5. Finalmente, agregaríamos un archivo de plantilla como lo hicimos anteriormente, y lo agregaríamos como una propiedad al comienzo de la clase
 clase Slider static $ metaBox = '/templates/metabox.template.php'; función pública __construct () add_action ('add_meta_boxes', array ($ this, 'add_some_meta_box'));  / ** * Agrega el contenedor de meta box * / public function add_some_meta_box () add_meta_box ('some_meta_box_name', 'Some Meta Box Headline', array ($ this, 'render_meta_box_content'), 'post', 'advanced', ' alto', );  / ** * Representar contenido de Meta Box * / función pública render_meta_box_content () / ** Desde el Códice ** / echo '

SALIDA DE PRUEBA: esto se procesa dentro de la caja meta.

'; // clase // agrega la función de enganche de acción call_Slider () return new Slider (); if (is_admin ()) add_action ('load-post.php', 'call_Slider');

Echa un vistazo a la render_meta_box_content método allí. ¡Es la oportunidad perfecta para usar View Renderer! Imagina un ejemplo más realista como este:

 / ** * Representar contenido de Meta Box * / función pública render_meta_box_content ($ post) $ name = get_post_meta ($ post-> ID, "name"); $ fieldName = static :: $ fieldName; eco '

Tu nombre:

'; eco ''; eco ''; eco '';

Urg! Claro, hace el trabajo, ¡pero es tan difícil hacerlo de esta manera! ¿Qué tal si utilizamos nuestro View Renderer?.

 / ** * Representar contenido de Meta Box * / función pública render_meta_box_content ($ post) $ viewData = array ('name' => get_post_meta ($ post-> ID, 'name'), 'field' => static :: $ nombre del campo ); $ templatePath = dirname (__FILE__). static :: $ metabox; echo View :: render ($ templatePath, $ viewData); 

Y en el archivo de plantilla:

 

Tu nombre:

Puede que solo parezca un beneficio muy pequeño en este ejemplo. Pero confía en mí, si mantienes tus preocupaciones separadas de esta manera, te convertirás en un desarrollador de WordPress mucho mejor rápidamente..


Conclusión

Creo que a estas alturas es probable que tenga una buena comprensión de lo que estamos tratando de lograr aquí y le insto a que intente usar esta técnica cuando cree complementos en el futuro. Esperamos que la "separación de preocupaciones" le resulte beneficiosa.

Notas del tutorial:

  • A pesar de que convertimos el View Renderer en un complemento por sí mismo, en su lugar, simplemente podría agregarlo a los complementos existentes. Esto eliminará el paso adicional de tener que asegurarse de que el complemento esté activado antes de usarlo en cualquier lugar.
  • No está limitado a los casos de uso explicados en este tutorial, se puede usar donde quiera que normalmente genere HTML (¿qué le parece usar un archivo de plantilla para generar algún JavaScript 'en línea'? O sobre algunas reglas CSS específicas basadas en opciones recuperadas de la base de datos?)

Me interesaría saber qué usos ha encontrado para esta técnica, así que por favor comparta los comentarios :)