Si algo he aprendido en mi reciente introducción al mundo de la maquetación de temas usando WordPress. Es que, hay que saber organizarse muy bien a la hora de que tu proyecto sea escalable y se pueda mantener a corto y largo plazo. Para ello el core de WordPress tiene su propia manera de cargar las plantillas. Dependiendo el tipo de página que se está mostrando en se momento, cargará una cosa u otra.
Hay infinidad de elementos que WordPress puede mostrar en tu página. Para cada uno de ellos puedes establecer como quieres que se muestren. Ya sea una landing, un porfolio, la entrada de un blog o un producto, etc… Esta versatilidad y capacidad de adaptarse a nuestras necesidades, ha hecho que la profesión de maquetador sea una de las más demandadas dentro del ecosistema de WordPress.
Para poner un poco de orden a todo esto, el core de WordPress tiene un orden establecido. Primero va a preguntar sobre el tipo de página en el que estamos y en función de esta intentará cargar una plantilla u otra siguiendo un orden. Pongamos en práctica un ejemplo.
Creando una plantilla para la página principal
Partiremos con un tema desde cero, donde podremos hacer las pruebas que queramos. Para ello crearemos una carpeta mytemplate dentro de la carpeta themes. Y le pondremos los ficheros style.css, index.php, home.php…:
Ahora dentro de cada fichero pondremos el siguiente contenido…:
mytemplate\style.css
/* Theme Name: Mi plantilla de ejemplo Theme URI: https://fmateo.es Author: FMateo Author URI: https://fmateo.es Description: Esta es una plantilla de ejemplo donde haremos varías pruebas para poder entender el funcionamiento de los temas en WordPress Version: 0. License: GNU General Public License v2 or later License URI: LICENSE */
mytemplate\index.php
<?php get_header(); ?> <h2>Ey! Estoy en el index.php :)</h2> <?php get_footer(); ?>
mytemplate\home.php
<?php get_header(); ?> <h2>Ey! Estoy en el home.php :)</h2> <?php get_footer(); ?>
Una vez tenemos esto, si vamos al apartado de temas en el backend de WordPress. Veremos que podremos activarlo:
Si te fijas la información que sale sobre nuestro tema son datos que hemos usado en los comentarios de nuestro style.css. Sin este fichero, WordPress no podrá detectar nuestro tema.
Una vez activado el tema, vamos a ponerlo en práctica. Si abrimos nuestra página principal. Esto será lo que veremos…:
Observamos que se está cargando el home.php ya que el texto Ey! Estoy en el home.php 🙂 es el que aparece en el fichero. Además de que WordPress interpreta el fichero home.php para la plantilla de la página que es considerada como principal del sitio.
Por ejemplo, ¿Que ocurriría si eliminásemos el fichero home.php de nuestro tema?
Cuando carguemos nuestra página principal de nuevo, se nos mostrará esto…:
Observamos que WordPress está cargando el index.php.
Creando una plantilla para una entrada normal
WordPress tiene el fichero single.php en el tema para poder mostrar la información relacionada con una entrada simple. Lo que viene a ser el objeto post con el que podemos gestionar las publicaciones de un blog.
Ahora si vamos a la carpeta mytemplate de nuevo y agregamos el fichero single.php:
Y ponemos el siguiente código…:
mytemplate\single.php
<?php get_header(); ?> <h2>Ey! Estoy en single.php :)</h2> <?php get_footer(); ?>
Cuando vayamos a abrir una entrada normal en frontend…:
Veremos que se nos mostrará Ey! Estoy en el single.php 🙂
Ahora por ejemplo si nos cargásemos el single.php WordPress te cargará el index.php.
¿Qué está haciendo WordPress entonces?
La respuesta es muy sencilla. WordPress primero pregunta ¿Dónde estoy? Y dependiendo de la respuesta trata de cargar la plantilla acorde a ella. Si es una entrada, cargará single.php. Si es la página principal cargará home.php. Y así con cualquier tipo de información que tratemos mostrar en nuestro site.
¿Que pasa si no tenemos la plantilla adecuada?. En este caso WordPress tiene un orden establecido. Por ejemplo, si no encuentra el single.php al mostrar una entrada o el home.php al cargar la página principal. Irá a otra opción más genérica, en este caso el index.php.
Toda esta cadena de archivos que WordPress va buscando está establecida en la siguiente imagen, que puede ayudarte a modo de tabla en tus futuros proyectos:
Como puedes ver, dependiendo del tipo de información que se va a mostrar WordPress tratará de mostrarla mediante su correspondiente orden en la lista. Podemos incluso llegar a poner un estilo propio a elementos como etiquetas o categorías individuales. Tan sólo tenemos que crear sus correspondientes ficheros category-{id}.php y tag-{sometag}.php donde el {id} identifica la categoría a la que corresponde esa plantilla o {sometag} para la etiqueta.
Entonces ¿Tengo que crear todos los ficheros?
No es obligatorio. Mi consejo es que empieces a desarrollar el tema acorde a las necesidades actuales de tu proyecto. La ventaja de esta estructura es que es escalable si sabes aprovecharla bien. Por ejemplo si tan solo tienes que hacer un portfolio, a lo mejor necesitas nada más home.php. ¿Tienes que añadir una página para el tema de cookies o política de privacidad?. Pues puedes usar page.php.
También hay que tener en cuenta de que al estar usando WordPress si no restringes determinados accesos que no son necesarios en tu página. Puede que te salga una pantalla en blanco, esto se debe a que WordPress ha intentado seguir su jerarquía para ese contenido y no ha encontrado nada. En estos casos lo mejor es que tengas preparado el fichero 404.php. O por ejemplo tengas algún tipo de redirección en tu index.php.