Este es el primer artículo que escribo sobre un Theme Premium de WordPress. Se trata de crear tema hijo o Divi Child Theme del tema más conocido de Elegant Themes. Esa plantilla es la que estoy utilizando en este blog y sobre el que voy aprendiendo cosas nuevas cada día para poder ir personalizándolo a mi gusto y que os contaré poco a poco.

Para empezar a modificar una plantilla de wordpress siempre se recomienda crear un tema hijo o Child Theme sobre el que realizar los cambios que queremos aplicar sobre la plantilla principal para que nuestros cambios no se vean afectados por las actualizaciones que podamos tener de esa plantilla principal.

Qué necesitamos

Crear un Child Theme es muy sencillo. Lo más básico es solo un archivo:

  • style.css: La hoja de estilos que contendrá los cambios que queremos modificar.

El contenido de la hoja de estilos debe ser el siguiente:

/*
Theme Name: Divi-child
Theme URI: https://www.javierrguez.com
Version: 1.0
Description: Tema hijo de Divi para hacer cambios que modifiquen el aspecto del tema padre sin que los perdamos cuando el tema padre tenga actualizaciones
Author: Javier
Author URI: https://www.javierrguez.com
Template: Divi
*/

@import url("../Divi/style.css");

/*---- A partir de aquí añadimos las modificaciones que queremos hacer sobre el tema padre -----*/

Lo principal que debemos de tener en cuenta sobre este archivo es lo siguiente:

  • Theme Name: Es el nombre que le daremos a nuestra plantilla. Podemos poner lo que queramos.
  • Template: Este debe coincidir exactamente con el nombre de la plantilla padre. Sino, nos dará un error una vez instalada diciéndonos que no encuentra la plantilla padre.
  • Import url: Aquí deberemos indicar la ruta de la hoja de estilos del tema padre para que reemplace los estilos que aquí definamos sobre los que tenga, y añadir los nuevos que necesitemos.

Cómo empaquetamos nuestra plantilla

Con esos valores definidos, copiamos nuestro fichero style.css dentro de una carpeta, la comprimimos en zip y la subimos a nuestro WordPress para instalar nuestra plantilla. Después solo tendremos que activarla y las modificaciones que incluyamos en su hoja de estilos serán sustituidas por las del tema padre.

Divi-Child-ElegantThemes

Tema hijo y tema padre

En la imagen anterior podéis apreciar que ya tengo el tema hijo activado y que tengo una actualización pendiente de aplicar sobre el tema padre. Esto me garantizará que las modificaciones que haya realizado sobre el tema hijo no las pierda nunca.

Qué otras configuraciones podemos realizar

También podemos añadir otros ficheros, como:

  • Screenshot: Es la imagen que representará nuestro tema en la pantalla de ajustes.
  • functions.php: Tendrá las funciones que necesitemos sobre nuestro tema. Podrán ser nuevas o las del tema padre modificadas.
  • header.php: Es el fichero que construye la cabecera de nuestra web. Debería ser una copia del tema padre pero con nuestras modificaciones.
  • sidebar.php: Es el fichero que construye el menú lateral de nuestra web. Debería ser una copia del tema padre pero con nuestras modificaciones.
  • footer.php: Es el fichero que construye el pie de nuestra web. Debería ser una copia del tema padre pero con nuestras modificaciones.

Los ficheros no reemplazan el contenido del fichero padre. Es decir, no sobreescribe lo que definamos en estos ficheros nuevos, sino que reemplaza por completo lo que ahí incluyamos por lo que tenga ese fichero en el tema padre. Por ejemplo, si en el footer solo queremos modificar la firma, deberemos copiar todo el contenido del footer.php del tema padre sobre el fichero footer.php del tema hijo y sobre este último realizar las modificaciones oportunas.

Y eso es todo. Con solo estas pequeñas cosas seremos capaces de crear un tema hijo sin problemas y adaptarlo a nuestras necesidades.

Ahora una recomendación sobre la carga de la hoja de estilos.

Optimiza la carga de la hoja de estilos

Otra forma más eficiente que podéis utilizar para la carga del archivo de estilos, es realizar la llamada desde el fichero functions.php mediante el siguiente código:

wp_enqueue_style('nombre-carpeta-tema-hijo'
      , get_stylesheet_directory_uri() .'/style.css'
      , array('nombre-plantilla-padre')); 

Y poco más que saber sobre el uso de las plantillas hijas. Las ventajas son enormes y no deberías encontrar problema alguno para seguir modificando los ficheros de la plantilla original y empezar a trabajar de esta manera.

Guardar

Guardar

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este.

Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20% de descuento en algunos casos.

AfiliadosDivi

Guardar

Guardar

Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!