[WordPress] ¿Qué es un tema hijo (child theme) y cómo crear uno?

[titulo][WordPress] ¿Cada vez que editas un tema o plugin tienes que cancelar las actualizaciones para no perder los cambios? ¡La solución![/titulo]

WordPress es un CMS muy potente y flexible, que gracias a sus miles de plugins y temas puede adaptarse fácilmente a prácticamente cualquier necesidad.

Sin embargo, en su flexibilidad radica su debilidad: Cada plugin y tema es mantenido y actualizado por un equipo de desarrolladores diferentes, que lanzan actualizaciones independientes cuando lo creen conveniente.

Esto provoca que, [subraya_rosa]cualquier cambio que hayamos realizado, ya sea en el propio núcleo de WordPress o en cualquiera de sus componentes, se perderá con esas actualizaciones.[/subraya_rosa]

¿Cómo evitarlo? ¡Con los temas hijos o child themes!

En esta mini guía de Loopeando.com os explicaremos cómo funcionan y cómo crear el tuyo propio.

Como acostumbramos a decir: Pasa, disfruta, aprende y comparte.

 

[resumen]

1. ¿Cómo funciona un child theme?
2. Creando el nuestro: Paso a paso

[/resumen]

 

[titulo]¿Cómo funciona un Child Theme?[/titulo]

Un Child Theme es un tema que se activa como tema por defecto, pero cuyos archivos son en realidad, modificaciones de algunos de los archivos del tema principal.

[subraya_verde]Un Child Theme no tiene porqué ser un tema completo[/subraya_verde] y, de  hecho, habitualmente no lo es. [subraya_verde]Son únicamente algunos archivos editados del tema principal.[/subraya_verde]

Cuando WordPress ejecuta el Child Theme, lo que éste hace es decirle al CMS: Aquí tengo las versiones prioritarias de estos archivos, que son las que debes usar. El resto de archivos que necesites, has de cogerlos del Tema Padre o Tema Original.

Por ejemplo: Si yo creo un Tema Hijo compuesto por los archivos [codigo]style.css[/codigo] y [codigo]functions.php[/codigo], [subraya_verde]WordPress cogerá todos los archivos del Tema Padre excepto los que ya existan en el Tema Hijo.[/subraya_verde]

Así pues, si en el Tema Hijo hay un functions.php, el del Tema Padre será ignorado.

 

Como habrás imaginado, [subraya_rosa]esto es extremadamente útil, pues aunque se actualice el Tema Padre, el Tema Hijo seguirá añadiendo las modificaciones que hemos realizado.[/subraya_rosa]

 

[titulo]Creando el nuestro: Paso a paso[/titulo]

1º Debemos tener acceso FTP a nuestra web e ir a la ruta [codigo]/wp-content/themes/[/codigo].

2º Localizaremos la carpeta del tema que vayamos a usar como tema padre, y procuraremos recordar su nombre exacto, ya que vamos a necesitarla posteriormente.

3º En esa misma ruta («wp-content/themes») creamos una carpeta nueva con un nombre que nos deje claro que es el tema hijo de un tema concreto. Por ejemplo: Si el tema padre se llama «Recipe», a la capeta que creemos le podemos poner «Recipe-hijo»:

4º Dentro de la carpeta que acabamos de crear, creamos un archivo llamado [codigo]style.css[/codigo] cuyo contenido sea:

/*
Theme Name: Recetas-hijo
Author: S0ho
Theme URI: http://themeforest.net/user/DJMiMi
Author URI: http://themeforest.net/user/DJMiMi
Template: recipe
License: GPL 2.0
License URI: license.txt
Description:  The Most Complete WordPress Theme For Recipes
Version: 5.2
Tags: light
*/

@import url("../recipe/style.css");

/*Aquí nuestros estilos personalizados */

Las líneas importantes son:

• Theme Name: Será el nombre con el que identificarás al tema dentro del Administrador de WordPress.
• Template: El nombre exacto del tema padre
• @import url: Debemos poner la ruta donde se encuentre el archivo style.css del tema padre. Por defecto, su directorio raíz.

Tras esa última línea podremos empezar a añadir nuestros estilos CSS personalizados.

Lo que hemos hecho con esto, es que nuestro tema hijo cargue todos los estilos del tema padre, y añada además, dándoles prioridad, los que vayamos a ir añadiendo después. Así pues, si añadimos en esa hoja de estilo una clase que ya exista en el tema padre, tendrán prioridad las del hijo.

 

Y hasta aquí lo esencial, aunque lo habitual es copiar el archivo [codigo]functions.php[/codigo] del tema padre, y pegarlo en la carpeta del tema hijo. ¿Por qué? Porque ese es el otro archivo que modificamos más habitualmente.

De la misma manera, cada archivo que vayamos a modificar del tema padre, lo que tendremos que hacer, es copiarlo al tema hijo y modificar esa copia.

 

5º Ahora sólo queda activar el tema hijo: Nos logueamos en el admin, y vamos a Apaciencia -> Temas y lo activamos.

 

¿Te ha resultado útil esta entrada? ¡Compártela! Y si tienes cualquier duda, no olvides utilizar los comentarios