Seleccionar página

Tutorial guía: Cómo crear un child theme para DIVI o EXTRA

Tutorial guía: Cómo crear un child theme para DIVI o EXTRA

Guía para crear Divi Child Theme

Crear un  Divi child theme es una gran manera de agregar personalización avanzada a su tema sin tener que preocuparse de borrar esos cambios cada vez que actualice el tema Divi. De hecho, un Divi Child theme 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 el código de los clientes que tienen acceso a código personalizado dentro del personalizador de tema y la configuración.

En este post, voy a mostrarte cómo crear un tema Divi Child. Mi esperanza es que este proceso sea útil para aquellos que acaban de empezar con Divi y también para los desarrolladores que buscan publicar temas completos de Divi Child para sus clientes.

Empecemos.

divi-child-theme-1.jpg

Por qué necesitas un tema Child

Divi es un tema de WordPress. Siempre que necesite realizar modificaciones en cualquier tema de WordPress, se recomienda crear un tema secundario que herede el diseño y la funcionalidad de ese tema principal. Una razón importante para crear un tema secundario es conservar las modificaciones que realice al actualizar el tema primario. Cada vez que actualice Divi, todos los archivos de tema se actualizan por lo que si ha realizado algún cambio en estos archivos, esos cambios se borrarán. Por lo tanto, en lugar de modificar los archivos de tema de Divi directamente, puede crear archivos de tema adicionales dentro de un tema secundario para que cuando Divi se actualiza, esos archivos de tema secundarios permanecen 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 el tema de su hijo sin tener que tocar los archivos de tema primarios.

¿Es posible usar Divi sin un tema Child?

divi-child-theme-2

Es posible usar Divi sin crear un tema Divi Child, 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. Si 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, hay un argumento que se debe hacer que un tema secundario es innecesario si un usuario sólo va a hacer 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 simplificar las cosas para usted, permítanme desglosar las circunstancias en las que probablemente debería n.o deba y no debe usar un tema divi child.

Usted probablemente DEBE utilizar un tema Divi Child si…

  1. Usted planea hacer cambios en el código de archivos de tema específicos (esto incluye cosas como plantillas de página y functions.php)
  2. Planea agregar cientos de líneas de código (CSS, JavaScript, etc.).A pesar de que es posible agregar esto a lugares como la configuración del tema, se vuelve más difícil de manejar con una gran cantidad de CSS.
  3. Desea colaborar con otros y acelerar el tiempo dedesarrollo manteniendo todo en un espacio organizado.
  4. No quieres que losclientes se reúnan con el personalizador de temas/configuración y rompa el código. Guardarlo en un tema para niños definitivamente lo mantendrá a salvo de los demás.

Usted probablemente NO DEBE utilizar un tema de Divi Niño si…

  1. Usted planea hacer modificaciones menores del tema.Agregar una pequeña cantidad de CSS (como menos de 100 líneas, por ejemplo) o algunos scripts en la configuración del tema / personalizador no justificará la necesidad de crear un tema secundario si eso es TODO lo que planea hacer.
  2. No planeas colaborar con un equipo.Supongamos que contrata a un desarrollador para trabajar en su sitio, esa persona puede o no estar familiarizado con Divi y sin duda recurrirá a la creación de un tema de niño para hacer modificaciones de todos modos.
  3. No le importa quelos clientes vean sus modificaciones de código en la configuración del tema / personalizador.

Lo que necesitará para crear un Divi Child Theme

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

  • Tema Divi Instalado y Activado
  • Editor de texto para editar archivos de tema. Puedes usar el editor de texto que viene con Windows o Mac pero si planeas hacer un hábito de editar estos archivos, te sugiero conseguir un editor de texto más potente como Atom, Sublime, Notepad++, etc.
  • Cliente FTP – Esto no es necesario si planea subir su tema hijo a WordPress como un archivo zip. Pero si usted está tratando de acceder a los archivos de tema para un sitio en vivo que necesitará un cliente FTP como FileZilla con el fin de poder acceder, editar, añadir, o eliminar archivos de tema. Si está trabajando en una instalación local, debería poder acceder a los archivos de tema directamente en su disco duro.
  • Taza de café o té (opcional)

Los bloques de construcción de un Child Theme

divi-child-theme-3

En el nivel más básico, un tema secundario debe consistir en tres cosas:

  1. Un directorio de temas secundarios (o carpeta).Al igual que todos los temas, su carpeta de temas para niños existirá dentro de su carpeta Temas de WordPress que contiene sus archivos de tema secundarios.
  2. Un archivo style.css (que se utilizará para almacenar el tema de su hijo CSS)
  3. Un archivo functions.php – En el nivel básico este archivo mantendrá la acción wp_enqueue_scripts que pondrá en cola la hoja de estilos del tema principal (más sobre esto más adelante)

Crear su directorio de temas secundarios (carpeta)

divi-child-theme-4

Hay dos maneras de agregar sus archivos de tema de hijo a WordPress. Puede agregar la carpeta de temas secundarios a los archivos de tema de WordPress directamente (a través de FTP, o localmente). O puede crear una carpeta fuera de WordPress para ser posteriormente comprimido y cargado en WordPress como un nuevo tema.

Para crear una nueva carpeta para su tema hijo directamente en WordPress, tendrá que acceder a sus archivos de tema ubicados en la carpeta temas de wordpress (wp-content/themes/). A continuación, cree una nueva carpeta dentro de la carpeta de temas y asír sea el nombre “divi-child”. Así que el nuevo directorio de temas secundarios será wp-content/themes/divi-child.

ruta crear tema child

Pero si está creando una carpeta de temas secundarios para ser comprimida y cargada en WordPress más tarde, simplemente puede crear una nueva carpeta en su computadora y darle el nombre “divi-child”.

Crear su hijo Tema Style.css Archivo para Agregar CSS personalizado

crear hoja de estilos

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

01

02

03

04

05

06

07

08

09

10

11

12

13

/*

Nombre del tema: Divi Child

URI de tema: https://www.elegantthemes.com/gallery/divi/

Descripción: Tema Divi Child

Autor: Temas elegantes

URI de autor: https://www.elegantthemes.com

Plantilla: Divi

Versión: 1.0.0

*/

 

 

/* La personalización del tema comienza aquí

——————————————————- */

Si no planea publicar el Divi child theme, realmente solo tiene que tener el Nombre del tema y una Plantilla introducidos. Así que si usted está luchando para saber cómo llenar toda esa información, no se preocupe por ello.

requerido para divi child

Debe asegurarse de que el parámetro “Template:” identifica correctamente el nombre del directorio del 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 su nombre de tema, ya que este es el nombre que aparece al visitar su tema en el panel de WordPress.

Crea tu Functions.php para poner en cola tu hoja de estilos de tema principal

functions php divi child

Ahora que tenemos nuestro archivo style.css para nuestro tema secundario en su lugar, necesitamos asegurarnos de no dejar completamente fuera el estilo ya en su lugar dentro de Divi (el tema principal). Eso significa que tendremos que asegurarnos de que usamos la hoja de estilo súbditos de Divi primero y luego presentamos nuestra nueva hoja de estilo después. Este orden es importante porque si está familiarizado con CSS, el código que introduzca en la parte inferior siempre tendrá prioridad sobre el código en la parte superior. Por lo tanto, en nuestro caso, queremos que el código de la hoja de estilo sellos principal se cargue primero y luego nuestro código de hoja de estilo sórno secundario en último lugar.

Qué Necesitaremos

Para ello, necesitamos poner en cola la hoja de estilos del tema principal (Divi). Enqueue es una palabra elegante que literalmente significa “añadir a una cola”, por lo que en este caso estamos agregando la hoja de estilos principal que se va a poner en cola primero antes de la hoja de estilos del tema secundario. En otras palabras, cualquier cosa que agreguemos a nuestra hoja de estilo de tema secundario agregará y reemplazará el tema principal.

Desde que Divi fue lanzado por primera vez, se creó para adherirse a la forma original recomendada de WordPress de configurar un tema secundario. Este método original de creación de temas secundarios implicaba hacer un @import CSS de la hoja de estilos del tema principal desde dentro del archivo style.css del tema secundario. Muchos temas todavía están configurados de esta manera, dejando el tema secundario la tarea simple de definir su propio style.css y @import -ing Divi’s style.css y Divi cargarán ese archivo automáticamente. Esto funciona por Divi utilizando la función get_stylesheet_directory_uri() cuando se pone en cola la hoja de estilo principal. Lo que esto significa es que Divi está configurado para invocar su propia hoja de estilo o la hoja de estilo del tema secundario (cualquiera que esté activo). Básicamente, con el get_stylesheet_directory_uri(), si ha activado un tema secundario, WordPress devolverá el uri al directorio del tema secundario en lugar del directorio del tema principal.

Como cambiar en wordpress la configuración del archivo style.css

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

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

01

02

03

04

05

<?php

función my_theme_enqueue_styles()

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

A continuación, 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 sortear PHP. Documentos PHP como este siempre deben comenzar con una etiqueta php abierta (el código no funcionará sin él). Sin embargo, es recomendable NO incluir la etiqueta de cierre php. Esto se asegurará de que ninguno de su código php se corta por una etiqueta de cierre fuera de lugar o crear espacios no deseados funky que pueden romper su código al tratar de 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 hijo y terminar con él.

Crear una miniatura para el Divi child theme (opcional)

miniatura divi child theme

WordPress le permite proporcionar una miniatura para servir como una captura de pantalla de tema o imagen de marca para su tema al verlo en el panel de WordPress.

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

Aquí está una miniatura de Divi Child Theme que he creado:

portada para el child

Estos son los tres archivos que la carpeta del tema de su hijo debe tener:

archivos para tema child

Sube y activa el Divi Child Theme

Después de haber creado la carpeta de temas de su hijo, el archivo style.css y el archivo functions.php, el tema de su hijo está listo para cargary y activar.

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

Si ha añadido la carpeta de temas secundarios y los archivos directamente al directorio Temas de WordPress, no hay necesidad de cargar el tema en WordPress. Ya está ahí. Todo lo que necesita hacer es ir al panel de WordPress y navegar a Apariencia > Tema, pasar el cursor sobre su temahijo, y haga clic en el botón Activar.

Activando su tema child

Si simplemente ha creado la carpeta y los archivos de tema secundario en su computadora, primero tendrá que comprimirlo (ZIP) para que esté en el formato adecuado para cargarlo en WordPress. Mac Windows tienen funcionalidad ZIP nativa. Una vez que se comprime, cargar y activar un tema secundario no es diferente de un tema normal, simplemente subirlo a través de la apariencias > Temas página en su panel de WordPress y activarlo.

activar tema child

Y luego activar el tema como normal.

divi child theme activar

Para probar si el tema de su hijo funciona correctamente, agregue un poco de CSS en el archivo style.css de su tema secundario y guarde los cambios. Debería ver esos cambios en el sitio en vivo. Es posible que tenga que abrir su página en un navegador privado en caso de que se almacene en caché.

Edición del archivo Functions.php de Divi

El archivo Functions.php es donde se almacenan las funciones principales de Divi. Con el fin de añadir funciones personalizadas para nuestro tema secundario, creamos un archivo functions.php en nuestra carpeta de temas secundarios. Sin embargo, este archivo no invalidará completamente las funciones del tema primario. Agregará nuevas funciones muy similar al archivo style.css para la hoja de estilos principal.

Dado que este es un archivo php, es importante que todo su código php se envuelva en las etiquetas php apropiadas. Pero ya que ya habrás añadido y editado el archivo functions.php al crear el tema secundario, puedes añadir cualquier nueva función directamente después del código ya allí.

01

02

03

04

05

06

07

08

<?php

función my_theme_enqueue_styles()

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

 

 

añadir nuevo código aquí

Edición de archivos de plantilla de Divi

No se limita a editar sólo 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 completamente cualquier parte de su tema (hacer esto con mucho cuidado). A diferencia de la edición de functions.php, los archivos de plantilla deben ser reemplazados completamente por uno nuevo. Esto se debe a que el archivo original del tema primario (Divi) se omite y se usa el nuevo en su lugar. Para editar un archivo de plantilla, primero debe replicar el archivo antiguo antes de empezar a modificarlo. Para ello, simplemente copie (¡no corte!) y pegue el archivo original del tema en su carpeta de temas secundarias asegurándose de que el nombre de archivo y la ubicación son exactamente los mismos. Por ejemplo, si queremos modificar el Divi/includes/navigation.php, entonces copiaremos y pegaríamos este archivo en divi-child/includes/navigation.php .

navigation

Siempre y cuando el nombre y la ubicación sean exactamente los mismos que en el tema principal, WordPress usará el archivo de tema Child en lugar del antiguo.

Migración de CSS / código 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. Por lo tanto, si ya tiene CSS personalizado o código agregado a Divi, lo migrará a su tema secundario. Por ejemplo, si tiene CSS personalizado en Divi > Theme Customizer > 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 del Divi Child Theme

Divi y WordPress están continuamente mejorando y adaptándose. Por lo tanto, puede llegar un momento (después de muchas actualizaciones de Divi) que algunos de los archivos de tema de Divi cambiarán. Y, si usted tiene un tema hijo reemplazando el archivo que se ha cambiado, su tema hijo puede romperse de alguna manera. Esto se debe a que está utilizando código obsoleto dentro de su tema secundario y debe actualizarse para que coincida con el nuevo código que está utilizando Divi. Por lo tanto, si ha estado usando un tema secundario durante un tiempo, y las cosas están empezando a romperse, es posible que deba actualizar el código.

Pensamientos finales

Estoy seguro de que hay varias maneras exitosas de crear un tema secundario. Pero dado que muchos temas de WordPress están configurados de manera diferente, pensé que sería más útil concentrarse en crear un tema secundario específicamente para el tema Divi. Para los desarrolladores, puede ser útil conocer las prácticas recomendadas para poner en cola las hojas de estilo principales y secundarias para un mejor rendimiento. Para los novatos, no necesariamente tienes que entender cómo funciona todo para crear un tema secundario con este tutorial o con un plugin, y eso también está bien. Y, usted puede llegar a darse cuenta de que un tema de niño no es necesario porque los ajustes de estilo incorporado de Divi son todo lo que necesita Sin importar, espero que este post le sirva bien.

Sobre el Autor

FernanTEC

💻Apasionado del mundo tecnológico así como de la ingeniería y en general, de todo tipo de herramientas y/o gadgets que nos faciliten la vida. Intento transmitir de manera práctica cómo poder sacarle provecho! espero que te sirva de ayuda! 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

PROMOCIÓN FERNANTEC

APROVECHA ÉSTA OFERTA CON SERED:
🚀 2 MESES GRATIS 🚀
Código de DESCUENTO: FernanTEC
CLICK EN LA OFERTA:

sered oferta 2 meses gratis

O UN 10% ANUAL
🚀10% DESCUENTO🚀
Código de DESCUENTO: AnualTEC
CLICK EN LA OFERTA:

sered oferta DESCUENTO ANUAL

TEMAS WORDPRESS

orbital theme oferta orbital theme oferta