CMS WordPress

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

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

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, 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.

¿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 de contenidos

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

 

¿Cómo funciona un Child Theme?

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.

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

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 style.css y functions.php, WordPress cogerá todos los archivos del Tema Padre excepto los que ya existan en el Tema Hijo.

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

 

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

 

Creando el nuestro: Paso a paso

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

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 style.css 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 functions.php 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

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario