Los Temas Hijo son una característica de WordPress que puedes usar cuando quieres modificar un tema que usas y no quieres perder cambios cuando se actualiza este tema padre, ya que las modificaciones las harás en el tema hijo. Hereda todas las funcionalidades del tema o plantilla WordPress original o padre.
Por otro lado, las actualizaciones y mejoras de seguridad que reciba el tema padre se aplican automáticamente a tu sitio web, por lo que no dejas el tema vulnerable por no poder aplicar actualizaciones de seguridad en WordPress, por realizar cambios directamente al tema padre, algo que nunca deberías hacer.
Cuando usas un tema hijo en tu web puedes aplicar cambios de manera más sencilla y organizada, y tienes un control total sobre las personalizaciones aplicadas. Adicional-mente, puedes optimizar la web para mejorar su rendimiento y velocidad de carga.
Piensa en ello como una superposición. Cuando un visitante carga tu sitio web, WordPress primero carga el subtema y luego llena los estilos y funciones que faltan utilizando partes del tema maestro.
Como resultado, obtienes lo mejor de tu diseño personalizado sin sacrificar la funcionalidad principal del tema.
Creando la estructura
Antes de empezar a crear un tema hijo, ten en cuenta que es esencial tener conocimientos básicos de HTML, CSS y PHP, ya que el proceso implica algo de codificación. Con los numerosos temas padre disponibles, también es importante elegir uno que se adapte a tus necesidades.
Crea una carpeta nueva en la ruta: wp-content/themes/
Te recomiendo que le pongas el mismo nombre que el tema padre añadiendo al final: «-child».
En esta carpeta crea los archivos:
- style.css
- functions.php
Son los archibos minimos para crear correctamente un tema hijo.
Contenido del archivo style.css
Coloca la siguiente metadata:
/* Theme Name: Nombre Tema Child Theme URI: http://web.com/nombre-tema-child/ Description: Tema Hijo para realizar modificaciones Author: Yo Author URI: http://web.com Template: NombreTema Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: nombre-tema-child */
En el código anterior:
- Theme Name: nombre del tema hijo
- Theme URI: opcional, la url de la documentación y demo del tema hijo.
- Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
- Template: este parámetro te indica el nombre de la carpeta del tema padre.
- Version: versión del tema hijo, importante para el control de cambios.
- License, License URI: si se quieres hacer alguna variación a la licencia.
- Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
- Text-Domain: si tus cambios implican agregar texto traducible.
Ten en cuenta que lo que tenga este archivo sobreescribe lo que esta en el archivo style.css del tema padre.
Contenido del archivo functions.php
Una vez que has creado el archivo style.css, lo que se recomienda es usar el archivo functions.php y a través de código cargar el archivo style.css del theme padre y, en caso se hagas modificaciones CSS en el tema hijo, cargar también el style.css del tema hijo.
El código para cargar los estilos es similar a:
<?php
function enqueue_styles_child_theme() {
$parent_style = 'nombretema-style';
$child_style = 'nombretema-child-style';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child_style,
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' );
En el código anterior:
- La función:
enqueue_styles_child_theme, es llamada en la acción:wp_enqueue_scripts - Definimos dos variables, que serán los IDs de los estilos a cargar.
- El ID del padre ya existe por lo que tenemos que buscarlo en el archivo functions.php del theme padre.
- El ID del theme hijo puede ser cualquier texto, aunque se recomienda igualmente que tenga un nombre similar al theme padre.
- Colocamos en cola el estilo del tema padre a través de la función
wp_enqueue_style. - Colocamos en cola el estilo del tema hijo, igualmente usando la función
wp_enqueue_style. - En la carga del style.css del tema hijo usamos el tercer parámetro para indicar dependencia.
- También usamos el cuarto parámetro para usar la versión que se ha definido en el archivo style.css del tema hijo.
Al usar el parámetro de versión en la carga del archivo CSS nos permitirá refrescar los estilos CSS almacenados en el navegador del usuario.
Ten en cuenta que a diferencia del comportamiento de style.css, lo que coloques en este archivo se añade al functions.php del tema padre
Sobreescribiendo archivos
En el tema hijo puedes sobrescribir cualquier otro archivo del tema padre, siempre que mantengan el mismo nombre y se encuentren en la misma ruta.
Creando nuevos archivos
Siguiendo la jerarquía de archivos, es posible crear nuevos archivos que no están incluidos en el tema padre.
El siguiente gráfico ha sido sacado de wphierarchy.com, y como verás muestra todas los nombres de archivos que pueden intervenir en la jerarquía de un tema de WordPress.
Cómo personalizar tu tema hijo
Hay algunos métodos para personalizar tu tema hijo. Se puede cambiar el diseño de la página añadiendo archivos de plantilla a la carpeta del tema hijo. También es posible cambiar el estilo del tema hijo añadiendo código CSS personalizado.
Los temas hijos también pueden tener nuevas funcionalidades que anulen su tema padre.
Ahora, veamos los aspectos básicos de la personalización de un tema hijo. Para ello, ve a Apariencia -> Temas y haz clic en Personalizar en tu tema hijo activo. Cuando se abra el Editor de Temas, selecciona CSS adicional.