Si quieres personalizar temas o crear nuevos desde cero, es importante entender cómo funciona la jerarquía de plantillas de WordPress.
Prueba una demo gratis
En primer lugar, este sistema de WordPress ayuda a mantener todo organizado. Una vez que sepas qué son todos los archivos de plantilla del tema, qué hacen y cómo se priorizan, podrás modificar casi todos los aspectos de la apariencia de tu 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 plantilla implicados en cada tipo de página de WordPress (incluida una chuleta de referencia), para ayudarte a usarlos a tu favor.
¡Hagámoslo!
Introducción a la jerarquía de plantillas de WordPress
Normalmente, las webs no dinámicas usan archivos estáticos de HTML y CSS para renderizar su contenido. 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 gobierna el aspecto y la sensación de una sección o componente específico.
Siempre que cargas un cierto tipo de página, el sistema de gestión de contenidos (CMS) busca los archivos de plantilla correspondientes.
Por ejemplo, si usas 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 gobierna el aspecto de las páginas de resultados de búsqueda
- index.php, que es el archivo de plantilla predeterminado que WordPress usa cuando no puede encontrar la opción principal dentro de cada jerarquía
Los archivos de plantilla a los que tienes acceso dependerán del tema que estés usando. 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 estás usando 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 integrado que le dice a WordPress qué archivos de plantilla 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 la copia de seguridad final de cada rama dentro de la jerarquía de plantillas.
En teoría, puedes tener un tema totalmente funcional que solo incluya un archivo de plantilla, y ese es index.php.
Sin embargo, en la práctica, un tema con un solo archivo de plantilla difícilmente incluiría personalizaciones de estilo, y cada tipo de página luciría prácticamente igual. A menos que eso sea lo que buscas, entender la jerarquía de plantillas de WordPress es uno de los pasos más importantes que puedes dar como desarrollador de temas.
Cómo funciona la jerarquía de plantillas de WordPress
Como quizá ya sepas, 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 de inicio
- Entradas individuales
- Páginas individuales
- Tipos de entradas personalizadas
- Páginas de resultados de 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 usa 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 archivos de plantilla incluidos en el directorio del tema para una entrada de blog:
Este es un tipo de página de entrada individual, lo que significa que usa el archivo single.php como plantilla para el contenido principal de la página (la entrada de blog en sí).
Además, tienes un archivo de plantilla separado para cada elemento de la página, la mayoría de los cuales deberías poder identificar de un vistazo, incluyendo:
- Cabecera
- Pie de página
- Comentarios
- Barra lateral
Es importante entender que aunque cada tipo de página tiene su propia jerarquía, también a menudo comparten archivos de plantilla comunes, como header.php y footer.php.
Si estás construyendo tu propio tema, eso significa que puedes crear estilos personalizados para cada tipo de página, mientras que también creas archivos de plantilla para reutilizar.
También puedes crear archivos de plantilla personalizados para elementos como barras laterales y pies de página que solo se aplican a ciertos tipos de páginas. Toda esa flexibilidad es gracias al enfoque modular de WordPress con las plantillas.
Cuando cambias de tema, las diferencias en los diseños que ves se atribuyen a los nuevos archivos de plantilla que WordPress carga. Los temas hijos también son parte de la jerarquía de temas de WordPress, que discutiremos en breve.
Dónde localizar y cambiar los archivos de plantilla de WordPress
Un archivo .php puede incluir tanto código PHP como marcado HTML (todo lo cual puedes editar). Por ello, los archivos de plantilla de WordPress pueden ser tan complejos como necesites que sean. En muchos casos, los archivos de plantilla que usa WordPress son una colección de funciones para los elementos que gobiernan.
Para darte un ejemplo, aquí tienes un vistazo rápido al archivo de plantilla header.php que usa el tema oficial Twenty Twenty-One de WordPress:
Como mencionamos, cada tema de WordPress incluye su propio conjunto de archivos de plantilla. Puedes ver qué archivos de plantilla incluye tu tema accediendo a su carpeta dentro del directorio raíz de tu web a través de un cliente de Protocolo de Transferencia de Archivos (FTP).
Así es como se ve para el tema oficial anterior de WordPress, Twenty Twenty:
De forma predeterminada, WordPress cargará los archivos de plantilla que se encuentren dentro del directorio principal de tu tema (wp_content > themes) o dentro de la carpeta template-parts.
Si planeas crear múltiples archivos de plantilla, recomendamos mantener las plantillas de tus páginas principales dentro del directorio principal. Para archivos de plantilla más específicos, como una página de ancho completo o diseños de barra lateral, puedes usar subdirectorios.
La mejor manera de entender la jerarquía completa de plantillas de WordPress es a través de una chuleta. Aquí tienes una visión general visual de la jerarquía de plantillas, cortesía del Codex de WordPress:
El Codex de WordPress incluye mucha información sobre la jerarquía de plantillas, así que recomendamos marcar ese recurso. Por ahora, sumerjámonos en cada tipo de página y los archivos de plantilla que usa.
Un desglose de la jerarquía de plantillas de WordPress por tipo de página
WordPress usa siete tipos principales de páginas. En esta sección, cubriremos cada una de ellas y proporcionaremos un desglose de los archivos de plantilla que usan. Empecemos con la página de inicio.
- Archivos de plantilla de la página de inicio
- Entradas individuales
- Páginas individuales
- Tipos de entradas personalizadas
- Páginas de resultados de búsqueda
- Páginas de categorías y etiquetas
- Páginas de error 404
Archivos de plantilla de la página de inicio
Tu página de inicio de WordPress es la primera parada que hacen la mayoría de los usuarios al visitar tu web. En la práctica, los diseños de las páginas de inicio pueden variar drásticamente de un sitio a otro.
Sin embargo, para una página de inicio básica, WordPress buscará estos tres archivos de plantilla en orden:
1. front-page.php
2. home.php
3. index.php
Si tu tema no incluye un archivo de plantilla front-page.php, WordPress recurrirá a la segunda opción, y así sucesivamente. Como siempre, el archivo index.php es la última parada que hace WordPress en el árbol de decisiones de plantillas.
Entradas individuales
Las entradas individuales de WordPress usan la jerarquía de plantillas de entrada individual. Para el contenido principal de cada entrada de blog, WordPress buscará los siguientes archivos:
- single.php
- singular.php
- index.php
Sin embargo, si echas un vistazo a la chuleta de plantillas, notarás una jerarquía más compleja que surge en algunos casos.
Esto se debe a que WordPress te permite designar archivos de plantilla para entradas individuales y categorías individuales, y luego recurre a single.php si no puede encontrar ninguna de esas opciones.
Más allá de los archivos de plantilla principales, tienes elementos como la cabecera, 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 entradas, las páginas individuales son el pan de cada día de la mayoría de las webs de WordPress. En la mayoría de los casos, usan una plantilla diferente a la de tu página de inicio, a menos que ambos tipos de páginas recurran a index.php.
Así es como se ve la jerarquía de plantillas de página individual:
- page.php
- singular.php
- index.php
Aunque la jerarquía de plantillas para entradas y páginas individuales es similar, hay algunas diferencias clave.
Primero, cuando se trata de páginas, WordPress usa la ruta get_page_templates() para archivos personalizados, que puedes usar para cambiar o redirigir la plantilla de página predeterminada.
Además, puedes crear plantillas para slugs e IDs específicos. Si tienes un archivo page-{slug}.php o un archivo page-{id}.php, WordPress intentará cargar cada archivo en orden, antes de usar page.php de forma predeterminada.
Tipos de entradas personalizadas
Puedes crear tipos de entradas personalizadas para varios tipos de contenido que quizá no quieras agrupar con Páginas o Entradas. Los tipos de entradas personalizadas te dan 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 entradas personalizadas no es tan compleja como lo es para las páginas o entradas completas. Sin embargo, WordPress te permite crear archivos de plantilla para cada tipo de entrada personalizada, así que no tienen 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 usa para las páginas de resultados de búsqueda, así que recapitulemos brevemente cómo se ve:
- search.php
- index.php
A medida que nos alejamos de los tipos de páginas «complejos», como las entradas o la página de inicio, la jerarquía de plantillas de WordPress se vuelve mucho más fácil.
Páginas de categorías y etiquetas
Aunque muchas webs no enlazan a ellas directamente, WordPress genera páginas colectivas para tus etiquetas y categorías. También hay subpáginas específicas para cada elemento dentro de esa taxonomía.
Considerando lo compleja que puede ser la taxonomía para webs 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
Ten en cuenta que se usa la misma jerarquía para las etiquetas, excepto que «tag» reemplaza a «category» en todos los casos.
En teoría, puedes crear archivos de plantilla individuales para cada categoría o etiqueta de tu web de WordPress e identificarlos a través de slugs o IDs. Sin embargo, pocas webs pasan por todos estos problemas.
Si no planeas permitir que los visitantes naveguen por tu página de categoría, siéntete libre de usar la plantilla archive.php de forma predeterminada.
Páginas de error 404
A veces los visitantes intentarán acceder a una página que no existe. Cuando eso ocurre, WordPress devolverá una página de error 404.
De forma predeterminada, WordPress no ofrece opciones para personalizar la apariencia de esta página. Sin embargo, puedes ajustar su apariencia tú mismo a través del archivo de plantilla. La jerarquía de plantillas es bastante corta:
- 404.php
- index.php
A medida que tu web crece, también lo harán las instancias en las que los usuarios pueden encontrarse con errores 404. Tener una página de error personalizada para esas situaciones puede ayudarte a hacer saber a los visitantes por qué la página no carga, dirigirlos 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.
Dónde encajan los temas hijos en la jerarquía de plantillas de WordPress
Si te gusta personalizar tus temas de WordPress, una de las mejores prácticas 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 obvio si miras la chuleta que proporcionamos anteriormente.
En pocas palabras, usar un tema hijo añade una segunda capa a la jerarquía de plantillas para cualquier tipo de página que uses.
Digamos que estás usando un tema hijo que incluye archivos de plantilla personalizados 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 hijo
- singular.php dentro del tema padre
- index.php dentro del tema hijo
- index.php dentro del tema principal
Si WordPress puede encontrar una versión de un archivo de plantilla dentro de su tema hijo, esa es la que cargará, incluso si tiene un homólogo dentro del tema padre. En algunos casos, puedes encontrarte en una situación en la que quieras personalizar los archivos de plantilla de un tema que usas, y aprovechar un tema hijo es perfecto en esos escenarios.
Como con otros tipos de personalizaciones, 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.
Usar etiquetas de plantilla de WordPress para el desarrollo de temas
En el desarrollo de WordPress, a menudo te encontrarás con etiquetas de plantilla, que son funciones PHP que puedes usar para generar y obtener datos dinámicamente. Las etiquetas de plantilla a menudo forman parte de los archivos de plantilla, pero no son intercambiables.
WordPress crea docenas de etiquetas de plantilla en tu código, que puedes usar en el desarrollo de temas. Algunos ejemplos incluyen:
- get_header()
- get_footer()
- get_sidebar()
- get_search_form()
- get_template_part()<
Estas etiquetas te permiten recopilar archivos de plantilla del tema que estás usando. En la práctica, eso significa que puedes añadir elementos específicos a los archivos de plantilla principales, como front-page.php o index.php.
Para obtener una lista completa de todas las etiquetas de plantilla que puedes usar en el desarrollo de WordPress, echa un vistazo al Codex de WordPress.
Allí, encontrarás 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 pueda parecer compleja a primera vista, se reduce a una serie de simples árboles de decisiones. Siempre que visitas una web de WordPress, el CMS verá qué tipo de página estás intentando acceder y luego usará la jerarquía para determinar qué archivo de plantilla cargar.
Más allá de las plantillas principales para cada tipo de página, también puedes tener archivos de plantilla para elementos individuales como cabeceras, pies de página y barras laterales.
Este enfoque modular te da un control total sobre el aspecto y la sensación de cada página de tu sitio y 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ártela en la sección de comentarios de abajo!
Si te ha gustado este artículo, te va a encantar la plataforma de hosting de WordPress de Phluit. Acelera tu web y obtén soporte 24/7 de nuestro veterano equipo de WordPress. Nuestra infraestructura impulsada por Google Cloud se centra en el autoescalado, el rendimiento y la seguridad. ¡Déjanos mostrarte la diferencia de Phluit! Ver nuestros planes
