Hoy vamos a analizar una manera de personalizar plantillas en Wordpress que no está muy popularizada, pero es sumamente útil y fácil de implementar. Vamos a sumergirnos en los Temas Hijo.
¿Qué es un Child Theme?
Un Child Theme o Tema Hijo es una versión modificada a gusto de un tema de Wordpress, que funciona apoyándose en este último.
Cuando elegís un tema completo y robusto de Wordpress sobre el que te gusta trabajar y lo usás para crear un Child Theme, vas a poder hacer cambios de todo tipo a la hoja de estilos (CSS), sumarle líneas al archivo functions.php o ir mucho más allá y modificar los archivos PHP del template.
Así, creás una versión totalmente customizada de tu tema favorito, pero sin modificar nunca los archivos del tema original. Tu Tema Hijo hereda todas las funcionalidades, características y el código del tema padre, pero cada detalle que modifiques queda en el Child Theme. El tema padre no se ve afectado, facilitándote, por ejemplo, cada nueva actualización.
Creemos un Child Theme
Crear un Tema Hijo es mucho más sencillo de lo que se cree.
En este ejemplo vamos a trabajar con el tema Vantage, uno de los más populares de Wordpress.
Vamos a Apariencia -> Temas y haciendo click en el botón Añadir nuevo lo buscamos por nombre y lo instalamos.
Ya lo tenemos entre nuestros temas locales, listado junto a los demás dentro de la carpeta wp-content/themes de nuestra instalación.
Ahora así, arrancamos con la creación y activación del Child Theme. Para eso, nos conectamos por FTP y nos dirigimos a la carpeta ‘themes’ que acabamos de mencionar.
Vamos a crear una carpeta nueva, que se va a llamar ‘vantage-child’.
Ahora, vamos a crear un archivo llamado style.css con la siguiente información:
/*
Theme Name: Vantage Child Theme
Theme URI: https://duplika.com
Description: Esto es un Child Theme de Vantage
Author: Débora Orué
Author URI: http://deboraorue.com
Template: vantage
Version: 0.1
*/
@import url("../vantage/style.css");
/* =Aquí comienza la personalización del tema
------------------------------------------------------- */
El nombre que asignes al Tema Hijo (Theme Name) es el que luego va a aparecer en tu pantalla de Temas para identificarlo.
La parte más importante de este archivo está en Template y @import. Tenés que tener sumo cuidado de respetar mayúsculas y minúsculas al llamar los temas. En nuestro ejemplo no hay mayores problemas, porque elegimos un tema que sólo se escribe en minúsculas. Si, en cambio, la carpeta que lo contiene se llamara ‘Vantage’, entonces deberíamos aclararlo en Template y en @import.
Nos quedaría:
Template: Vantage */ @import url(“../Vantage/style.css”);
Asegurate, también, de incluir la ruta correcta en @import al archivo style.css del tema padre.
Con el archivo listo, guardamos y lo subimos a la carpeta /themes/vantage-child/.
Ahora, vamos a Apariencia -> Temas, donde el tema Vantage Child Theme nos aparece listado, con la información que le cargamos y la aclaración de que se trata de un tema hijo. Será sólo cuestión de presionar el botón Activar para empezar a usarlo.
Ahora, ¡a personalizarlo!
Si le das F5 a tu sitio, vas a ver que con el tema hijo Vantage Child Theme se ve exactamente igual que antes.
Llegó el momento entonces de comenzar a personalizarlo. Volvemos a style.css y establecemos ahí todos los cambios que necesitamos, ubicándolos debajo de la línea @import.
Por ejemplo, podemos cambiar el color de los links si escribimos:
/*
Theme Name: Vantage Child Theme
Theme URI: https://duplika.com
Description: Esto es un Child Theme de Vantage
Author: Débora Orué
Author URI: http://deboraorue.com
Template: vantage
Version: 0.1
*/
@import url("../vantage/style.css");
/* =Aquí comienza la personalización del tema
------------------------------------------------------- */
/* Links */
a {
color: #D63CCE;
}
a:hover,
a:focus,
a:active {
color: #f47e3c;
}
Fácil, ¿no?
Y no tenemos por qué limitarnos a la hoja de estilos. Nuestro Child Theme adopta todas las funcionalidades del tema padre. Pero si necesitáramos agregar nuevas, creamos un nuevo archivo functions.php dentro de la carpeta del Tema Hijo.
Nos aseguramos de incluir las etiquetas de apertura y cierre y, en el medio, incluimos el código que necesitemos.
<?php // Acá va nuestro código ?>
Este archivo functions.php va a cargar justo antes que el del tema padre.
Y podemos ir más profundo todavía. Por ejemplo, podemos customizar alguno de los archivos estructurales del template.
A lo mejor no nos gusta el footer del tema padre. Entonces, lo que debemos hacer es copiar el archivo footer.php, ubicado en la carpeta /parts/ del tema original, a la carpeta de nuestro Tema Hijo. Una vez allí, realizamos todas las modificaciones que deseemos.
Cuando el sitio cargue, Wordpress va a saber que tiene que mostrar sólo la versión que aparece en la carpeta ‘vantage-child’.
¿Necesito un Child Theme?
Como habrás visto, no es nada complejo poner a funcionar un Tema Hijo. Pero, antes de hacerlo, pregúntate si realmente lo necesitas.
Precisás un Child Theme si:
- Constantemente estás agregándole funciones nuevas al archivo functions.php de tu tema
- Todo el tiempo estás agregando o modificando características del archivo style.css
En cambio, no precisás un Tema Hijo si:
- Los cambios que vas a hacer son mínimos
- Los cambios que vas a hacer son inmensos
Si vas a hacer solamente un par de cambios chicos, entonces podés hacer un archivo custom-style.css o usar un plugin.
Si, por el contrario, vas a ponerte a tocar toda la estructura del template, estás mucho más allá de un Child Theme y te conviene más ponerte a crear un tema personalizado.
Los Temas Hijo de Wordpress son fáciles de aplicar y muy útiles para poder actualizar rápidamente tus temas sin perjudicar tus personalizaciones.
Deja un comentario