Entender bien la estructura de las plantillas de WordPress es una parte muy importante del proceso de desarrollo de una página web. Todos los archivos que conforman una plantilla o tema trabajan codo con codo para crear el diseño y dar forma a las funcionalidades activadas en cualquier web de WordPress. Si esto lo unimos a la potente arquitectura sobre la que se asienta WordPress a nivel de core, podemos crear las plantillas que queramos y sin cometer graves errores de diseño.
Si pudiéramos enumerar algunos puntos fuertes que tienen las plantillas de WordPress, estos serían por ejemplo:
- Separan la presentación y la forma en que se muestran los archivos del sistema o el contenido para que puedas cambiar la visualización con el menor número de problemas posible.
- Las plantillas suelen tener configuraciones sólidas para activar o desactivar funcionalidades extra integradas en las mismas. Los diseñadores web tienen la tendencia a incluir herramientas para ver galerías o sliders.
- A menudo añaden configuraciones para modificar el diseño de la web fácilmente.
- Las mejores plantillas, o las que más trabajo tienen por detrás, eliminan la necesidad de que los administradores aprendan CSS, HTML o PHP para hacer modificaciones en la página.
Entendiendo el core de WordPress y sus componentes
Cuando instalas WordPress por primera vez, los archivos que se añaden a tu plan de hosting incorporan una serie de elementos repartidos entre el archivo wp-config.php, un directorio wp-content y una base de datos MySQL. Si a esta instalación empiezas a añadirle plantillas, plugins y otros documentos, se guardarán en la carpeta wp-content, asignando dentro de esta un directorio personalizado para cada clase de archivos: por ejemplo, para las plantillas que subas se creará una carpeta llamada themes.
Si prefieres instalar una plantilla usando la funcionalidad que tiene WordPress para buscar temas y activarlos sin usar programas externos o similares, esta se transferirá mediante un archivo .zip y se descomprimirá directamente en la carpeta themes. Cada plantilla tiene su propia carpeta, pero dentro de esta clasificación que hace WordPress, se sigue una estructura definida.
Existe mucha documentación acerca de cómo crear plantillas en la sección Desarrollo de Temas en el Codex de WordPress. Si te resulta familiar trabajar con PHP y tienes en mente personalizar y desarrollar plantillas o temas hijo, también puedes echarle un vistazo al manual de PHP Coding Standards. Este último documento es muy útil, sobre todo en aquellos casos de proyectos hechos en PHP que están hechos “de aquella manera”, es decir, plantillas con una estructura mal planteada y difícil de meter mano para solventar los problemas que acarrea.
¿Qué archivos forman una plantilla de WordPress?
Aunque parezca mentira, solo se necesitan dos archivos para crear un tema en WordPress. El primero de ellos es style.css que sirve para describir la plantilla en sí. WordPress lee esta descripción usando una serie de comentarios que inician el archivo, algo como:
/*
Theme Name: My Theme Name
Theme URL: http://www.dknewmedia.com/
Description: This is the custom theme I'm developing
Author: DK New Media
Author URL: http://www.dknewmedia.com/
Version: 1.0.0
License: GNU General Public License v2 or later
License URL: http://www.gnu.org/licenses/gpl-2.0.html
Tags: godaddy, theme
Text Domain: mytheme
*/El otro archivo necesario es el famoso index.php que contiene el Loop, que viene a ser el código imprescindible para que WordPress muestre en tu web todos los artículos o contenido que publiques.
¿Cuál es la estructura de una plantilla de WordPress?
Ten en cuenta un detalle, no siempre se incluyen en los archivos de las plantillas todos los elementos que quieres para tu diseño web. Si nos centramos en una web común, te darás cuenta de que hay hasta seis secciones clásicas:
- Contenido, todo lo que escribes de manera específica para una página o un artículo.
- header.php, se muestra el diseño común en la parte superior de la web, en las páginas, artículos o en el archivo.
- footer.php, es el diseño de la parte inferior de una web que se muestra siempre, de forma similar a header.php
- sidebar.php, que muestra el contenido personalizado en uno o ambos laterales de tu web.
- searchform.php, para mostrar en tu plantilla el cuadro de búsqueda para tu WordPress.
- .php, con el que puedes mostrar contenido personalizado en cualquier parte de tu web, por ejemplo un call-to-action u otro contenido en sidebar.
¿Cómo se estructura el diseño de una web en WordPress?
WordPress se creó originariamente como una plataforma para blogs donde la gente compartía sus opiniones o su vida, pero no todo en esta vida consiste en escribir y menos si tienes una web en WordPress. Si tu idea se aleja totalmente de tener un blog, echa un vistazo a estos archivos de WordPress para personalizar el diseño a tu gusto:
- 404.php, donde puedes crear un diseño para situaciones en las que tu contenido no existe o la búsqueda fue errónea, mostrando un error 404.
- front-page.php, útil si diseñas una página estática acorde con la configuración de lectura que tengas (a través de WordPress > Ajustes > Lectura).
- home.php, que muestra el diseño por defecto de tu página principal.
- page.php, el diseño por defecto de todas tus páginas.
- page-.php, asociando el diseño a la página que contenga ese slug en su URL.
- search.php, que muestra el diseño por defecto de los resultados de búsqueda en tu web.
¿Cuáles son las páginas puramente de blog en WordPress?
Si al final te decantas por bloguear, tienes muchísimas más opciones en cada plantilla para toquetear:
- archive.php, que muestra el diseño que se ve por defecto cuando se quieren ver las entradas por categoría, autor o por fecha.
- archive-.php, si implementas Post Types personalizados, puedes hacer el diseño a tu medida siguiendo esta estructura.
- attachment.php, que muestra el diseño por defecto cuando adjuntas algún archivo a la biblioteca de tu WordPress (distinto a una imagen).
- author.php, cuando consultas el trabajo de un autor en la web.
- category.php, para diseños por defecto cuando consultas todos los artículos de una categoría en concreto.
- comments.php, que muestra la parte de comentarios que se registran en el blog.
- date.php, para diseños por defecto cuando consultas todos los artículos creados en una fecha, en caso de establecerlo así en los enlaces permanentes.
- image.php, que a diferencia de attachment solo sirve para las imágenes que subimos a la biblioteca de WordPress.
- single.php, que muestra el diseño de serie para un artículo aislado.
- single-.php, que funciona exactamente igual a archive-.php.
- tag.php, para diseños por defecto cuando consultamos todos los artículos de una etiqueta asociada a estos.
- taxonomy.php, que muestra el diseño original cuando queremos ver todos los artículos relacionados con una taxonomía en particular.
Consejo Pro: No olvides añadir una captura de pantalla para ver cómo queda tu tema dentro de WordPress, en WordPress > Appearance > Themes. Si creas imágenes, las debes subir en formato PNG con tamaño 880x660.
¿Cómo funcionan los temas hijo de WordPress?
Es quizá una de las funcionalidades menos conocidas y menos explotadas en WordPress. Con este CMS es posible crear temas hijo adoptando por completo la forma de la plantilla original. Muchos clientes buscan a profesionales web que sepan desarrollar desde cero una plantilla que han comprado y no saben cómo usar. Sin embargo, hay empresas que directamente pasan de su cliente y se dedican simplemente a editar lo que el cliente les entrega, personalizándolo. ¡Editar una plantilla de pago una plantilla de pago es lo peor que puedes hacer a estas alturas!
Puedes crear temas hijo de forma muy sencilla añadiendo nuevos archivos (un directorio, el archivo index.php y el style.css) con referencia al tema padre:
/*
Theme Name: My Child Theme Name
Theme URL: http://www.dknewmedia.com/
Description: This is the custom child theme I'm developing
Author: DK New Media
Author URL: http://www.dknewmedia.com/
Version: 1.0.0
Template: parent-theme-directory-name
License: GNU General Public License v2 or later
License URL: http://www.gnu.org/licenses/gpl-2.0.html
Tags: godaddy, childtheme
Text Domain: mychildtheme
*/Al crear un tema hijo, solo tienes que incluir los archivos del tema padre que más te interesen o los que quieras personalizar en la carpeta del tema hijo. Y si no editas el tema padre, puedes actualizar ambos de golpe cuando su autor lance una versión actualizada, como respuesta a cambios en WordPress, problemas de seguridad o solución de errores.
Añadiendo más archivos y carpetas a la estructura de plantillas de WordPress
Mientras no crees archivos que se solapen o entren en conflicto con los que he mencionado antes, puedes añadir tantas carpetas y archivos como te venga en gana. Un ejemplo muy usado es el de añadir un diseño de páginas alternativo a la estructura de tu WordPress. Crear un diseño como este es sencillo, solo debes añadir un archivo PHP que contenga en el header lo siguiente:
<?php
/*
Template Name: Unique Template Name
*/
?>De esta forma ya puedes aplicar este diseño usando las opciones de edición de la página donde quieras emplearlo.
Algunos desarrolladores también añaden subdirectorios extra con su propia plantilla, incluyendo js (para scripts) e imágenes para lugares específicos en la misma. Los desarrolladores que tienen más experiencia suelen tener directorios adicionales para CSS, frameworks e incluso para traducir la web a varios idiomas. WordPress también soporta idiomas como el árabe (de lectura derecha-izquierda) usando un archivo rtl.css en el directorio de la plantilla.
Hay miles de temas gratuitos y premium disponibles para usar en WordPress. También puedes echar un ojo al repositorio de WordPress.org y a la lista de plantillas que vienen incluidas en los planes de Hosting WordPress que ofrece GoDaddy.
