Cómo crear un tema hijo en WordPress o un Child Theme WordPress es uno de los aspectos principales que se deben tener en cuenta antes de comenzar con el diseño web WordPress.

Antes de enfrentarnos a cualquier proyecto de diseño web debemos definir la estructura de la web (el contenido) y el diseño que queremos que tenga.

En cuanto al contenido hay que definir cómo se va a organizar la información que deseamos mostrar. Hay que definir los servicios que ofrecemos, la página de contacto, la página de quiénes somos, etc. En resumen, las páginas de nuestra empresa. También es importante que incluyamos un blog en nuestra web. Todos los artículos que redactemos darán consistencia a los servicios que ofrecemos, y nos servirán de gancho para conseguir clientes.

Como podéis ver, a la hora de crear un tema hijo es necesario conocer la estructura de nuestra web para saber cómo vamos a mostrar esa información. El diseño deberá ajustarse a cada caso.

También te puede interesar:

¿Qué es Divi?
→ Cómo configurar Yoast SEO en WordPress
→ Cómo eliminar un rol de WordPress
→ Qué plugins y themes usa una web echa con WordPress

¿Qué es un child theme o tema hijo?

Un child theme o tema hijo WordPress no es más una plantilla hija WordPress de otra que hemos seleccionado para el aspecto de nuestra web.

Cuando seleccionamos una plantilla web WordPress para nuestra web tenemos que fijarnos en varias cosas, no solo en su aspecto. Entre las más importantes que debemos tener en cuenta para que una plantilla wordpress cubra nuestras necesidades son:

  • Soporte
  • Mantenibilidad
  • Diseño responsive
  • Velocidad de carga

Esas son algunas de las cualidades WPO que considero que debe tener nuestro theme wordpress para que la web tenga unos niveles mínimos de calidad en cuanto a rendimiento y mantenibilidad.

WPO: son las siglas de Web Performance Optimization

Y volviendo a la pregunta de qué es una plantilla hija, no deja de ser una plantilla que hacemos que sea nuestra plantilla principal de nuestro sitio WordPress pero que herede las cualidades y características de la plantilla padre. De esa manera, si la plantilla padre recibe actualizaciones, nuestra plantilla hija no se verá afectada y por tanto nuestra web no correrá peligro de perder nuestras personalizaciones de diseño.

Es decir, el objetivo de un child theme es poder personalizar su diseño sin que tengamos cambiar la plantilla padre. Sería como una copia de seguridad de nuestro diseño web personalizado del que solo nosotros podremos tocar. Y así de esta manera, si WordPress detecta un error o un bug en su código, la plantilla padre puede recibir las actualizaciones para solventar esos problemas y nuestra plantilla hija no se vería afectada. Por lo que no peligraría nuestro diseño.

¿Cómo crear nuestro child theme personalizado?

Como sabéis, me encanta Divi como plantilla web WordPress por excelencia. Por eso, os voy a explicar cómo hacer un Divi Child Theme para aquellos que tenéis Divi, pero este mismo tutorial para crear una plantilla hija WordPress os sirve perfectamente para cualquier plantilla padre, sea Divi o no.

Para los que no conocéis Divi os recomiendo la lectura de mi artículo: pantilla Divi

Crear un Child Theme es muy sencillo. En este ejemplo que os voy a mostrar lo estoy haciendo para el tema padre Divi. Aunque estos pasos os sirven perfectamente para cualquier otra plantilla.

Lo más básico es solo un archivo:

  • style.css: La hoja de estilos que contendrá los cambios que queremos modificar.

El contenido de la hoja de estilos debe ser el siguiente:

/*
Theme Name: Divi-child
Theme URI: https://www.javierrguez.com
Version: 1.0
Description: Tema hijo de Divi para hacer cambios que modifiquen el aspecto del tema padre sin que los perdamos cuando el tema padre tenga actualizaciones
Author: Javier
Author URI: https://www.javierrguez.com
Template: Divi
*/

@import url("../Divi/style.css");

/*---- A partir de aquí añadimos las modificaciones que queremos hacer sobre el tema padre -----*/

Lo principal que debemos de tener en cuenta sobre este archivo es lo siguiente:

  • Theme Name: Es el nombre que le daremos a nuestra plantilla. Podemos poner lo que queramos.
  • Template: Este debe coincidir exactamente con el nombre de la plantilla padre. Sino, nos dará un error una vez instalada diciéndonos que no encuentra la plantilla padre.
  • Import url: Aquí deberemos indicar la ruta de la hoja de estilos del tema padre para que reemplace los estilos que aquí definamos sobre los que tenga, y añadir los nuevos que necesitemos.

¿Cómo empaquetar nuestra plantilla hija WordPress?

Con esos valores definidos, copiamos nuestro fichero style.css dentro de una carpeta, la comprimimos en zip y la subimos a nuestro WordPress para instalar nuestra plantilla.

Después solo tendremos que activarla y las modificaciones que incluyamos en su hoja de estilos serán sustituidas por las del tema padre.

Divi-Child-ElegantThemes

Tema hijo y tema padre

En la imagen anterior podéis apreciar que ya tengo el tema hijo activado y que tengo una actualización pendiente de aplicar sobre el tema padre. Esto me garantizará que las modificaciones que haya realizado sobre el tema hijo no las pierda nunca.

Personalizar nuestra plantilla hija WordPress

Podemos personalizar nuestro child theme con algunas opciones, dejando constancia al menos de quién es el autor de la plantilla, la web del autor, una descripción, la versión de la plantilla, etc.

También podemos añadir otros ficheros como:

  • Screenshot: Es la imagen que representará nuestro tema hijo en la pantalla de ajustes.
  • functions.php: Tendrá las funciones que necesitemos sobre nuestro tema. Podrán ser nuevas o las del tema padre modificadas.
  • header.php: Es el fichero que construye la cabecera de nuestra web. Debería ser una copia del tema padre pero con nuestras modificaciones.
  • sidebar.php: Es el fichero que construye el menú lateral de nuestra web. Debería ser una copia del tema padre pero con nuestras modificaciones.
  • footer.php: Es el fichero que construye el pie de nuestra web. Debería ser una copia del tema padre pero con nuestras modificaciones.

Los ficheros no reemplazan el contenido del fichero padre. Es decir, no sobreescribe lo que definamos en estos ficheros nuevos, sino que reemplaza por completo lo que ahí incluyamos por lo que tenga ese fichero en el tema padre. Por ejemplo, si en el footer solo queremos modificar la firma, deberemos copiar todo el contenido del footer.php del tema padre sobre el fichero footer.php del tema hijo y sobre este último realizar las modificaciones oportunas.

De esta manera podemos personalizar nuestra plantilla hija WordPress de tal manera que parezca como una plantilla hecha por nosotros. Solo con la diferencia de que depende de una plantilla padre.

Con solo estas pequeñas cosas seremos capaces de crear un tema hijo sin problemas y adaptarlo a nuestras necesidades y quedarnos tranquilos de que las actualizaciones de la plantilla padre las podremos aplicar sin consecuencias.

¿La plantilla hija no requiere actualizaciones?

Algunos os haréis esa pregunta y es muy normal. ¿Es necesario realizar mantenimiento a las plantillas hijas? Pues la respuesta es sí. Hay que revisar los cambios que hayamos sobreescrito en nuestra plantilla hija para ver si se han visto modificados en la plantilla padre. Y trasladarlos a la plantilla hija si fuera necesario.

Optimizar la carga de la plantilla padre

Ahora una recomendación sobre la carga de la hoja de estilos.

Otra forma más eficiente que podéis utilizar para la carga del archivo de estilos, es realizar la llamada desde el fichero functions.php mediante el siguiente código:

wp_enqueue_style('nombre-carpeta-tema-hijo'
      , get_stylesheet_directory_uri() .'/style.css'
      , array('nombre-plantilla-padre'));

Ventajas de usar child theme WordPress

Y poco más que saber sobre el uso de las plantillas hijas. Las ventajas son enormes y no deberías encontrar problema alguno para seguir modificando los ficheros de la plantilla original y empezar a trabajar de esta manera.

Divi Child Themes para descargar

Aquí os dejo algunos recursos donde podéis descargar algunos Divi Child Theme para vuestros proyectos y ver las ventajas que ofrecen.

ElegantMarketplace

Divi Space

Divi Cake

Divi Theme Store

Divi Life

¿Ves útil el uso de plantillas hijas? ¿Utilizas ya un child theme? Cuéntame tu experiencia…

Guardar

Dime qué te ha parecido el artículo...

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 3,00 de 5)
Cargando…

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest