Si trabajas habitualmente con WordPress, seguramente conozcas el tema Divi (ver página oficial), uno de los más famosos de la plataforma. Si no es así te lo recomiendo altamente. Es fácil de configurar. Además de poder personalizarlo fácilmente y hasta límites insospechados si controlas CSS. Si lo que quieres es contar con una web con diseño personalizado, podrás usar la base de este tema pero creando un tema hijo para Divi ( Divi Child ): de esta manera estarás protegiendo tus modificaciones en caso de que haya una actualización del tema. En este post voy a explicarte cómo hacerlo y a proteger tu código personalizado.
Además puedes descargar el tema hijo que ya he creado para que puedas utilizarlo en tus proyectos. Haz click en el enlace que está en la esquina superior derecho. Aquí te explico como hacerlo.
¿Por qué necesitas un tema hijo para Divi?
Divi, como el resto de temas de WordPress, va teniendo actualizaciones cada poco tiempo para adaptarse a las faltas de seguridad y a las actualizaciones del sistema. El caso es que si realizas personalizaciones en la plantilla original del tema, cada vez que haya una de esas actualizaciones perderás todos los cambios: un tema child o hijo es la solución a ese problema.
Por lo tanto, en lugar de modificar directamente los archivos de temas de Divi, debes crear archivos de temas adicionales dentro de un tema secundario para que cuando se actualice el original, esos archivos de temas secundarios permanezcan sin cambios. Así que si tu plan es realizar personalizaciones avanzadas para el tema, como modificar plantillas de página o agregar grandes cantidades de CSS -cambios importantes en el diseño- y JavaScript -agregar nuevas funciones- es mejor hacer estos cambios al tema de su hijo sin tener que tocar los archivos de tema padre.
No solo Divi te ofrece esta posibilidad. Cada vez que necesites realizar modificaciones en cualquier tema de WordPress, es bueno saber que existe la posibilidad de crear un tema secundario que herede el diseño y la funcionalidad de ese tema principal. De esta manera estarás preservando tu trabajo ante cualquier actualización.
Beneficios de utilizar un tema hijo para Divi
Además del beneficio que ya te hemos explicado, el del mantenimiento de las personalizaciones ante cualquier actualización del tema original, con un tema hijo también supondrá:
- Una mejor organización del código personalizado y del CSS en un solo lugar.
- Se facilita la colaboración con otros desarrolladores.
- Protección del código personalizado de miradas ajenas al desarrollador, como por ejemplo otros usuarios que tengan acceso al backffice.
- Poco a poco irás construyendo un tema hijo con funciones y código que podrás reutilizar en otros sitios webs.
¿Puedo utilizar Divi sin ese tema hijo?
Sí, puedes utilizar Divi igual que utilizas otros temas de WordPress. Además debes tener en cuenta que esta plantilla te permite agregar CSS y códigos personalizados en lugares como Divi Builder, Theme Customizer y Apariancias / Personalización / Código CSS adicionas de WordPress. De hecho, Divi incluso ha mejorado la edición de código para este fin. Y este código se conserva al actualizar el tema Divi. Por lo tanto, hay un argumento para hacer que un tema secundario sea innecesario si el usuario solo va a hacer modificaciones menores. Además, Divi minimiza automáticamente y guarda en caché un archivo CSS estático para que no haya problemas con la velocidad de carga de la página.
¿Qué necesitas para crear un tema hijo para Divi?
Para crear tu propio tema Divi hijo necesitarás:
- Tener el tema Divi instalado y activado.
- Tener y saber utilizar un editor de textos. Te recomiendo Sublimetext o Brackets. –
- Utilizar un cliente FTP, como Filezilla, para poder acceder a los archivos (aunque podrás trabajar en tu ordenador y después subirlo comprimido).
- Conocimientos de CSS, JavaScript y .php básicos.
- Además, debes de tener en cuenta que el tema secundario debería constar de:
- Un directorio de tema secundario (o carpeta). Al igual que todos los temas, la carpeta de tema de su hijo existirá dentro de la carpeta wp-themes que contendrá los archivos de tema de hijo.
- Un archivo style.css (que se usará para almacenar el tema CSS de su hijo)
- Un archivo functions.php: este archivo contendrá la acción wp_enqueue_scripts que enrutará la hoja de estilo del tema principal
¿Cómo crear un tema hijo para Divi?
Para crear un tema Divi Child deberás seguir estos pasos:
1. Crear la carpeta del tema hijo en la carpeta de temas.
Hay dos maneras de agregar tus archivos de temas secundarios a WordPress. Puedes agregar la carpeta de temas secundarios a los archivos de temas de WordPress directamente (a través de FTP o localmente). O puedes crear una carpeta fuera de WordPress para luego volver a cargarla y subirla a WordPress como un nuevo tema.
Ruta para instalar tu tema hijo
Para crear una nueva carpeta para el tema hijo directamente en WordPress, deberás acceder a los archivos del tema ubicados en la carpeta wp-content / themes. Luego crea una nueva carpeta dentro de la carpeta de temas y dale el nombre divi-hijo. Entonces, el nuevo directorio de temas hijo será wp-content / themes /divi-hijo.
2. Crear Style.css para agregar CSS personalizado
Utiliza un editor de texto para crear un archivo dentro de la nueva carpeta de temas llamado style.css. El nombre debe ser exactamente este.
Luego utilizaremos el editor de texto para añadir este código dentro de style.css
|
1 2 3 4 5 6 7 8 9 10 |
/* Theme Name: divi-hijo Version: 1.0 Description: Tema hijo Divi Author: Anto Fernandez /* Cambialo por tu nombre*/ Author URI: https://www.antofernandez.com Template: Divi */ /* Tu código CSS a partir de aquí */ |
Debes asegurarte de que el parámetro Template identifique correctamente el nombre del directorio de su tema principal que es «Divi». El tema Nombre, URI, Descripción y Autor son totalmente personales. Puedes personalizar esta información de encabezado para adaptarse a tus necesidades.
3 – Crea tus funciones.php para poner en cola tu hoja de estilo temática principal
Para hacer esto, necesitaremos usar nuestro editor de texto para crear otro archivo dentro de la carpeta del tema secundario. Guarda el archivo con el nombre functions.php (el nombre debe ser exactamente esto) y luego agregue el siguiente código en el archivo:
|
1 2 3 4 5 6 7 |
<?php function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . 'https://antofernandez.b-cdn.net/style.css' ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?> |
Enqueue significa «agregar a una cola», por lo que en este caso estamos agregando la hoja de estilo principal que se pondrá en cola antes de la hoja de estilo del tema secundario. En otras palabras, todo lo que agreguemos a nuestra hoja de estilo de tema child se agregará y reemplazará al tema principal.
*Este código es específico de Divi y es una versión modificada del método propuesto por WordPress Codex.
4 – Crea una miniatura para tu tema Divi hijo (opcional)
WordPress te permite proporcionar una miniatura para servir como una captura de pantalla de tema o una imagen de marca para su tema al verlo en el tablero de WordPress.
Para crearla primero tienes que hacer una imagen (WP recomienda un tamaño de 1200px de ancho por 900 px de alto) y guardarla con el nombre de archivo screenshot.png (el nombre de archivo debe ser exactamente así para que WP lo reconozca). A continuación, agrégalo a la carpeta del tema secundario junto a los dos archivos que ya están allí.
Sube y activa tu tema Divi Child
Una vez que hayas creado la carpeta de temas secundarios, el archivo style.css y el archivo functions.php, el tema secundario estará listo para su carga y activación.
En este punto, asegúrate de que el tema Divi ha sido cargado para que tu tema child funcione después de la activación. Todo lo que necesitas hacer es ir al panel de WordPress y navegar a Apariencia / Tema, desplazar el cursor sobre el tema hijo y haga clic en el botón Activar (igual que harías para cambiar de una plantilla a otra).
Gracias que buen tema