Guía definitiva para crear un tema Divi Child

Crear un tema infantil Divi es una excelente manera de agregar una personalización avanzada a su tema sin tener que preocuparse por borrar esos cambios cada vez que actualice el tema Divi . De hecho, un tema de Divi Child tiene muchos beneficios. Le permite organizar mejor todo su CSS/Código personalizado en un solo lugar, lo que facilita la colaboración con otros. Esto también ayudará a proteger su código de los clientes que tienen acceso a un código personalizado dentro del personalizador y la configuración del tema.

En esta publicación, te mostraré cómo crear un tema Divi Child. Mi esperanza es que este proceso sea útil para aquellos que recién comienzan con Divi y también para los desarrolladores que buscan publicar Divi Child Themes completos para sus clientes.

Empecemos.

Por qué necesitas un tema Divi Child

Divi es un tema de WordPress. Siempre que necesite realizar modificaciones en cualquier tema de WordPress, es una buena práctica crear un tema secundarioque hereda el diseño y la funcionalidad de ese tema principal. Una razón importante para crear un tema secundario es conservar las modificaciones que realiza al actualizar el tema principal. Cada vez que actualiza Divi, todos los archivos de temas se actualizan, por lo que si ha realizado algún cambio en estos archivos, esos cambios se borrarán. Entonces, en lugar de modificar los archivos de temas de Divi directamente, puede crear archivos de temas adicionales dentro de un tema secundario para que cuando Divi se actualice, esos archivos de temas secundarios permanezcan sin cambios. Por lo tanto, si planea realizar personalizaciones avanzadas en su tema, como modificar plantillas de página y/o agregar grandes cantidades de CSS/JavaScript, y/o agregar nuevas funciones, es mejor realizar estos cambios en su tema secundario sin tener que tocarlo. los archivos del tema principal.

¿Es posible usar Divi sin un tema infantil?

Es posible usar Divi sin crear un Divi Child Theme, siempre y cuando entiendas por qué.

Divi le permite agregar CSS y código personalizados en lugares como Divi Builder, Theme Customizer y Theme Settings. De hecho, Divi incluso ha mejorado la edición de código para este propósito. Y este código se conserva al actualizar el tema Divi. Por lo tanto, se puede argumentar que un tema secundario es innecesario si un usuario solo va a realizar modificaciones menores. Además, Divi minimiza y almacena automáticamente en caché un archivo CSS estático para que no haya problemas con la velocidad de carga de la página.

Para simplificarte las cosas, permíteme desglosar las circunstancias en las que probablemente deberías y no deberías usar un tema de Divi Child.

Probablemente DEBERÍA usar un Divi Child Theme si…

Planea hacer cambios en el código de archivos de temas específicos (esto incluye cosas como plantillas de página y functions.php)
Planea agregar cientos de líneas de código (CSS, JavaScript, etc.). Aunque es posible agregar esto a lugares como la configuración de su tema, se vuelve más difícil de administrar con una gran cantidad de CSS.
Quiere colaborar con otros y acelerar el tiempo de desarrollo manteniendo todo en un espacio organizado.

Probablemente NO DEBERÍAS usar un Divi Child Theme si…

Planeas hacer modificaciones menores al tema. Agregar una pequeña cantidad de CSS (como menos de 100 líneas, por ejemplo) o algunas secuencias de comandos en la Configuración/Personalizador de tema no justificará la necesidad de crear un tema secundario si eso es TODO lo que planea hacer.
No planeas colaborar con un equipo. Supongamos que contrata a un desarrollador para trabajar en su sitio, esa persona puede o no estar familiarizada con Divi y, sin duda, recurrirá a la creación de un tema secundario para realizar modificaciones de todos modos.

Lo que necesitará para crear un tema Divi Child

Para crear su tema Divi Child, necesitará lo siguiente:

Tema Divi instalado y activado
Editor de texto para editar archivos de temas. Puede usar el editor de texto que viene con Windows o Mac, pero si planea acostumbrarse a editar estos archivos, le sugiero que obtenga un editor de texto más potente como Atom, Sublime, Notepad ++ , etc.
Cliente FTP : esto no es necesario si planea cargar su tema secundario en WordPress como un archivo zip. Pero si está tratando de acceder a los archivos de temas para un sitio en vivo, necesitará un cliente FTP como FileZilla para poder acceder, editar, agregar o eliminar archivos de temas. Si está trabajando en una instalación local, debería poder acceder a los archivos del tema directamente en su disco duro.
Taza de Café o Té (opcional)

Los bloques de construcción de un tema hijo

En el nivel más básico, un tema hijo debe constar de tres cosas:

Un directorio de temas secundarios (o carpeta). Como todos los temas, la carpeta de temas secundarios existirá dentro de la carpeta Temas de WordPress que contiene los archivos de temas secundarios.
Un archivo style.css (que se utilizará para almacenar el CSS de su tema secundario)
Un archivo functions.php: en el nivel básico, este archivo contendrá la acción wp_enqueue_scripts que pondrá en cola la hoja de estilo del tema principal (más sobre esto más adelante)

Cree su directorio de temas secundarios (carpeta)

Hay dos formas de agregar sus archivos de temas secundarios a WordPress. Puede agregar la carpeta del tema secundario a los archivos del tema de WordPress directamente (a través de FTP o localmente). O puede crear una carpeta fuera de WordPress para luego comprimirla y cargarla en WordPress como un nuevo tema.

Para crear una nueva carpeta para su tema secundario directamente en WordPress, deberá acceder a los archivos de su tema ubicados en la carpeta Temas de wordpress (wp-content/themes/). Luego cree una nueva carpeta dentro de la carpeta de temas y asígnele el nombre «divi-child». Entonces, el nuevo directorio de temas secundarios será wp-content/themes/divi-child.

Pero si está creando una carpeta de tema secundario para comprimirla y cargarla en WordPress más tarde, simplemente puede crear una nueva carpeta en su computadora y darle el nombre «divi-child».

Cree su archivo Child Theme Style.css para agregar CSS personalizado

Dentro de su nueva carpeta de temas, use un editor de texto para crear un archivo llamado style.css (el nombre debe ser exactamente este o WordPress no lo reconocerá) y complete la información como se describe a continuación.

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

Si no planea publicar su tema hijo, realmente solo tiene que ingresar el Nombre del tema y una Plantilla. Entonces, si tiene dificultades para saber cómo completar toda esa información, no se preocupe.

Debe asegurarse de que el parámetro «Plantilla:» identifique correctamente el nombre del directorio de su tema principal, que es «Divi». El nombre del tema, el URI, la descripción y el autor dependen totalmente de usted. Puede personalizar esta información de encabezado para adaptarse a las necesidades de su cliente. Por ejemplo, es posible que desee agregar el nombre de la empresa de su cliente para el nombre de su tema, ya que este es el nombre que aparece cuando visita su tema en el Panel de WordPress.

Cree su Functions.php para poner en cola su hoja de estilo de tema principal

Ahora que tenemos nuestro archivo style.css para nuestro tema secundario en su lugar, debemos asegurarnos de no omitir por completo el estilo que ya está dentro de Divi (el tema principal). Eso significa que tendremos que asegurarnos de usar la hoja de estilo principal de Divi primero y luego introducir nuestra nueva hoja de estilo después. Este orden es importante porque si está familiarizado con CSS, el código que ingrese en la parte inferior siempre tendrá prioridad sobre el código en la parte superior. Entonces, en nuestro caso, queremos que el código de la hoja de estilo principal se cargue primero y luego el código de la hoja de estilo secundaria al final.

Para hacer esto, necesitamos poner en cola la hoja de estilo del tema principal (Divi). Poner en cola es una palabra elegante que literalmente significa «agregar a una cola», por lo que en este caso estamos agregando la hoja de estilo principal para ponerla en cola antes que la hoja de estilo del tema secundario. En otras palabras, cualquier cosa que agreguemos a nuestra hoja de estilo de tema secundario se agregará y reemplazará al tema principal.

Desde que se lanzó Divi por primera vez, se configuró para adherirse a la forma recomendada original de WordPress de configurar un tema secundario. Este método original de crear temas secundarios implicaba realizar una @importación CSS de la hoja de estilo del tema principal desde el archivo style.css del tema secundario. Muchos temas todavía se configuran de esta manera, dejando al tema secundario la simple tarea de definir su propio estilo.css y @importar el estilo.css de Divi y Divi cargará ese archivo automáticamente. Esto funciona con Divi usando la función get_stylesheet_directory_uri() cuando se pone en cola como la hoja de estilo principal. Lo que esto significa es que Divi está configurado para llamar a su propia hoja de estilo o a la hoja de estilo del tema secundario (cualquiera que esté activa). Básicamente, con get_stylesheet_directory_uri(), si ha activado un Child Theme,

Ahora que WordPress ha actualizado su forma recomendada de abordar esto, aún puede configurar fácilmente los estilos para su tema secundario Divi. Todo lo que necesita hacer es poner explícitamente en cola el archivo style.css principal de Divi, ya que Divi ya está configurado para poner en cola el archivo style.css del tema secundario.

Para hacer esto, necesitaremos usar nuestro editor de texto para crear otro archivo dentro de la carpeta del tema secundario. Guarde el archivo con el nombre functions.php (el nombre debe ser exactamente este) y luego agregue el siguiente código en el archivo:

<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Luego guarde el archivo.

Este código es específico de Divi y es una versión modificada del método propuesto por el Codex de WordPress .

Consejo: no necesita la etiqueta de cierre de PHP. Los documentos PHP como este siempre deben comenzar con una etiqueta php abierta (el código no funcionará sin ella). Sin embargo, es una buena práctica NO incluir la etiqueta de cierre de php. Esto asegurará que nada de su código php sea cortado por una etiqueta de cierre fuera de lugar o cree espacios extraños no deseados que pueden romper su código cuando intente incluirlo.

Por cierto, no necesitas entender el funcionamiento interno de este código php para que esto funcione (obviamente). Así que si estás completamente confundido, no te preocupes. Simplemente puede copiar y pegar el código anterior en el archivo functions.php de su tema secundario y terminar.

Cree una miniatura para su tema Divi Child (opcional)

WordPress le permite proporcionar una miniatura para que sirva como captura de pantalla del tema o imagen de marca para su tema cuando lo visualice en el Panel de WordPress.

Para crear una miniatura para su tema hijo, primero cree una imagen (WP recomienda un tamaño de 1200 px de ancho por 900 px de alto) y guárdela con el nombre de archivo screenshot.png (el nombre de archivo debe ser exactamente este para que WP lo reconozca). Luego agréguelo a la carpeta del tema secundario junto a los dos archivos que ya están allí.

Aquí hay una miniatura de Divi Child que creé:

Aquí están los tres archivos que debe tener su carpeta de tema hijo:

Cargue y active el tema de su hijo

Después de haber creado la carpeta del tema secundario, el archivo style.css y el archivo functions.php, el tema secundario está listo para cargarse y activarse.

En este punto, asegúrese de que su tema Divi se haya cargado para que su tema infantil funcione después de la activación.

Si agregó la carpeta y los archivos del tema secundario directamente al directorio de temas de WordPress, no es necesario cargar el tema en WordPress. Ya está allí. Todo lo que necesita hacer es ir al panel de control de WordPress y navegar a Apariencia > Tema , colocar el cursor sobre el tema de su hijo y hacer clic en el botón Activar.

Si simplemente ha creado la carpeta y los archivos del tema secundario en su computadora, primero deberá comprimirlo (ZIP) para que tenga el formato adecuado para cargarlo en WordPress. Tanto Mac como Windows tienen funcionalidad ZIP nativa. Una vez que está comprimido, cargar y activar un tema secundario no es diferente a un tema normal, simplemente cárguelo a través de la página Apariencias > Temas en su Tablero de WordPress y actívelo.

Y luego active el tema como de costumbre.

Para probar si su tema hijo está funcionando correctamente, agregue algo de CSS en el archivo style.css de su tema hijo y guarde sus cambios. Debería ver esos cambios en el sitio en vivo. Es posible que deba abrir su página en un navegador privado en caso de que esté en caché.

Edición del archivo Functions.php de Divi

El archivo Functions.php es donde se almacenan las funciones principales de Divi. Para agregar funciones personalizadas para nuestro tema secundario, creamos un archivo functions.php en nuestra carpeta de tema secundario. Sin embargo, este archivo no anulará por completo las funciones del tema principal. Le agregará nuevas funciones al igual que el archivo style.css lo hace para la hoja de estilo principal.

Dado que este es un archivo php, es importante que todo su código php esté envuelto en las etiquetas php apropiadas. Pero dado que ya habrá agregado y editado el archivo functions.php al crear el tema secundario, puede agregar cualquier función nueva directamente después del código que ya existe.

<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
 
 
//add new code here

Edición de archivos de plantilla de Divi

No está limitado a editar solo los archivos style.css y functions.php. Puede agregar y editar cualquiera de los archivos de su tema principal, incluidos los archivos de plantilla o los archivos PHP. Aquí es donde puede reestructurar y ajustar por completo cualquier parte de su tema (hágalo con mucho cuidado). A diferencia de la edición de functions.php, los archivos de plantilla deben reemplazarse por completo con uno nuevo. Esto se debe a que el archivo original del tema principal (Divi) se ignora y se usa el nuevo en su lugar. Para editar un archivo de plantilla, primero debe replicar el archivo anterior antes de que comencemos a modificarlo. Para hacer esto, simplemente copie (¡no corte!) y pegue el archivo original del tema en la carpeta de su tema secundario, asegurándose de que el nombre del archivo y la ubicación sean exactamente iguales. Por ejemplo, si queremos modificar el Divi/includes/navigation.php, luego copiaríamos y pegaríamos este archivo en divi-child/includes/navigation.php .

Siempre que el nombre y la ubicación sean exactamente los mismos que en el tema principal, WordPress utilizará el archivo de tema secundario en lugar del anterior.

Migración del código/CSS personalizado actual a su nuevo tema secundario

Después de crear su tema Divi Child, querrá asegurarse de que todo esté en un solo lugar. Entonces, si ya tiene CSS personalizado o código agregado a Divi, lo migrará a su tema secundario. Por ejemplo, si tiene un CSS personalizado en Divi > Personalizador de temas > CSS adicional , todo lo que tendrá que hacer es mover (cortar y pegar) el CSS al archivo style.css de su tema secundario.

Actualización de su tema hijo

Divi y WordPress están mejorando y adaptándose continuamente. Entonces, puede llegar un momento (después de muchas actualizaciones de Divi) en que algunos de los archivos de temas de Divi cambiarán. Y, si tiene un tema secundario que anula el archivo que se ha cambiado, su tema secundario puede fallar de alguna manera. Esto se debe a que está utilizando un código obsoleto dentro de su tema secundario y debe actualizarse para que coincida con el nuevo código que utiliza Divi. Entonces, si ha estado usando un tema secundario por un tiempo y las cosas comienzan a fallar, es posible que deba actualizar su código.

Pensamientos finales

Estoy seguro de que hay varias formas exitosas de crear un tema hijo. Pero dado que muchos temas de WordPress se configuran de manera diferente, pensé que sería más útil concentrarme en crear un tema secundario específicamente para el tema Divi. Para los desarrolladores, puede ser útil conocer las mejores prácticas para poner en cola las hojas de estilo principales y secundarias para un mejor rendimiento. Para los novatos, no necesariamente tiene que entender cómo funciona todo para crear un tema secundario con este tutorial o con un complemento, y eso también está bien. Y es posible que te des cuenta de que un tema secundario no es necesario porque la configuración de estilo integrada de Divi es todo lo que necesitas Independientemente, espero que esta publicación te sirva bien.

Espero escuchar de usted en los comentarios.

¡Salud!