Todo lo que necesitas saber sobre la función get_template_part() de WordPress

Una vez leí que la mejor manera de aprender a programar es leyendo el código que otros han escrito. Después de todo, la mayor parte del tiempo que pasa como desarrollador probablemente estará revisando, puliendo y arreglando el código que usted u otro desarrollador escribieron en el pasado. Precisamente por eso me gusta tanto el software libre y de código abierto: nos da acceso al código fuente de grandes herramientas y nos permite aprender de ellas.

Si estás interesado en el mundo de WordPress (y me imagino que lo estás, porque estás aquí), el código fuente de WordPress Core o el de Gutenberg son dos muy buenas formas de convertirte en un mejor profesional de WordPress y aprender sobre el desarrollo backend y frontend.

Desde el primer lanzamiento de Gutenberg, hemos estado compartiendo todo lo que hemos aprendido sobre el desarrollo de frontend hasta el momento. Así, por ejemplo, hicimos una serie de publicaciones donde les enseñamos los conceptos básicos de React, vimos cómo reutilizar componentes, explicamos cómo extender Gutenberg y discutimos las novedades de JavaScript para escribir mejor el código fuente, por mencionar algunos artículos. hemos escrito.

Bueno, hoy vamos a cambiar de marcha y centrarnos en WordPress Core nuevamente. ¿Por qué? No sé, ¿quizás porque el anuncio del próximo tema de Twenty Twenty-One que salió hace unos días es la excusa perfecta para hacerlo?. Así que hablemos de uno de los elementos más importantes a la hora de crear temas en WordPress: la función get_template_part .

Temas de WordPress

En primer lugar, repasemos cómo funcionan los temas de WordPress, ¿de acuerdo? Esencialmente, un tema es una colección de archivos que define la estructura HTML y los estilos CSS que utilizará nuestro sitio.

Si piensas en el esqueleto de cualquier página web, verás que siempre se repite el mismo patrón:

• Comenzamos abriendo las etiquetas html y head . Ahí es donde agregamos scripts, estilos, metaetiquetas, etc.
• Luego cerramos la etiqueta del head y abrimos la etiqueta del body , que contendrá el contenido visible de nuestro sitio web.
  • Normalmente, el cuerpo de una página incluye una cabecera con el logo de la web, un menú, etc.
  • Luego viene el contenido en sí, que puede ser una página, un artículo de blog, una lista de publicaciones, el resultado de una búsqueda, etc.
  • Por último, suele terminar con un pie de página.
• Finalmente, una vez renderizada toda la página, cerramos todas las etiquetas y listo.

Entonces, sí, parece que cada página web sigue más o menos una estructura similar: hay una parte común (es decir, encabezado, menú, pie de página...) y un área de contenido específico (una publicación de blog, el conjunto de resultados que obtuvimos después de una búsqueda , un producto de WooCommerce, etc.).

Como a los programadores no les gusta repetir código y somos (en general) personas organizadas, los temas de WordPress siguen una estructura de archivos muy modelada. En este post que escribí hace unos meses, tienes una buena explicación de los diferentes archivos en un tema, pero ten en cuenta que hay:

• una hoja de estilo: style.css ,
• un archivo header.php para "abrir" la página web (es decir, generar la etiqueta de head y, normalmente, la parte inicial del body que es común a todas las páginas),
• otro archivo footer.php que “cierra” la página (es decir, agrega el pie de página y cierra la etiqueta html ), y
• una gran cantidad de archivos adicionales para los diferentes tipos de contenido que queremos renderizar.

¿Qué es la función get_template_part y para qué sirve?

Lo primero que debes hacer cuando te encuentras con una nueva función es lo contrario de lo que haces cuando tu padre te pide que lo ayudes a programar su nuevo limpiador Roomba: leer la documentación. Entonces, hagámoslo con nuestra función mirando el Codex:

get_template_part proporciona un mecanismo simple para que los temas secundarios sobrecarguen secciones de código reutilizables en el tema.

Incluye la parte de la plantilla con nombre para un tema o, si se especifica un nombre, se incluirá una parte especializada. Si el tema no contiene un archivo {slug}.php, no se incluirá ninguna plantilla.

La plantilla se incluye utilizando require, no require_once, por lo que puede incluir la misma parte de la plantilla varias veces.

Para el parámetro $name, si el archivo se llama “{slug}-special.php”, especifique “special”.

Nota: get_template_part() falla silenciosamente

get_template_part documentos en WordPress.org

¿Ver? En menos de un minuto hemos obtenido toda la información que necesitábamos. Ahora sabemos que esta función sirve para crear “partes reutilizables” en un tema (evitando así la duplicación de código) y lo hace de forma que un tema hijo pueda adaptarlas. También tenemos información sobre sus parámetros, su funcionamiento interno (utiliza la función require de PHP) y lo que podemos esperar de él (“falla silenciosamente”).

Desafortunadamente, hay algunas cosas que aún no están claras, como estos archivos {slug}.php y {slug}-special.php que menciona. ¿Qué son? ¿Qué contienen? ¿Qué hacen? Muchas preguntas difíciles de responder mirando solo la documentación, por lo que es hora de pasar a los ejemplos.

Cómo crear plantillas parciales en nuestro tema

Echemos un vistazo al tema Twenty Twenty-One para averiguar si usa estas "plantillas parciales" y, si las usa, cómo se ven y qué debe hacer para implementarlas en su propio tema.

Si lees mi publicación sobre la jerarquía de archivos de un tema de WordPress, sabrás que “ index.php es la plantilla predeterminada para nuestro tema. Se utiliza para renderizar cualquier contenido de nuestra web, siempre que dicho contenido no tenga una plantilla específica diseñada para ello.” Dado que esta es una plantilla predeterminada, creo que es una buena idea comenzar allí. Este es el contenido de index.php en el tema Twenty Twenty-One:

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

Como ves, tenemos todas las partes que te habíamos comentado anteriormente:

• Incluye el encabezado usando get_header .
• Representa el contenido en sí mismo.
• Cierra la página con get_footer .

Lo interesante aquí, obviamente, es el área de “contenido” en index.php . En concreto, vemos que tenemos un pequeño control para saber si estamos viendo o no algún contenido válido (función have_posts del Loop de WordPress) y, según lo tengamos o no, cargamos una plantilla parcial ( …/content ) o otro ( …/content-none ).

Si ahora echamos un vistazo a la plantilla content.php parcial, veremos aproximadamente lo siguiente:

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

Bastante sencillo, ¿no? Todo lo que tenemos es una pequeña plantilla diseñada para representar contenido genérico de WordPress como, por ejemplo, una publicación de blog. Tenga en cuenta que el esqueleto HTML resultante no es más que una etiqueta de article con un título, su contenido y un pie de página, todo usando etiquetas de plantilla de WordPress para extraer el contenido real.

Por qué la API de WordPress es increíble

Incluso si no sabía que existen todas estas funciones ( get_header , get_footer o today's star: get_template_part ), estoy bastante seguro de que habría organizado su código siguiendo un enfoque similar. Después de todo, parece bastante lógico crear una plantilla para el encabezado, otra para el pie de página, otra para el contenido… y luego tener un archivo especial o algo que lo pegue todo, ¿no?

Si siguió ese enfoque, apuesto a que su archivo index.php se vería así:

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

que es muy similar al que tenemos en el tema Twenty Twenty-One. Entonces, llegados a este punto, puede que te preguntes: ¿qué gano usando funciones específicas de WordPress? ¿No es lo mismo utilizar directamente un require de PHP, sobre todo teniendo en cuenta que, según la documentación de WordPress, eso es precisamente lo que utilizan estas funciones auxiliares?

Bueno, la razón principal se menciona en la propia documentación: facilita la creación de un tema secundario. Así, si estás creando un tema hijo y usas get_template_part , WordPress buscará la plantilla en el hijo y, si no lo está, usará la del padre.

¡Pero eso no es todo! Las funciones de WordPress suelen estar llenas de filtros y acciones que te permiten adaptar el resultado final. Por ejemplo, si observamos la función interna get_template_part en el archivo wp-includes/general-template.php :

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

Veremos que tenemos un par de acciones que los complementos y el tema en sí pueden aprovechar. Y si seguimos tirando del hilo, incluso podremos ver cómo WordPress localiza ( locate_template ) y carga la plantilla que terminará usando:

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

Espero que la publicación de hoy te haya ayudado a comprender un poco mejor cómo funcionan los temas de WordPress. También espero que te haya mostrado cómo aprender sobre WordPress leyendo su documentación y navegando por su código fuente. Y si te ha gustado, compártelo con tus amigos y déjanos un comentario.

Imagen destacada de Joshua Sortino en Unsplash.