Si quieres personalizar los temas o construir nuevos desde cero, es importante entender cómo funciona la jerarquía de plantillas de WordPress.
En primer lugar, este sistema de WordPress ayuda a mantener todo organizado. Una vez que sepas cuáles son todos los archivos de plantillas de temas, qué hacen y cómo se priorizan, podrás alterar casi todos los aspectos del diseño de tu sitio web de WordPress.
En este artículo, explicaremos qué es la jerarquía de plantillas de WordPress y cómo funciona. Luego proporcionaremos un desglose completo de los archivos de plantillas implicados en cada tipo de página de WordPress (incluyendo una hoja de referencia), para ayudarte a usarlos en tu beneficio.
¡Vamos a ello!
Una Introducción a la Jerarquía de las Plantillas de WordPress
Normalmente, los sitios web no dinámicos utilizan archivos estáticos de HTML y CSS para renderizar sus contenidos. Sin embargo, WordPress es una plataforma dinámica basada en el lenguaje de programación PHP. Cada sitio de WordPress carga múltiples archivos .php, cada uno de los cuales controla el aspecto de una sección o componente específico.
Cada vez que cargas un determinado tipo de página, el Sistema de Gestión de Contenidos (CMS) busca los archivos de plantilla que le corresponden.
Por ejemplo, si utilizas la función de búsqueda de WordPress y cargas una página de resultados de búsqueda, el CMS buscará dos archivos de plantilla:
- search.php, que controla el aspecto de las páginas de resultados de búsqueda
- index.php, que es el archivo de plantilla predeterminado que WordPress utiliza cuando no puede encontrar la opción superior dentro de cada jerarquía
Los archivos de plantilla a los que tienes acceso dependerán del tema que utilices. Todos los temas de WordPress son una colección de plantillas, hojas de estilo y otros elementos, como imágenes. Así que en el ejemplo anterior, si el tema que utilizas incluye una plantilla search.php, WordPress la encontrará y la cargará.
En algunos casos, puedes usar un tema que no incluya archivos de plantilla para los tipos de páginas que quieres cargar. Ahí es donde entra la jerarquía de plantillas de WordPress. Es un sistema incorporado que le dice a WordPress qué archivos de plantilla debe cargar y en qué orden.
Para una página de búsqueda, si WordPress no puede encontrar el archivo search.php, pasará al siguiente archivo de la jerarquía, que es index.php. Este archivo es el último recurso para cada rama dentro de la jerarquía de plantillas.
En teoría, puedes tener un tema completamente funcional que solo incluye un archivo de plantilla, y que es index.php.
En la práctica, sin embargo, un tema con un solo archivo de plantilla apenas incluiría personalizaciones de estilo, y cada tipo de página se vería prácticamente igual. A menos que eso sea lo que busques, entender la jerarquía de plantillas de WordPress es uno de los pasos más importantes que puedes dar como desarrollador de un tema.
Cómo Funciona la Jerarquía de Plantillas de WordPress
Como ya sabrás, WordPress te permite usar múltiples tipos de páginas dependiendo de lo que quieras publicar. Hay siete categorías principales que puedes usar:
- Página principal
- Publicaciones individuales
- Páginas individuales
- Tipos de publicaciones personalizados
- Páginas de resultados de la búsqueda
- Páginas de categorías y etiquetas
- Páginas de error 404
Cada una de esas páginas tiene su propia jerarquía personalizada, lo que significa que utiliza un conjunto específico de archivos de plantilla.
Si echas un vistazo rápido a cualquiera de las carpetas de tu tema, normalmente encontrarás una colección de archivos de plantilla. El siguiente es un ejemplo de los archivos de plantilla listados dentro del directorio del tema para una entrada de un blog::
Se trata de un tipo de página de una única publicación, lo que significa que utiliza el archivo single.php como plantilla para el contenido principal de la página (la propia entrada del blog).
Además, tiene un archivo de plantilla separado para cada elemento de la página, la mayoría de los cuales debería ser capaz de identificar a simple vista, incluyendo:
- Encabezado
- Pie de página
- Comentarios
- Barra Lateral
Es importante comprender que, aunque cada tipo de página tiene su propia jerarquía, también suelen compartir archivos de plantilla comunes, como header.php y footer.php.
Si estás creando tu propio tema, eso significa que puedes crear estilos personalizados para cada tipo de página, a la vez que construyes archivos de plantillas para volver a utilizarlos.
También puedes crear archivos de plantillas personalizadas para elementos como barras laterales y pies de página que solo se aplican a ciertos tipos de páginas. Toda esta flexibilidad se debe al enfoque modular de las plantillas de WordPress.
Cuando cambias de tema, las diferencias en los diseños que ves se atribuyen a los nuevos archivos de plantilla que carga WordPress. Los temas Hijo también juegan un papel importante en la jerarquía de temas de WordPress, que discutiremos pronto.
Dónde Localizar y Cambiar los Archivos de Plantillas de WordPress
Un archivo .php puede incluir tanto el código PHP como el marcado HTML (todos ellas editables). Como tal, los archivos de plantilla de WordPress pueden ser tan complejos como los necesites. En muchos casos, los archivos de plantilla que utiliza WordPress son una serie de funciones para los elementos que controlan.
Para darte un ejemplo, aquí tienes un rápido vistazo al archivo de plantilla header.php que utiliza el tema oficial de WordPress Twenty Twenty One:
Como mencionamos, cada tema de WordPress incluye su propio conjunto de archivos de plantillas. Puedes ver qué archivos de plantilla incluye tu tema accediendo a su carpeta dentro del directorio raíz de tu sitio web a través de un cliente de Protocolo de Transferencia de Archivos (FTP).
Aquí está lo que aparece para el anterior tema oficial de WordPress, Twenty Twenty:
Por defecto, WordPress cargará los archivos de plantilla que se encuentren dentro del directorio principal de tu tema (wp_content > themes) o dentro de la carpeta de template-parts.
Si tienes previsto crear varios archivos de plantillas, te recomendamos que mantengas tus plantillas de páginas principales dentro del directorio principal. Para archivos de plantillas más específicos, como una página de ancho completo o diseños de barras laterales, puede utilizar subdirectorios.
La mejor manera de entender la jerarquía completa de la plantilla de WordPress es a través de una hoja de trucos. En este caso, te mostramos una visión general de la jerarquía de plantillas, cortesía del Códex de WordPress:
El Códex de WordPress incluye una gran cantidad de información sobre la jerarquía de plantillas, así que recomendamos marcar ese recurso. Por ahora, vamos a indagar en cada tipo de página y los archivos de plantilla que utiliza.
Un Desglose de la Jerarquía de la Plantilla de WordPress por Tipo de Página
WordPress utiliza siete tipos principales de páginas. En esta sección, hablaremos de cada uno de ellos, y te proporcionaremos un desglose de los archivos de plantilla que utilizan. Empecemos con la página principal.
Archivos de Plantillas de Página Principal
Tu página de inicio de WordPress es la primera parada que la mayoría de los usuarios hacen cuando visitan tu sitio web. En la práctica, los diseños de la página principal pueden variar dramáticamente de un sitio a otro.
Sin embargo, para una portada básica, WordPress buscará estos tres archivos de plantillas en orden:
- front-page.php
- home.php
- index.php
Si el tema no incluye un archivo de plantilla front-page.php, WordPress utilizará la segunda opción de forma predeterminada, y así sucesivamente. Como siempre, el archivo index.php es la última parada que hace WordPress en el árbol de decisión de plantillas.
Posts Individuales
Los artículos individuales de WordPress utilizan la jerarquía de plantillas de publicaciones individuales. Para el contenido principal de cada entrada del blog, WordPress buscará los siguientes archivos:
- single.php
- singular.php
- index.php
Sin embargo, si miras la hoja de trucos de la plantilla, notarás que en algunos casos surge una jerarquía más compleja.
Esto se debe a que WordPress te permite designar archivos de plantillas para publicaciones individuales y categorías individuales, y luego se establece como predeterminado single.php si no puede encontrar ninguna de esas opciones.
Más allá de los archivos de plantilla primarios, tienes elementos como el encabezado, el pie de página, las barras laterales y las secciones de comentarios. Como mencionamos antes, cada uno de esos elementos puede tener su propio archivo de plantilla.
Páginas Individuales
Después de las publicaciones, las páginas individuales son el pan de cada día para la mayoría de los sitios web de WordPress. En la mayoría de los casos, utilizan una plantilla diferente a la de tu página de inicio, a menos que ambos tipos de páginas estén predeterminadas en index.php.
Así es como se ve la jerarquía de las plantillas de páginas individuales:
- page.php
- singular.php
- index.php
Aunque la jerarquía de la plantilla para las publicaciones y páginas individuales es similar, hay algunas diferencias clave.
En primer lugar, cuando se trata de páginas, WordPress utiliza la ruta get_page_templates() para los archivos personalizados, que puedes utilizar para cambiar o redirigir la plantilla de página predeterminada.
Además, puedes crear plantillas para ID y fichas específicas. Si tienes un archivo page-{slug}.php o page-{id}.php, WordPress tratará de cargar cada archivo en orden, antes de predeterminar el archivo page.php.
Tipos de Posts Personalizados
Puedes crear tipos de posts personalizadas para varios tipos de contenido que tal vez no quieras combinar con páginas o posts. Los tipos de publicaciones personalizadas te proporcionan un mayor grado de organización para tu contenido y también tienen su propia jerarquía de plantillas:
- archive-{post_type}.php
- archive.php
- index.php
La jerarquía de plantillas para los tipos de posts personalizados no es tan compleja como lo es para las páginas o posts completas. Sin embargo, WordPress te permite crear archivos de plantilla para cada tipo de post personalizado, de modo que no tengas que compartir exactamente los mismos diseños.
Páginas de Resultados de Búsqueda
Ya te hemos presentado la jerarquía de plantillas que WordPress utiliza para las páginas de resultados de búsqueda, así que recapitulemos brevemente cómo es:
- search.php
- index.php
A medida que nos alejamos de los tipos de páginas «complejas» como las publicaciones o la página principal, la jerarquía de plantillas de WordPress se vuelve mucho más sencilla.
En una página de búsqueda, normalmente no es necesario incluir demasiados elementos más allá de los resultados en sí. Cuanto más simple es la estructura, más corta suele ser la jerarquía.
Páginas de Categorías y Etiquetas
Aunque muchos sitios web no enlazan directamente con ellos, WordPress genera páginas colectivas para tus etiquetas y categorías. También hay sub páginas específicas para cada elemento dentro de esa taxonomía.
Considerando lo compleja que puede llegar a ser la taxonomía de los sitios web con grandes bibliotecas de contenido, esta jerarquía implica más «pasos» de lo habitual:
- category–{slug}.php
- category-{id}.php
- category.php
- archive.php
- index.php
Nota que se utiliza la misma jerarquía para las etiquetas, excepto que «etiqueta» sustituye a «categoría» en todos los casos.
En teoría, puedes crear archivos de plantilla individuales para cada categoría o etiqueta en tu sitio web de WordPress, e identificarlos ya sea a través de fichas o ID. Sin embargo, pocos sitios web se toman esa molestia.
Si no planeas dejar que los visitantes naveguen por tu página de categorías, no dudes en usar la plantilla archive.php por defecto.
Páginas de Error 404
A veces, los visitantes intentarán acceder a una página que no existe. Cuando esto sucede, WordPress mostrará una página de error 404.
De forma predeterminada, WordPress no ofrece opciones para personalizar el aspecto de esta página. Sin embargo, puedes ajustar la apariencia de la misma tú mismo a través del archivo de la plantilla. La jerarquía de la plantilla es bastante corta:
- 404.php
- index.php
A medida que tu sitio web crezca, también lo harán las instancias en las que los usuarios puedan encontrarse con errores 404. Tener una página de errores personalizada para esas situaciones puede ayudarte a informar a los visitantes de por qué no se carga la página, orientarlos en otra dirección y reducir la frustración.
Al cargar un archivo de plantilla 404, WordPress buscará y cargará tu archivo personalizado antes de usar el predeterminado.
Donde Encajan los Temas Hijos en la Jerarquía de Plantillas de WordPress
Si te gusta personalizar tus temas de WordPress, una buena práctica es usar un tema hijo. Los temas hijos también tienen su lugar dentro de la jerarquía de plantillas de WordPress, pero no es evidente si miras la hoja de trucos que proporcionamos antes.
En resumen, el uso de un tema hijo añade una segunda capa a la jerarquía de plantillas para cualquier tipo de página que se utilice.
Digamos que estás usando un tema hijo que incluye archivos de plantillas personalizadas para páginas individuales. Este es el orden en el que WordPress intentará cargar los archivos:
- page.php dentro del tema hijo
- page.php dentro del tema padre
- singular.php dentro del tema del hijo
- singular.php dentro del tema padre
- index.php dentro del tema del hijo
- index.php dentro del tema padre
Si WordPress puede encontrar una versión de un archivo de plantilla dentro de tu tema hijo, esa es la que cargará, incluso si hay un equivalente en el tema padre. En algunos casos, puedes encontrarte en una situación en la que quieras personalizar los archivos de plantilla de un tema que utilices, y la utilización de un tema hijo es perfecto en esos casos.
Al igual que con otros tipos de personalización, perderás los cambios en los archivos de plantilla de un tema cuando lo actualices. Añadir esos cambios a través de un tema hijo te salvará de esa situación.
Uso de Etiquetas de Plantillas de WordPress para el Desarrollo de Temas
En el desarrollo de WordPress, a menudo te encontrarás con etiquetas de plantillas, que son funciones PHP que puedes utilizar para generar y obtener datos de forma dinámica. Las etiquetas de plantilla suelen formar parte de los archivos de plantilla, pero no son intercambiables.
WordPress incorpora docenas de etiquetas de plantillas en su código, que puedes usar en el desarrollo de temas. Algunos ejemplos son:
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()
Estas etiquetas te permiten recopilar archivos de plantillas del tema que estás usando. En la práctica, esto significa que puedes añadir elementos específicos a los archivos de plantilla principales, como front-page.php o index.php.
Si quieres una lista completa de todas las etiquetas de plantilla que puedes usar en el desarrollo de WordPress, consulta el Códex de WordPress.
Allí encontrará instrucciones sobre cómo usar cada etiqueta de plantilla, sus parámetros individuales y ejemplos del código en acción.
Resumen
Aunque la jerarquía de plantillas de WordPress puede parecer compleja a primera vista, se reduce a una serie de simples árboles de decisión. Cada vez que visites un sitio web de WordPress, el CMS verá a qué tipo de página estás tratando de acceder, y luego usará la jerarquía para determinar qué archivo de plantilla debe cargar.
Además de las plantillas principales para cada tipo de página, también puedes tener archivos de plantillas para elementos individuales como encabezados, pies de página y barras laterales.
Este enfoque modular te da un control total sobre el aspecto de cada página de tu sitio y te ayuda a ahorrar tiempo durante el proceso de desarrollo de WordPress.
¿Tienes alguna pregunta sobre cómo funciona la jerarquía de plantillas de WordPress? ¡Compártelas en la sección de comentarios de abajo!
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta