Todos los temas actuales de WordPress, nos ofrecen una sección para personalizar la CSS del tema para que estas modificaciones no sean eliminadas al actualizar tema. En la mayoría de las ocasiones con esta opción será suficiente para poder tener el tema de WordPress a nuestro gusto. Pero puede ser que además de la CSS, necesitemos añadir, quitar o mover algún elemento HTML en los ficheros de WordPress. Si modificamos código de los ficheros de WordPress , al actualizar el tema, todas estas modificaciones serán ELIMINADAS¡. Para evitar esto es necesario crear un tema hijo o “child theme”. NO todos los temas de WordPress lo permiten, pero aquí os dejo documentado como intentar hacerlo.
Tabla de contenidos
Crear la carpeta para el child theme
Lo primero que debemos hacer, para realizar un tema hijo o “child theme” es crear una carpeta, en /wp-content/themes. Podemos ponerle el nombre que queramos, pero siempre es mejor poner algo descriptivo, por ejemplo: nombretema-hijo.
Crear el fichero style.css
Ahora, dentro de esa carpeta, crearemos la hoja de estilos, “style.css”, que es la que une el tema padre e hijo. En este nuevo fichero copiaremos la cabecera de la hoja de estilos del tema padre, y dejaremos estas líneas:
/* Theme Name: gastefilo
Theme URI: https://raulperez.tieneblog.net
Author: Raúl Pérez
Author URI: https://raulperez.tieneblog.net
Description: tema hijo para gastefilo by Raúl Pérez
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template:spacious
*/
@import url("../tema-padre/style.css");
/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/
Vamos a desglosar, que es cada línea de esta cabecera en la CSS y su importancia
Theme Name: se pone un nombre al tema hijo que estamos creando, podemos improvisar, es obligatorio.
Theme URI: se pone la URL del sitio del creador del child theme, no es obligatorio
Author: nombre del autor del child theme, no es obligatorio.
Author URI: URL del sitio web del creador del child theme, no es obligatorio.
Description: descripción del tema hijo, no es obligatorio.
License: tipo de licencia del tema, no es obligatorio.
License URI: URL del sitio de la licencia, no es obligatorio.
Template: aquí debemos poner el nombre del directorio que contiene el tema padre, obligatoriamente.
@import url(): entre los paréntesis debemos poner la URL, de la css principal, del tema padre, es totalmente obligatorio.
Activar el child theme
Una vez correctamente editada esta información, sólo nos queda activar este tema hijo, en la sección de Apariencia->Temas. Ahora podemos hacer modificaciones en esta hoja de estilos, sin temer que se pierdan al actualizar.
Modificar el child theme
Ahora podemos modificar los estilos usando el fichero style.ccs del child theme en vez de usar la herramienta de “Personalizar CSS” que nos ofrece WordPress. Además si aparte de realizar modificaciones en la hoja de estilos, necesitamos modificar código en cualquier fichero, utilizaremos también el tema hijo, para que las actualizaciones no nos hagan perder estos cambios.
Para ello:
Si por ejemplo, necesitaríamos modificar el footer.php, lo copiaríamos dentro de la carpeta del tema hijo, y lo modificaríamos a nuestro gusto.