Vamos a ver cómo crear un Divi Child Theme de WordPress para nuestra plantilla Divi. Este tutorial también te servirá para cualquier otra plantilla de la quieras crear una plantilla hija.
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?
La Guía más completa para usar Divi Theme Builder
Cómo configurar Yoast SEO en WordPress
Cómo eliminar un rol de WordPress
Qué plugins y themes usa una web hecha con WordPress
Tabla de contenidos
- 1 ¿Qué es un divi child theme o tema hijo?
- 2 ¿Cómo crear nuestro divi child theme personalizado?
- 3 ¿Cómo empaquetar nuestro Divi Child Theme WordPress?
- 4 Personalizar nuestra plantilla hija WordPress
- 5 ¿El child theme no requiere actualizaciones?
- 6 Optimizar la carga de la plantilla padre
- 7 Ventajas de usar child theme WordPress
- 8 Descarga tu Divi Child Theme de WordPress
- 9 ¡Descarga Divi Child Theme!
- 10 Divi Child Themes para descargar Gratuitos
¿Qué es un divi child theme o tema hijo?
Un divi 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 divi 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: ¿qué es Divi? La plantilla más fácil de usar de WordPress
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 nuestro Divi Child Theme 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.
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.
¿El child theme no requiere actualizaciones?
Algunos os haréis esa pregunta y es muy normal. ¿Es necesario realizar mantenimiento a los Child Themes? Pues la respuesta es sí. Hay que revisar los cambios que hayamos sobrescrito en nuestra plantilla hija para ver si se han visto modificados en la plantilla padre. Y trasladarlos al child theme 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.
Descarga tu Divi Child Theme de WordPress
Si no te gusta tener que estar editando ficheros y hacértelo tu mismo, te dejo aquí el enlace para que lo descargues y solo tengas que instalarlo. Solo tienes que suscribirte a mi blog te dejaré el enlace descarga.
Divi Child Themes para descargar Gratuitos
Puedes encontrar y descargar de forma gratuita algunos Divi Child Theme en el MarketPlace de Divi.
Ahí encontrarás Divi Child Themes para Divi gratuitos y de pago. Y se integra la compra con tu licencia de Divi.
En el marketplace encontrarás multitud de diseños para que se adapten a tus necesidades, y que después podrás adaptarlos a lo que necesites.
¿Ves útil el uso de plantillas hijas? ¿Utilizas ya un child theme? Cuéntame tu experiencia...
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
Muy buen artículo. Voy a aportar mi granito de arena.
Para cargar la css comentas que si lo haces en el function es más rápido. Pero un novato puede no tener claro de que forma añadir lo que explicas.
Así que en 2 sencillos pasos lo explico:
1. Style.css debe estar vacío salvo las personalizaciones css.
2. en el function.php al principio del todo escribe:
function theme_name_parent_styles() {
$parent = get_template();
$parent = wp_get_theme($parent);
wp_enqueue_style('theme-name-parent-style', get_template_directory_uri() . '/style.css', array(), $parent['Version'], 'all');
}
add_action('wp_enqueue_scripts', 'theme_name_parent_styles');
Y ya te cargará la css del padre, sea cual sea tu tema. No toques ni una coma de lo que he puesto.
Muchas gracias Alberto por el aporte. Realmente con solo una línea como he puesto en el artículo valdría y funciona. Con tu solución lo que he visto interesante es que has creado un action del tipo wp_enqueue_scripts y puede que sirva para optimizar aún más el WPO de la web. Me lo anoto para probarlo y ver si hay diferencias de rendimiento ;). Saludos!
Buenas... muy buen articulo....
Una pregunta... en este tema hijo ya viene la configuracion de cambio automatizado de idioma... de acuerdo al ajuste wordpress? Lo que sucede es que no lo puedo hacer cambiar de idioma automaticamente y traducirlo palabra por palabra toma mucho tiempo...
Muchas gracias . En este child theme no hay ninguna página de diseño creada que sobreescriba a la del tema original. Es un child theme en blanco preparado para que tu puedas sobreescribir lo que necesites. Por lo que no hay ninguna relación con el idioma de tu wordpress. Si tienes problemas con el idioma de tu WordPress, revisa la instalación. A lo mejor no se instaló bien. Un saludo.