CREAR TEMA HIJO PARA DIVI

El tema Divi

Llegados a este punto, voy a dar por hecho una serie de conceptos básicos, ya que no se trata de un curso sobre WordPress desde cero. Tras la breve introducción y dando por hecho que los conceptos de plugins o temas en WordPress están claros, voy a comenzar por hablarte del tema Divi.

Sin entrar en demasiados detalles, te diré que Divi es el tema más popular entre los diseñadores web, a pesar de ser un tema premium, ya que requiere de licencia para su uso. Este tema incluye muchas otras funcionalidades que facilitan la labor durante el diseño como, por ejemplo, un constructor web.

Como la gran mayoría de temas, incorpora múltiples opciones de personalización, con herramientas que dotarán a tu web de un mayor dinamismo y efectos visuales. Todo ello con una gran compatibilidad con los plugins más conocidos del mercado y, por supuesto, optimizado para su integración en tu WordPress.

¿Qué es un tema hijo?

Resumiendo mucho, un tema hijo es una especie de copia de lo que se conoce como tema padre, en este caso Divi. El tema hijo 👶 hereda las funcionalidades básicas del tema padre 👨 o tema principal y nos permite modificar algunos de sus aspectos o incluir nuevas mejoras. Un ejemplo de estas funcionalidades puede ser el Renombrar el acceso a WordPress por seguridad, para lo cual, entre otras cosas, deberás editar ficheros como «functions.php».

Antes de continuar, quiero aclarar que anteriormente comentaba que íbamos a crear tu propio tema, pero quiero puntualizarlo, ya que no es del todo cierto. Lo que voy a explicar en este post es cómo crear un tema hijo sobre el tema Divi para poder aplicar unas funcionalidades o personalizaciones concretas.

¿Porqué crear un tema hijo de Divi?

No me voy a enrollar mucho más, ya que has llegado hasta aquí para saber la mejor manera de crear un tema hijo sobre el theme Divi. No obstante, respondiendo a la pregunta te diré que tras muchos años desarrollando páginas web en diferentes lenguajes de programación 👨‍💻 o plataformas como WordPress, la conclusión siempre es la misma. Para que algo quede a tu gusto debes desarrollarlo tú mismo. Como el uso de WordPress no tendría sentido en este escenario concreto y además no todo el mundo dispone de conocimientos de programación web, lo más sencillo es apostar por dicho CMS para facilitar el proceso sin tener que elaborar la web desde cero.

Una vez eliges a WordPress como opción para crear tu web, lo siguiente es seleccionar un tema, y es aquí donde entra en juego la opción de Divi. Con esto claro, comienzas a crear tu web y, más o menos, consigues el resultado deseado, pero con unos pequeños matices que no logras sacarte de la cabeza y que la solución escogida de WordPress + Divi no es capaz de satisfacer de manera nativa y sencilla.

Es aquí donde la solución 💡de crear un tema hijo cobra una vital importancia, ya que éste va a permitirte personalizar múltiples aspectos que de otra manera no serías capaz de abordar. Seguramente te estés preguntando, ¿estas personalizaciones podría hacerlas sobre el tema padre directamente? La respuesta es sí, pero en el momento que actualices el tema, perderás dichas personalizaciones 🤯 y, por supuesto, no puedes dejar de aplicar las actualizaciones, ya que son necesarias para corregir fallos, añadir mejoras o corregir problemas de seguridad. Por tanto, la solución es la creación de un tema hijo que extienda las funcionalidades del tema padre y permita añadir personalizaciones que no se pierdan tras un proceso de actualización.

NOTA: El crear un tema hijo es algo muy habitual en el mundo de WordPress y quiero dejar claro que no es algo exclusivo de un tema como Divi. Independientemente del tema elegido, siempre podrás crear tu propio tema hijo 😉

¿Cómo crear un tema hijo para Divi?

Vamos a meternos en faena, para crear tu tema hijo de Divi vas a necesitar lo siguiente:

1. Tema Divi original instalado y activado
2. Editor de texto. Hay muchísimos, pero uno que uso habitualmente y es gratuito es Notepad++
3. Acceso FTP. Accediendo vía FTP a tu alojamiento web podrás editar ficheros y subirlos fácilmente, para ello puedes utilizar el gestor que incluya tu proveedor de hosting u otros programas como Filezilla
4. Tema hijo. La estructura del tema hijo básica consiste en una carpeta que contenga:

• Archivo functions.php

• Imagen screenshot.jpg

• Archivo style.css

Como podrás comprobar, los tres primeros puntos no tienen mucho misterio para cualquiera que esté familiarizado con el mundo web, por lo que voy a detallar el punto 4.

• Archivo «functions.php» con el siguiente contenido:

• Imagen llamada screenshot – La extensión puede ser tanto .jpg como, por ejemplo, .png, pero si es importante el nombre, ya que WordPress lo va a mostrar automáticamente dentro de Apariencia-> Temas. El tamaño recomendado es 1200x900px, aunque yo personalmente utilizo unas dimensiones de 650x400px y se visualiza perfectamente.

• Archivo «style.css» con el siguiente contenido:

Instalación del tema hijo

Una vez dispones de la carpeta y los tres archivos dentro de ella, procede a comprimirla en .zip 🗜️

Con el archivo resultante en zip, dirígete a Apariencia-> Temas y haz clic en el botón de arriba para «Añadir nuevo»

En este punto me parece buena idea dejarte mi propio tema hijo para que lo descargues y puedas utilizarlo en tu web de manera rápida y sencilla (siempre que utilices Divi como tema). Puedes descargarlo pinchando en este enlace 👍

Tras subir el tema hijo en formato zip e instalarlo/activarlo verás algo como lo siguiente:

¡Listo! Ahora ya puedes editar estilos y añadir funcionalidades en los ficheros style.css y functions.php respectivamente.

Conclusión

Espero haberte ayudado a crear tu propio tema hijo para Divi y que puedas realizar los cambios que desees sin perderlos cuando actualices el tema principal Divi.

Como irás descubriendo, hemos rascado la superficie, ya que utilizando un tema hijo podrás añadir multitud de funciones y mejoras a tu web en WordPress o sobrescribir funcionalidades del tema padre.

Si necesitas ayuda con la personalización de tu web o creando un tema hijo, no dudes en contactarnos.

Cualquier duda, como siempre, en los comentarios 📝

¡Hasta la próxima!