Sé el primero en comentar
Has empezado a toquetear el CSS de tu tema, has modificado algunos estilos de tu sitio web y sientes que estás hecho todo un hacker.
Entonces llega una actualización de WordPress y ¡Boom! Todos los cambios que has realizado se han ido a tomar… (viento).
Y todo por no tener un tema hijo instalado en tu WordPress.
Pues bien, para que no te vuelva a pasar, necesitas crear un tema hijo en tu WordPress, que es precisamente lo que veremos en este post.
Y aunque ya vimos en el anterior artículo qué es un tema hijo y para qué sirve, haremos una pequeña introducción (muy cortita). Ya sabes, la típica intro antes de entrar en materia.
¿Qué es un tema hijo WordPress?
Un tema hijo es un tema que hereda la funcionalidad y el diseño de otro tema, llamado tema padre o parent theme. Los child themes son útiles porque nos permite modificar el aspecto de nuestra web utilizando un tema existente como base, sin tener que modificar el código del tema original.
Esto hace que sea más fácil mantener actualizado el tema, ya que todas las personalizaciones se hacen en el child theme y no en el tema original.
Por lo general, un tema hijo tendrá un archivo style.css que será donde se hagan todas las personalizaciones de diseño. El tema hijo también puede incluir otros archivos, como PHP y JS, que se utilizarán para modificar la funcionalidad del tema parent.
Al crear un tema hijo, es importante asegurarse de que está correctamente configurado para que pueda acceder a todos los archivos y recursos necesarios del tema parent. De lo contrario, el tema hijo no funcionará correctamente.
¿Qué es un tema padre en WordPress?
Un tema padre en WordPress es un tema principal que puede ser personalizado mediante la creación de un tema hijo. El tema padre define la estructura del sitio web y contiene todo el código esencial para que se vea correctamente. Por ejemplo, un parent theme alberga todas las funciones necesarias en el archivo funtions.php.
¿Por qué crear un tema hijo y qué función cumple?
Los temas padre son temas que se han creado para ser utilizados como base. Al crear un thema hijo, puedes modificar el tema padre sin tocar el código fuente. De esta forma, si algo sale mal o en otras palabras, si tu WordPress te explota, puedes deshacer los cambios sin mucha dificultad.
Además, una de las funciones más importantes que cumple un child theme es la de guardar las modificaciones que hemos hecho y evitar que en cualquier actualización se pierdan.
Si realizas cambios en el código de un tema padre, por ejemplo, si quieres modificar el CSS, es posible que se pierdan en alguna actualización de la plantilla.
También puedes ver el artículo sobre cómo agregar el CSS correctamente en WordPress. Algo realmente útil para diseñadores y maquetadores web.
Crear un tema hijo de forma manual (desde cero)
Para crear un tema hijo de forma manual y desde cero, tan solo deberemos crear los archivos necesarios para ello. Es algo realmente fácil de hacer, pero hay que seguir unos pasos, que por cierto, siempre son los mismos.
Si te da un poco de pereza leer, te dejo por aquí el vídeo donde explico como crear un tema hijo de forma manual.
Crear carpeta tema hijo
Primero crearemos la carpeta de nuestro child theme o tema hijo dentro de la carpeta themes (en nuestra instalación de WordPress).
Puedes ponerle el nombre que quieras. Recuerda que el nombre que elijas será el que aparezca en el tema.
Crear functions.php
El primer archivo que vamos a crear dentro de la carpeta del child theme será el archivo functions.php.
Una vez creado el functions.php del tema, abriremos el archivo y crearemos una pequeña función de WordPress para llamar a los estilos.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get('Version') // No hace falta que pongas la versión si no quieres.
);
}El archivo functions.php es necesario para crear cualquier tema (padre o hijo).
Crear style.css
Cuando tengamos creado el archivo functions.php con la función de “llamada” (wp_enqueue_style()) de nuestros estilos, ya solo quedará crear el archivo style.css de nuestro tema hijo.
Recuerda crear el archivo con el mismo nombre y la misma terminación: style.css
Una vez creado el archivo style.css lo abriremos y escribiremos las siguientes líneas de código necesarias. Solo hace falta rellenar dos campos, el Theme Name y el de Template.
/*
Theme Name: /* Aquí pondremos el nombre de nuestro Child Theme */
Theme URI:
Description:
Author:
Author URI:
Template: /* Aquí pondremos el nombre del tema padre (mismo nombre que archivo/carpeta del theme) */
Version:
License:
License URI:
Tags:
Text Domain:
*/
// Aquí empezaría el código CSS…Este archivo es el que utilizaremos para modificar los estilos y realizar todos los cambios CSS.
Puedes encontrar más información en la página oficial de WordPress: https://developer.wordpress.org/themes/advanced-topics/child-themes/
Crear miniatura
Por último, también podemos personalizar la imagen de nuestro theme. Por si quieres que aparezca la imagen de la plantilla en el administrador de WordPress.
Lo único que has de hacer es colocar una imagen con el nombre de screenshot en formato PNG, dentro de la carpeta del tema hijo (donde está el functions.php y la hoja de estilos style.css).
Para que funcione tu tema hijo este paso no es obligatorio.
Crear tema hijo con un plugin de WordPress
Si no quieres complicarte la vida (aunque ya has visto que es muy fácil) y quieres instalar un tema hijo mediante un plugin, puedes hacerlo de la siguiente manera.
Por si te da un poco de palo leer, te dejo por aquí un vídeo donde explico como crear un tema hijo con la ayuda de un plugin.
Para instalar un child theme con un plugin simplemente deberás ir al menú de WordPress, ir al opción de Plugins > Añadir nuevo.
Una vez estés en el repositorio de plugins, utiliza el buscador para encontrar el plugin de Child Theme Configurator.
Este es uno de los plugins más usados (con diferencia) para crear child themes en WordPress. Podría nombrar otros plugin más nuevos o más trendy para dar un poco de exclusividad a este post. Pero el plugin de Child Theme Configurator es con diferencia el más usado para esta función.
Modificar css de un tema hijo en WordPress
Por último, es posible que te preguntes cómo modificar el CSS de tu tema hijo (de forma correcta). Y de hecho hay varias maneras de hacerlo y a continuación te voy a explicar la forma más difícil de hacerlo. Es broma poma. Vamos a ver una de las maneras más sencillas de modificar o editar el CSS de tu child theme.
Primero nos iremos al menú de WordPress y seleccionaremos la opción de Apariencia > Editor de Temas.
Una vez dentro del editor de temas nos aseguraremos que tenemos seleccionado el child theme. Puedes verificarlo en la parte superior derecha de la pantalla.
Después buscaremos y seleccionaremos el archivo style.css en los archivos del tema, justo a la derecha.
Una vez tengamos seleccionado el archivo css del tema hijo ya podrás modificar/agregar todo el código CSS que quieras.
Recomiendo esta opción para hacer modificaciones puntuales. Para trabajar con CSS lo mejor es usar un editor de texto(código) o ide(entorno de desarrollo integrado).
Y hasta aquí este tutorial, que aunque es bastante corto, ha quedado una guía bastante completa. Y si por alguna razón te has quedado con alguna duda recuerda que tienes los comentarios para preguntarme cualquier cosa (relacionada con el tema claro…)
¡Nos vemos!