Saltar al contenido

Crear tema Hijo en WordPress

Hola, soy Pedro de STAMINA Marketing y hoy vamos a hablar sobre los temas hijos o “child themes“, veremos sus ventajas o inconvenientes, y una rápida guía de cómo crear un tema hijo.

Introducción

Creamos una carpeta en /wp-content/themes/. Podemos elegir el nombre que queramos, pero si usamos alguno siguiendo alguna lógica nos facilitará el trabajo.

Dentro de la carpeta creada generamos la hoja de estilos, o sea, un fichero style.css.
Puedes copiar la cabecera de la hoja de estilos del tema padre. Esto podría ser una estructura básica:


/*
Theme Name: MiTema Child
Theme URI: http://staminamarketing.com
Version: 4.0
Description: Tema hijo del tema padre Ejemplo
Author: Prueba
Author URI: http://staminamarketing.com
Template: MiTema
*/

@import url(«../MiTema/style.css»);

/*—————– Empieza a añadir cambios aquí abajo ——————————-*/

Ahora os voy a explicar las líneas del código anterior:

  • Theme name: el nombre de tu tema hijo, debe ser diferente al tema padre
  • Template: Nombre de la carpeta del tema padre.
  • @import url(xxxx): Haciendo uso de la estructura del ejemplo, se le indica al tema hijo de donde heredar la hoja de estilos original.

Una vez activéis el tema hijo, ya sería posible personalizarlo para conseguir el mismo diseño del tema padre, pero con las modificaciones que deseemos para el tema hijo.

Una vez activado el tema hijo, este código lo único que hace es importar los archivos (Template: MiTema) y la hoja de estilos (@import url(«../MiTema/style.css»);) del tema padre.

Añadir Estilos

En este momento nuestro tema hijo hereda los estilos CSS de la hoja de estilos original, a no ser que hayamos añadido algún estilo personalizado, en cuyo caso tomará primero los del tema hijo.

Si editamos el CSS del tema hijo podríamos tener algo así…

/*
Theme Name: MiTema Child
Theme URI: http://staminamarketing.com
Version: 4.0
Description: Tema hijo del tema padre Ejemplo
Author: Prueba
Author URI: http://staminamarketing.com
Template: MiTema
*/

@import url(«../MiTema/style.css»);

/*—————– Inicio de nuestro codigo CSS ——————————-*/

a { text-decoration: underline; color: #999; }
a:hover { text-decoration: none; }

Añadiendo plantillas

Ahora ya podemos editar los ficheros de nuestro tema o incluso añadir nuevos.

Si quisiéramos personalizar el pié de página, podemos copiar el fichero footer.php original del tema padre dentro de la carpeta de nuestro tema hijo, y una vez hecho estos, realizar las modificaciones en el tema hijo.

* Importante: se debe seguir la estructura de carpetas del tema padre. Si por ejemplo, el fichero header.php del tema padre está en /tema-padre/templates/header.php, en el tema hijo debe estar en la misma estructura /tema-hijo/templates/header.php.

Funciones

Cuando un child theme está activo wordpress funciona de la siguiente forma:

  1. Se revisa el tema activo (child theme) y se cargan los archivos del tema padre (Template: MiTema)
  2. WordPress a continuación carga la hoja de estilos importada (@import url(«../MyProduct/style.css»);)
    Carga primero las modificaciones en la hoja de estilos del tema hijo y ficheros modificados en el tema hijo, y completa lo que le falta con la hoja de estilos y archivos originales del archivo padre, en ese orden.
  3. Carga el archivo functions.php del tema hijo y posteriormente se carga el fichero de funciones del tema padre.
  4. WordPress prioriza el archivo functions.php del tema hijo sobre el del tema padre. No lo sobreescribe sino que solo se tiene en cuenta las modificaciones del tema hijo.

O sea, no tienes que copiar entero el fichero functions.php del tema padre.
Tan solo crear uno vacío e insertar las funciones específicas que no querais perder con las actualizaciones del tema padre.

Un ejemplo muy típico sería añadir un favicon.



// Favicon
function my_favicon_link() {
echo '' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

Ventajas de un child theme

  1. Se hereda el código del tema padre, lo cual es más rápido pues ahorramos escribir todo desde cero.
  2. Las actualizaciones del tema padre no afectan al child theme.
  3. Es mejor modificar un tema ya creado, y que se está actualizando con regularidad, que fabricar uno desde cero. Haciendo uso de un tema hijo tan solo hay que revisar las modificaciones.

Desventajas de un child theme

  1. Como un child theme realiza llamadas al tema padre, puede ralentizar las web y verse afectado su rendimiento.
  2. Un buen tema hijo requiere un desarrollador que controle todos los archivos implicados y sus dependencias.
  3. Los frameworks que tienen como requisito la configuración de un child theme pueden complicar tanto su integración como el rendimiento de la web, debido a que tendremos que documentarnos sobre el propio framework antes de crear el tema hijo.

Si os ha parecido interesante o te ha sido de utilidad, ¿de que otra cuestion sobre wordpress podemos hablar? Encantados como siempre!!

¡Comparte y ayuda!