Crear un tema hijo

Módulo 5: Temas y plugins · Tiempo de lectura: 9 minutos

Objetivo de aprendizaje: Después de esta lección sabrá crear un tema hijo y en qué casos lo necesita y en cuáles no.

Conceptos clave: tema hijo, tema padre, Template: en style.css, functions.php, wp_enqueue_style, sobrescribir una plantilla, theme.json en un hijo, Create Block Theme

El problema que resuelve un tema hijo

Imagine que quiere modificar ligeramente la cabecera de su tema clásico y, para ello, edita header.php en la carpeta del tema. Funciona. Tres semanas después llega una actualización del tema, que deja que se instale automáticamente (como debe ser, lección 7.2). La actualización sustituye todos los archivos del tema y su modificación desaparece.

Un tema hijo es un tema pequeño que indica: "usa todo de ese otro tema (el tema padre), excepto lo que yo tenga propio". Sus modificaciones las coloca en el tema hijo. El tema padre lo sigue actualizando con normalidad, y sus modificaciones se mantienen.

Cuándo sí y cuándo no

Necesita un tema hijo si quiere modificar o ampliar archivos de un tema:

• quiere cambiar una plantilla (en un tema clásico, un archivo PHP; en un tema de bloques, una plantilla HTML);
• quiere su propio CSS, demasiado extenso para el cuadro de CSS;
• quiere su propio código PHP relacionado con el diseño (un formato de imagen adicional, una ubicación de menú adicional).

No necesita un tema hijo si:

• modifica un tema de bloques en el Editor del sitio: esas modificaciones se guardan en la base de datos y sobreviven a una actualización (lección 5.1);
• solo añade algo de CSS mediante CSS adicional (en el Personalizador en un tema clásico, o en Estilos en el Editor del sitio);
• quiere añadir una función que no tiene nada que ver con el diseño (un formulario, una integración). Eso pertenece a un plugin, para que sobreviva a un cambio de tema.

Un tema hijo para un tema clásico

Un tema hijo es una carpeta dentro de wp-content/themes/ con al menos un archivo: style.css. Suponga que su tema padre está en wp-content/themes/hoofdthema/. Entonces cree una carpeta wp-content/themes/hoofdthema-child/ con este style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Personalizaciones propias para example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Su propio CSS va a continuación. */
.site-header { border-bottom: 3px solid #e8a33d; }

La línea más importante es Template:. Ahí va el nombre de la carpeta del tema padre (no el nombre que ve en la administración). Si no coincide exactamente (mayúsculas, guiones), WordPress indicará en Apariencia > Temas que falta el tema padre.

Además, cree un functions.php para cargar las hojas de estilo. La forma correcta:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Si el tema padre carga su propia hoja de estilo, varía según el tema. Consulte la documentación de su tema padre; algunos piden también cargar en el hijo la hoja de estilo del padre con get_template_directory_uri() . '/style.css'. Si su sitio se queda sin estilos tras activar el tema hijo, es que la hoja de estilo del padre no se está cargando.

Si quiere modificar una plantilla, copie ese archivo concreto (por ejemplo, header.php) del padre a su hijo y modifique la copia. WordPress busca primero en el hijo y después en el padre. No copie todos los archivos: entonces dejará de recibir las mejoras del padre.

El functions.php del hijo no sustituye al del padre, sino que se carga antes. Ambos se ejecutan.

Un tema hijo para un tema de bloques

En un tema de bloques funciona igual, con archivos de bloques:

• style.css con la misma cabecera y Template:;
• opcionalmente, un theme.json propio: este se combina con el del padre, así que solo incluye lo que quiere cambiar (por ejemplo, la paleta de colores);
• opcionalmente, plantillas en templates/ y parts/ que sustituyen a las del padre.

En un tema de bloques, a menudo no hace falta un functions.php, porque WordPress carga los estilos de theme.json por sí mismo.

Existe un plugin oficial, Create Block Theme, que crea un tema hijo desde el Editor del sitio, incluyendo sus modificaciones guardadas en la base de datos. Resulta útil si ha modificado un tema de bloques y quiere dejar esas modificaciones registradas en archivos (por ejemplo, para llevarlas a otro sitio).

Así lo configura en su sitio

1. Cree la carpeta y los archivos en su propio ordenador y compruebe la carpeta del tema padre.
2. Suba la carpeta a wp-content/themes/ con el Administrador de archivos o por SFTP. O bien comprima la carpeta en un zip y súbala en Apariencia > Temas > Añadir > Subir tema.
3. Vaya a Apariencia > Temas. Su tema hijo aparecerá en la lista. Actívelo.
4. Compruebe su sitio: los menús y los widgets pueden necesitar volver a vincularse al cambiar a un tema hijo; los ajustes del Personalizador son específicos de cada tema, así que tendrá que configurarlos de nuevo o exportarlos con un plugin.
5. El tema padre debe permanecer instalado. No lo elimine; el hijo no funciona sin él.

Hágalo preferiblemente primero en un entorno de pruebas (staging) (lección 8.3), ya que cambiar de tema en un sitio en producción con mucho tráfico puede causar algo de desorden temporal.

Resumen

• Un tema hijo conserva sus modificaciones de los archivos del tema fuera del tema padre, de modo que las actualizaciones no las sobrescriben.
• No lo necesita para modificaciones en el Editor del sitio o para un poco de CSS adicional; las funciones van en un plugin.
• Lo mínimo: una carpeta con style.css en la que Template: indique exactamente la carpeta del tema padre.
• Copie solo las plantillas que realmente modifica; el functions.php del hijo se suma al del padre.
• El tema padre permanece instalado y se sigue actualizando.

Cuestionario

Ejercicio

Ejercicio A5.2: Comprobar su tema hijo. Cree un tema hijo para su tema, en su sitio de pruebas o en el entorno de pruebas (staging) (lección 8.3), y actívelo. Introduzca la dirección del sitio y el nombre de la carpeta del tema hijo. El programa solicitará wp-content/themes/<carpeta>/style.css y comprobará: que el archivo existe, que contiene un Theme Name: y un Template:, que el style.css del padre también existe en esa carpeta, y que la página de inicio hace referencia al tema hijo (es decir, que está activo).

Ejercicio D5.2: ¿Qué ha modificado y por qué? Anote qué archivos tiene su tema hijo, qué ha modificado en cada archivo y por qué no podía hacerse desde el Editor del sitio, en CSS adicional o en un plugin. Marque también que el tema padre sigue instalado y tiene activadas las actualizaciones automáticas.

Para saber más

Estos artículos describen los pasos en los paneles de WebOké; en otros paneles el funcionamiento es similar.

• Manual de DirectAdmin 11.1: Abrir el Administrador de archivos: las carpetas de su paquete
• Manual de DirectAdmin 11.2: Subir y descargar archivos
• Manual de DirectAdmin 11.7: Conectar con FileZilla (FTP, FTPS y SFTP)
• Child themes (developer.wordpress.org, en inglés): https://developer.wordpress.org/themes/advanced-topics/child-themes/