Jerarquía de plantillas de WordPress

Me alegra que estés leyendo este artículo porque la «Jerarquía de plantillas de WordPress» es uno de los pilares para entender cómo funciona este CMS. Una vez que lo hayas aprendido tendrás el momento Eureka y podrás visualizar mejor la planificación de tus futuros proyectos web.

Video Tutorial

¿Qué es la jerarquía de plantillas?

Cuando navegamos cualquier página web realizada con WordPress podemos ver un diseños gráfico (imágenes, colores, espacios, tipografías) sumado a uno o más bloques de información (título, cuerpo del artículo, el resultado de una búsqueda, información del autor, comentarios, etc).

Para generar estos diseños y seleccionar la información adecuada WordPress utiliza una jerarquía de plantillas basada en la nomenclatura de la URL actual.

¿Todo esto te suena a chino? No te preocupes, iremos desgranándolo hasta que puedas verlo con claridad. Empecemos por lo más básico:

¿Qué es una plantilla?

Una plantilla es un fichero dentro de un tema que le indica a WordPress cómo debe renderizar una página. Existen plantillas para entradas (post), páginas (pages), adjuntos (attachments), colecciones (archives) y tipos de post personalizados (Custom Post Types).

De esta manera cuando accedes a una página web, supongamos que quieres visitar la dirección «https://unblog.com/esto-es-un-articulo-del-blog» WordPress analizará qué tipo de información estás visitando, en este caso una entrada, y seleccionará según una jerarquía la plantilla específica para renderizar el artículo.

¿Y qué es eso de la jerarquía?

El hecho de que exista una jerarquía para renderizar la información nos da la posibilidad de definir distintos diseños. Según la URL especificada WordPress empezará a buscar plantillas desde las más específicas hacia las más generales.

Para romper un poco con lo abstracto del tema miremos el siguiente gráfico seguido del ejemplo que describo.

Leyendo el diagrama de izquierda a derecha vemos que WordPress es capaz de detectar un gran conjunto de páginas:

• Single: Plantillas para renderizar páginas con un bloque de información principal: una entrada, una página, un adjunto, el contenido de un tipo de post personalizado.
• Front Page: Conjunto de plantillas para renderizar la página de inicio.
• Archive: Plantillas para renderizar colecciones de datos: artículos agrupados por taxonomía, por categoría, por etiquetas, por autor, por tipo de post personalizado o por fecha.
• Search: Plantilla para renderizar el resultado de una búsqueda.
• Comments: Plantilla para renderizar un comentario.
• 404: Cuando WordPress no puede identificar la URL renderiza una plantilla con un error 404.

Ejemplo de selección de plantilla

Siguiendo el ejemplo anterior, cuando queremos acceder a la web «https://unblog.com/esto-es-un-articulo-del-blog» WordPress puede detectar en la URL que es una single (ya que es el detalle de un artículo) y del tipo entrada (Post). Tras detectar estos dos valores WordPress buscará plantillas comenzando por lo más específico hacia lo más general.

• ¿Existe en el tema activo el fichero single-post.php? En caso de existir usa ese fichero y fin de la ejecución. En caso de que no exista sigue adelante.
• ¿Existe en el tema activo el fichero single.php? En caso de existir usa ese fichero y fin de la ejecución. En caso de que no exista sigue adelante.
• Como no existen ninguno de los dos ficheros anteriores WordPress renderizará la URL utilizando la plantilla de index.php que es un fichero obligatorio para que un tema pueda funcionar.

¿Hacemos otro ejemplo más complicado?

Supongamos que ahora el usuario quiere visualizar todas las entradas de la categoría Deportes ➡ «https://unblog.com/deportes«. WordPress busca en sus registros y detecta que el slug «deportes» pertenece a un «archive» de «category» y comienza con su serie de preguntas:

• ¿Existe en el tema activo el fichero category-deportes.php? En caso de existir usa ese fichero y fin de la ejecución. En caso de que no exista sigue adelante.
• ¿Existe en el tema activo el fichero category-14.php (el número de ID de la categoría)? En caso de existir usa ese fichero y fin de la ejecución. En caso de que no exista sigue adelante.
• ¿Existe en el tema activo el fichero category.php? En caso de existir usa ese fichero y fin de la ejecución. En caso de que no exista sigue adelante.
• ¿Existe en el tema activo el fichero archive.php? En caso de existir usa ese fichero y fin de la ejecución. En caso de que no exista sigue adelante.
• Como no existen ninguno de los ficheros anteriores WordPress renderizará la URL utilizando la plantilla de index.php.

¿Va quedando más claro cómo funcionan las jerarquías?

Ahora bien, ¿Para qué sirve todo esto?

Como hemos dicho anteriormente, la jerarquía de plantillas nos sirve para definir nuevos diseños o manipular la información.

Ejemplo de diseño para una página específica

Por ejemplo: Si nuestra web tiene una página llamada «Quiénes somos» donde contamos la trayectoria de nuestra empresa, podríamos hacer un diseño específico para mostrar el listado de nuestros empleados y debajo de ellos una galería con fotos históricas de la empresa. Para ello podemos definir una nueva plantilla haciendo uso de la nomenclatura page-$slug.php que en nuestro caso sería page-quienes-somos.php.

De esta manera todas las páginas usarán la plantilla page.php para renderizar mientras que la página «Quienes somos» usará la plantilla page-quienes-somos.php con el código HTML, PHP y CSS específico para mostrar los empleados y la galería.

Ejemplo navideño

Se acercan las navidades y nos solicita nuestro cliente que quiere implementar un nuevo estilo en todos sus entradas con un diseño más navideño. Nuestro tema activo cuenta solamente con la plantilla single.php para renderizar las entradas. Como podemos ver en el diagrama contamos con una plantilla un poco más específica que nos podría valer para solucionar esta petición. Implementamos la nueva estructura en la nueva plantilla single-post.php. Acabada la navidad basta con que borremos el fichero o bien le cambiemos el nombre para que WordPress no lo tenga en cuenta en la selección de la jerarquía de plantillas.

Breve repaso de todas las plantillas disponibles en WordPress

Vamos a hacer un pequeño repaso de todas las plantillas que conforman la jerarquía, sabiendo que debemos leerla de izquierda a derecha y que en caso de ausencia WordPress siempre usará el index.php como plantilla final.

Plantilla de inicio de nuestra web

Jerarquía básica:

• home.php
• index.php

En caso de que exista el fichero home.php WordPress utilizará esta plantilla para mostrar las últimas entradas de nuestra web, caso contrario usará el fichero index.php. De todas formas y según varias configuraciones la página de inicio de una web pueda ser renderizada por un gran conjunto de plantillas como veremos a continuación.

Frontpage

Jerarquía (si la página de inicio muestra las últimas entradas):

• front-page.php
• home.php
• index.php

Jerarquía (cuando usa una página estática):

• front-page.php
• page-{slug}.php
• page-{id}.php
• page.php
• index.php

La configuración de la página de inicio de una web se configura desde Ajustes » Lectura. Allí podremos ver que la plantilla front-page.php puede ser usada de dos maneras: Para mostrar los últimos posts o bien utilizando una página.

Plantillas de Colecciones (archives)

Jerarquía:

• archive.php
• index.php

Las plantillas de colecciones muestran todas las entradas correspondientes a un grupo específico. Por ejemplo todas las entradas de un autor, de una categoría o aquellas que estén marcadas con una etiqueta en particular. En caso de no existir alguna plantilla específica WordPress usará el fichero archive.php para renderizar los resultados.

Plantillas de Autores

Jerarquía:

• author-{nicename}.php
• author-{id}.php
• author.php
• archive.php
• index.php

Las plantillas de los autores muestran un listado de las entradas escritas por un determinado autor. Por ejemplo si queremos implementar un diseño o estructura especial para un determinado autor podríamos utilizar el fichero author-maugelves.php (plantilla especial para mostrar las entradas del autor mgelves). El resto  de los autores usarán cualquiera de las demás plantillas generales (author, archive o index en su defecto).

Plantilla de Categorías

Jerarquía:

• category-{slug}.php
• category-{id}.php
• category.php
• archive.php
• index.php

Al igual que las plantillas de autor las plantillas de categoría agrupan entradas por una taxonomía determinada. Para entender un poco más el uso de esta plantilla podemos referirnos al ejemplo que escribimos previamente.

Otras plantillas de colecciones

Ya tenemos más o menos un pequeño pantallazo de cómo funcionan las plantillas de colecciones. Aparte de autor y categoría tenemos otras tantas plantillas  de este tipo que nos pueden ser de utilidad:  fechas, etiquetas, tipos de post personalizados y taxonomías personalizadas.

Plantillas de etiquetas

Jerarquía:

• tag-{slug}.php
• tag-{id}.php
• archive.php
• index.php

Plantillas de fechas

Jerarquía:

• date.php
• archive.php
• index.php

Plantillas de tipos de post personalizados

Jerarquía:

• archive-{tipo-de-post}.php
• archive.php
• index.php

Plantillas Simples (Single)

Cuando hablamos de plantillas simples nos referimos a aquellas páginas donde solo se muestra una entidad de información principal: Una página, una entrada, un adjunto o un tipo de post personalizado.

Plantillas para entradas

Jerarquía:

• Plantilla de entrada
• single-{nombre_tipo_de_post}.php
• single.php
• singular.php
• index.php

Estas son las plantillas que usaremos para todas las entradas, artículos o cualquier tipo de post personalizado que creemos. Para este último caso basta con que agreguemos el nombre al fichero y solucionado, tenemos una plantilla personalizada. Por ejemplo si tenemos un tipo de post personalizado llamado «libro» el fichero debe llamarse single-libro.php.

En la versión 4.7 de WordPress se agregaron las plantillas personalizadas para todos los tipos de posts y que representan la primer opción en la jerarquía.

Plantillas para páginas

Jerarquía:

• Plantilla de página
• page-{slug}.php
• page-{id}.php
• page.php
• index.php

Esta jerarquía es exactamente igual a la anterior solo que afecta a las páginas (pages) de WordPress. Para su mayor entendimiento podemos referirnos al ejemplo que detallamos previamente.

Plantillas de adjuntos

Jerarquía:

• image.php (o video.php, application.php, text.php, etc.)
• attachment.php
• single-attachment.php
• single.php
• index.php

Todos los adjuntos que agreguemos a nuestras entradas, páginas o tipos de post personalizados tienen sus propias plantillas. Comenzando por el tipo de adjunto en el primer nivel para luego ir descendiendo hacia las plantillas más genéricas.

Otras Plantillas

Plantilla 404

Jerarquía:

• 404.php
• index.php

Cuando un usuario accede a una URL errónea o simplemente tenemos un enlace roto, WordPress genera una página llamada 404. Este número corresponde a un error del protocolo HTTP para indicar que lo que estamos solicitando «no existe».

Esta plantilla podemos personalizarla para que el error sea menos dramático. Podríamos incluir en ella un pequeño sitemap de la web o bien un formulario de búsqueda para facilitarle la navegación al usuario.

Resumen

Entiendo y sé que es un tema un poco complejo para quienes estén comenzando con el desarrollo de páginas webs con WordPress pero una vez que entiendan la dinámica de la jerarquía tendrán un gran potencial en sus manos para el desarrollo de futuros proyectos.

Si tienes alguna duda en particular déjame un comentario y entre todos veremos la forma de ayudarte.