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.
Buenos días,
he seguido todas las indicaciones de este y otros blogs, pero el problema me surge al cargar el theme child ya que me desaparece el contenido de la barra lateral izquierda, la cual contiene menús, Aunque rehaga esa barra desde el apartado de widgets, no aparece. Es la primera vez que me sucede algo asi. sabe dónde podría estar el error?
Es curioso que aunque cargue el child con solo el archivo styles, ya no aparece nada.
Gracias por tu ayuda.
Es raro la verdad. Vete a Opciones del Tema Divi. A mí me aparece una opción en ajustes en la pestaña General que se llama "Diseño de la página de tienda y de la página de categorías para WooCommerce". A ver si por un casual la tienes configurada para que la página sea "ancho completo" y por eso no te muestra el sidebar. Tiene que ser algo de eso, porque si el child theme no te da errores... tiene que ser algo que te falte configurar. Un saludo.
hola esto nos sirve en caso de que hagamos modificaciones en el nivel de php no?
Porque como soy nuevo y codigo casi ni he tocado, el divi child no me serviria de mucho o estoy equivocado?.
Hasta ahora tengo modificaciones en divi en si + algunos pequeños codigos de JavaScript y CSS pero cada vez que actualizo DIVI, no modifica nada y anda todo perfecto.
Gracias
Esto es útil para modificaciones que quieras realizar tanto de PHP como de estilos CSS. Si sabes que no vas a realizar ninguna personalización no te hará falta hacerte un Child Theme. Esto es solo cuando sabes que vas a realizar personalizaciones de tu tema. Cuando dices que no pierdes las personalizaciones que has realizado, será porque las estás haciendo dentro de la pestaña de CSS de cada módulo que añades a una página. Como esa información queda almacenada en esa entrada/página, cuando actualizas el tema no se pierde. El Child Theme es útil para cuando realizas cambios del tema, no de las entradas o páginas. Espero haberte aclarado un poco más. Un saludo.
Hola
Descargué divi y trabajé con el tema hijo, llegó una actualización al tema padre y la apliqué, se actualizó Divi padre, pero mi web presenta el tema hijo, ¿debería actualizar de alguna manera Divi Hijo?
saludos
Hola César. Eso es lo bueno de esto, que no necesitas actualizar el tema hijo. A no ser que hayas copiado por ejemplo el header.php del tema padre al tema hijo para hacer alguna personalización, y que venga con cambios bastantes grandes como para que necesites revisarlo y traerte al header.php del tema hijo los cambios que le hayan incluido al tema padre. Pero esto solo lo tendrás que hacer si lo consideras necesario. Pero por regla general, no te será necesario hacerlo casi nunca. Espero haberme explicado. Un saludo.
Cuando entro en header php de mi divi child me sale un mensaje de que no puedo editar ese archivo
Tienes que darle permisos de escritura en el servidor a los archivos que quieras modificar desde el panel de administración de WordPress. Un saludo.
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!