Tema hijo Divi

Crear un tema hijo Divi para personalizar tu web aparentemente puede no tener mucho sentido.

Elegant Themes ha creado uno de los temas más completos y potentes para crear temas WordPress que destacan visualmente.

Precisamente, el punto fuerte de Divi es la flexibilidad y facilidad de diseño.

¿Por qué necesito un tema hijo Divi?

Divi te da la opción de modificar el CSS de cada elemento individual y globalmente.

O si lo prefieres, ahora puedes utilizar el personalizador de WordPress.

Todo esto sin tener que salir de WordPress. Me parece una ventaja para pequeños cambios, aunque yo sigo prefiriendo tener todos mis cambios en un mismo sitio y no dispersos por la configuración del tema o de WordPress.

La cosa se complica si quieres añadir plantillas diferentes, o modificar las que ya hay.

Aunque esto también lo puedes hacer directamente sobre el tema, no es lo más recomendable.

La principal ventaja de un tema hijo Divi es no perder nuestras modificaciones cuando actualizamos nuestro tema padre.

Y como ya he comentado, mantener actualizado tus temas y plugins es una buena medida de seguridad.

¿Es complicado crear un tema hijo Divi?

Crear un Tema hijo Divi es igual que crear un tema hijo para cualquier otro tema.

Está muy bien documentado (ver enlaces al final) y lo puedes conseguir siguiendo unos sencillos pasos.

Necesitarás poder acceder al sistema de carpetas de tu host, bien por ftp o a través del panel de control del propio hosting.

Vamos con el primer paso.

Crear la carpeta para el tema hijo

Deberas crear una carpeta dentro de la carpeta de temas WordPress:

wp-content/themes

El nombre que le des a la carpeta es importante, ten en cuenta lo siguiente:

• Terminar el nombre de la carpeta añadiendo ‘-child’, así no tendrás dudas de cual es tu tema hijo Divi.
• No incluir espacios en el nombre porque puede provocar errores.

Dentro de esta carpeta pondremos los ficheros necesarios según las modificaciones que necesitemos hacer.

El primero de ellos style.css es imprescindible. Vamos a ver como se crea en el siguiente paso.

Hoja de estilos para el tema hijo style.css

Lo primero será crear este fichero con la siguiente información en la cabecera:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Esta información es muy importante porque ayuda a WordPress a identificar correctamente nuestro tema hijo.

Rellenar esta información es muy sencillo, basta con ir línea a línea adaptando con la información de nuestro tema hijo.

Imprescindible cambiar la línea donde dice Template:, en el ejemplo pone twentyfifteen, y lo tendremos que cambiar por el nombre del tema padre que estemos utilizando, en este caso Divi.

En el último paso nos aseguraremos de cargar correctamente el fichero style.css, esto se hace con otro fichero, functions.php.

Fichero functions.php

Seguramente habrás visto otros ejemplos donde se utiliza el comando @import en la hoja de estilos del tema hijo para cargar la hoja de estilos del tema padre, pero esto penaliza el rendimiento.

Por eso ahora se recomienda utilizar acciones para cargar la hoja de estilos del tema padre. Este es un ejemplo de como se debería hacer:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Este código debe ir en el fichero functions.php, es la razón de que necesitemos un fichero más.

Esta forma de cargar el fichero como una dependencia, nos asegura que los estilos cargarán después de los del tema padre, sobreescribiendo correctamente lo que queremos modificar.

No olvides modificar parent-style para el tema padre que estes utilizando, en este caso Divi.

Y ya lo tienes, sólo tienes que activar el tema hijo en Panel de Administración > Apariencia > Temas, y podrás empezar a personalizar tu web.

¿Hay una forma mas sencilla de crear un tema hijo Divi?

Pues la verdad es que si.

Como para casi todo en WordPress, puedes crear un tema hijo a utilizando un plugin: Child Theme Configurator.

Yo he utilizado este en concreto para crear un tema hijo Divi, me ha ahorrado tiempo al no tener que subir ficheros al servidor por ftp.

El solito te genera la carpeta y los ficheros necesarios, sólo tienes que elegir la configuración que necesitas.

Otra cosa que me ha gustado es que puedes añadir ficheros según los vas necesitando.

Y una vez has terminado el trabajo, puedes desactivar y borrar el plugin si problemas, tu tema hijo seguirá ahí.

Conclusiones

Intenta hacer las modificaciones que necesites para tu web a través de las herramientas que te ofrece Divi.

La documentación que proporcionan es muy completa y el blog merece mucho la pena.

Decídete por un tema hijo cuando hayas agotado todas las posibilidades, en ese caso es muy recomendable seguir los pasos recomendados en el Codex de WordPress para que todo salga bien.

Que tengas un gran día.