Seleccionar página
Mi nombre es Carlos Tum, originario de Guatemala. Soy un emprendedor que inició una pequeña empresa llamada Grupo Digit con base al diseño web, publicidad digital y branding. He trabajado con WordPress y Divi desde el inicio de mi empresa. Un placer.

Aprende a crear Child Themes de Divi para tus clientes o créalos para vender.

Inspirado en el Post de DiviLife:
https://divilife.com/divi-child-theme-guide/ 

 

¿Conoces que es un Child Theme? ¿Por qué es importante y cuándo utilizarlo?
Si no, no te preocupes. En esta guía completa sobre ChildTheme te explicaremos qué es y cuándo utilizarlo.

¿Qué es un Child Theme?

Un Child Theme es un tema hijo, un tema que se crea a partir de un Framework, en nuestro caso será de Divi.

“Es un tema secundario que hereda las funciones y estilos de otro tema, llamado tema principal”. WordPress Codex
El tema principal o tema padre es un tema creado y empaquetado por desarrolladores PHP, HTML, JavaScript y CSS.
El tema secundario o tema hijo, es un tema que se puede crear o se puede comprar de terceras tiendas, como DiviLife, DiviLover, DiviSpace, etc.

Portada de nuestro child theme

¿Por qué un Child Theme?

Existen muchos beneficios a un tema hijo, pero los principales son dos:

  • Sin un tema hijo puedes botar tu sitio web por la modificación en el código principal.
  • Sin un tema hijo todas tus modificaciones se desaparecen en la próxima actualización.

Con un Framework puedes crear sitios excepcionales. Recordemos que Divi, al ser un Tema, puede ser utilizado como un framework para realizar modificaciones, ediciones y creación de módulos.

Dentro del tema Divi, una de las mayores restricciones es la modificación de la página 404, Footer, Header y Widgets. Pero con código puedes eliminar estas restricciones o bien, comprando plugins.

error 404 en divi nuestra pagina default del child theme

Ahora sí, como crear un tema hijo (child theme)

Se puede crear un tema hijo de tres maneras:

  • De la forma manual.
  • Con un generador de temas hijos.
  • Con un plugin.

Método 1: Creando un tema hijo de forma manual.

Para traer a la vida a un tema hijo es necesario de 3 elementos principales:

  • Directorio del tema padre.
  • Hoja de estilos –> Style.css
  • Archivo de funciones –> funtions.php

Paso 1: crear el directorio en la carpeta de temas.

Recuerda crear la carpeta en la dirección de tu WordPress por medio del Administrador de Archivos de tu Hosting o bien, por medio de FTP. Generalmente está en Public_Html –> wp-content –> themes

Themes wordpress y child theme divi

Paso 2: crear un archivo llamado “style.css” sin las comillas. Utilizar un editor de texto como Sublime Text, Atom u otro. En mi caso, estoy utilizando Sublime Text. Escribimos el siguiente texto:

/*

Theme Name:   Divicon 
Theme URI:    https://divicon.net
Description:  Tema creado por y para Divicon.net. Tutoriales sobre Divi y más.
Author:       Divicon
Author URI:   https://divicon.com 
Template:     Divi
*/

Lo importante en este código es que puedes editar todo, excepto los textos de los layouts (Theme Name, Theme URI, Description, etc.) ni Template: Divi.

El layout Theme Name es el nombre que aparece en los temas instalados en WordPress y Template le indica a WordPress quien es el tema padre. OJO, si se modifica “Template: Divi” no funcionará la creación del tema hijo.

Paso 3: crear el archivo llamado “functions.php” sin las comillas. Utilizar un editor de texto como Sublime Text, Atom u otro. En mi caso, estoy utilizando Sublime Text. Escribimos el siguiente texto:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Este código enlazará el archivo functions.php del tema hijo al functions.php del tema padre.

Paso 4: crear el branding de tu tema hijo

Para ello, necesitamos un archivo con el nombre “screenshot.png” o “screenshot.jpg” sin las comillas. Este es el nuestro:

Nombre de la portada de nuestro child theme sceenshot.png

Bueno, hemos terminado de hacer nuestro ChildTheme. Nuestra carpeta en el servidor debería tener los siguientes archivos:

Y queda nuestro Child Theme.

También puedes crear una carpeta en tu computadora y comprimirla en formato .zip ir a Apariencia –> Temas –> Subir Tema y seleccionas el archivo recién creado.

Instalacion del child theme desde un zip

Método 2: Generador automático de Temas Hijo

Esta es la forma sencilla de crear los archivos style.css y functions.php.

Paso 1: Ingresar al siguiente link.

–> Link: Generador de Temas Hijo de Divi Space

Al ingresar al link tienes los siguientes campos para llenar:

Paso 2: llenamos los campos de Información general del Tema Hijo.

formulario para crear nuestro child theme

Paso 3: subimos nuestro screenshot.

screenshot para nuestro theme child

Paso 3: Configuración del Tema Hijo.

Configuracion de nuestro thema hijo (childtheme)

El correo que coloquemos al final será para descargar los archivos.

Descargamos el archivo que se habrá enviado a nuestro correo electrónico e instalamos el .zip de la misma forma en que se instala un tema –> Apariecna –> Temas –> Añadir nuevo –> Subir.

Instalando nuestro thema hijo o child theme desde un archivo comprimido

La mejor parte de de esta forma de crear ChildThemes es que puede crear un Login Personalizado. Recomendado para dar a conocer tu branding 😉

login personalizador para nuestro theme

Método 3: Plugins

La instalación de Plugins para crear Temas Hijo es la forma más sencilla de proceder. Existen muchos plugins dedicados a la tarea. Mira los siguientes plugins gratuitos:

 

  • Child Theme Configurator
  • Div Children 
    • Divi Children te da opciones nuevas en el personalizador. Es la mejor opción si deseas personalizar Footer, íconos sociales, barra lateral, header y más.

¡Listo! Haz creado tu propio Child Theme o Tema Hijo. Ahora puedes crear tus propios Child Themes y poder experimentar hasta volverte un experto y poder vender tus creaciones.

Si este tutorial te ha gustado, por favor, compártelo.

 

 

¿Te parece interesante este artículo?
Puntaje
[Total: 5 Average: 4.8]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Pin It on Pinterest

Shares