Introducción a los temas hijo

Publicada en WordPress.

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.

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.

Imagen destacada de Picsea en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (2 votos, promedio: 4,00 de 5)
Cargando…

Un comentario en «Introducción a los temas hijo»

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.