Una de las grandes virtudes de WordPress es la facilidad con la que podemos cambiar la apariencia de nuestro sitio web. Existen multitud de temas, libres o de pago, que podemos descargarnos e instalar y usar en nuestro WordPress. En general, los temas suelen ofrecer más o menos opciones de configuración. A través de ellas, podemos manipular detalles como, por ejemplo, si queremos que la barra lateral esté a la izquierda o a la derecha, añadir fragmentos de código CSS, etc. Pero no siempre nos permiten modificar aquello que necesitamos… ¿Qué podemos hacer? ¡Fácil! Recordad que con WordPress siempre podemos modificar el código fuente de cualquier componente; en este caso, del tema. Pero, ¿es eso recomendable?
Los temas en WordPress
Estoy seguro que todos aquellos que hayan intentado añadir alguna funcionalidad a su tema habrán manipulado, como mínimo, el fichero llamado functions.php. Este fichero se encarga de configurar el funcionamiento del tema, a través de, en general, hooks a diferentes acciones y filtros de WordPress. El principal problema de editar directamente el código fuente de un tema es que cuando éste se actualice (y, atención, hay casos en que las actualizaciones son automáticas), ¡se perderán todos los cambios que hayamos realizado! ¿Cómo podemos evitarlo?
Los temas hijo son temas que heredan la funcionalidad de otro tema, llamado tema padre. Son una forma fácil de modificar o añadir funcionalidad al tema padre sin tener que manipularlo directamente. La mejor forma de comprender cómo crear un tema hijo y, así, modificar al padre, es a través de un pequeño ejemplo.
Como imagino que sabréis, los temas se instalan en el directorio /wp-content/themes. Supongamos que el tema que estamos usando y queremos adaptar a nuestras necesidades se llama «Nelio Style». Todos los ficheros del tema están instalados en el directorio /wp-content/themes/nelio-style. En él encontraremos los ficheros functions.php (que ya hemos comentado), header.php (la cabecera de todas nuestras páginas), footer.php (el pie de página), 404.php (la plantilla para una página de error), entre muchos otros.
Uno de los ficheros más interesantes en un tema es style.css, puesto que es el que nos indica la información que veremos cuando accedamos a Apariencia -> Temas en el Escritorio de WordPress (nombre, descripción, etc.). Cualquier tema para WordPress debe incluir un fichero style.css en la raíz y éste debe empezar con la siguiente cabecera:
/* Theme Name: Nelio Style Theme URI: http://example.com/nelio-style/ Description: El tema más bonito jamás creados para WordPress. Author: David Aguilera Author URI: http://example.com License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Version: 1.0.0 Tags: orange, two-columns, right-sidebar, responsive-layout */
Creación de un tema hijo
Para crear un tema hijo, lo primero que haremos será crear un nuevo directorio /wp-content/themes/nelio-style-child (podemos ponerle el nombre que queramos). En el directorio añadiremos un único fichero style.css, cuyo contenido empezará así:
/* Theme Name: Nelio Style para WPrincipiante Theme URI: http://example.com/nelio-style/ Description: El tema más bonito jamás creados para WordPress. Author: Antonio Villegas Author URI: http://example.com License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Version: 1.0.0 Tags: orange, two-columns, right-sidebar, responsive-layout Template: nelio-style */ @import url("../nelio-style/style.css");
Como era de esperar, empezamos con la cabecera que ya hemos visto, con un par de cambios. Por un lado, hemos modificado, simplemente, el nombre y el autor del tema (aunque podríamos poner lo que quisiéramos en todos los campos). Por otro lado, hemos añadido una nueva entrada Template: nelio-style. Esta entrada nos está indicando qué tema es nuestro tema padre («nelio-style» es, como ya hemos dicho, el nombre del directorio del tema que queremos extender).
A continuación, importamos la hoja de estilo original y… ¡ya está! ¡Acabamos de crear nuestro tema hijo! Ya podemos ir a Apariencia -> Temas y establecer nuestro tema hijo como tema actual.
Cómo extender o adaptar el tema padre mediante nuestro tema hijo
Cada vez que queramos modificar un fichero del tema padre, lo único que tendremos que hacer es meter ese fichero en el tema hijo y modificar la versión del hijo. Siempre que el tema hijo defina un fichero que también está definido en el tema padre, se usará la versión que contenga el fichero hijo. Por ejemplo, si queremos manipular el fichero functions.php, simplemente copiamos el fichero /wp-content/themes/nelio-style/functions.php a /wp-content/themes/nelio-style-child/functions.php y lo editamos como nos plazca.
Truco: supongamos que no queréis modificar las funciones o hooks de functions.php, sino que simplemente queréis añadir alguna función y hook nuevos. Para ello, existe una alternativa que, en mi opinión, es mejor que duplicar el fichero en el tema hijo. Simplemente, cread un fichero functions.php vacío en el tema hijo y añadid la siguiente línea:
<?php require_once( get_template_directory() . '/functions.php' ); // A continuación, mis funciones y hooks ?>
Si el tema padre se actualiza y añade o elimina funciones o hooks de su functions.php, nuestro tema se beneficiará directamente de los cambios, puesto que no había duplicado el fichero, sino que lo había enlazado dinámicamente.
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
Conclusiones
En esta pequeña introducción, hemos visto cómo personalizar nuestros temas WordPress a través de los temas hijo. La idea es, básicamente, crear un nuevo tema (directorio) que incluya, de entrada, un único fichero style.css. En él indicamos cuál es el tema que vamos a extender y ya tenemos el tema hijo preparado. A continuación, para cualquier modificación que quisiéramos hacer en el padre, lo único que haremos será duplicar el fichero en el tema hijo y hacer las ediciones en este.
Deja una respuesta