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.

tema-hijo-divi

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.

Personalizacion Css Adicional

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.

Necesitas 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

Debes 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 cómo 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: http://example.com/twenty-fifteen-child/
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 cómo 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 estés 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 más 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.

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.

 

Hasta pronto!

 

0 Comments