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!
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 ((''; // Cerrar el contenedor return $ faq; // Devolver el HTML. );% 1 $ s
% 2 $ s'), $ post-> post_title, wpautop ($ post-> post_content)); $ faq. = '
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:
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.
Ok, vamos a romper con esto.
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.
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:
$ filePath
- La ruta al archivo de plantilla. No olvides que vamos a mantener nuestras plantillas dentro del Ver carpeta que creamos anteriormente$ 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:
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).
Entonces estamos haciendo uso del buffer de salida de PHP. Nos permite analizar un archivo PHP y guardar el contenido en una variable
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 ...
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í.
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 ()
monitor()
Métodoclass Slider public static function display () // Return HTML HERE.
/ * * 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..
Esta plantilla mantendrá todo nuestro marcado y nos permitirá acceder a los datos que enviar para después.
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).
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->post_title?>
= $post->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.
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):
Ver
la clase existe$ plantilla
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.
monitor()
Método completoclase 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..
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:
Deslizador
claseclase 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..
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:
Me interesaría saber qué usos ha encontrado para esta técnica, así que por favor comparta los comentarios :)