Antes de ponerte a modificar una plantilla de WordPress para adaptarla a tus necesidades, sería interesante que crearas un child theme o plantilla hija de la plantilla que vas a utilizar.
En esta entrada te explico qué son los child themes, que ventajas tienen y cómo puedes crear uno de forma sencilla.
Qué es y qué ventajas tiene un child theme
Un child theme es una plantilla vacía llamada hija que hereda las características, el diseño y la funcionalidad de otra plantilla completa llamada padre.
Básicamente, la idea es hacer una “copia” de la plantilla que vas a utilizar en tu blog y realizar tus modificaciones sobre dicha copia en lugar de sobre la plantilla original.
La principal ventaja de hacer esto es que puedes modificar el diseño o añadir nuevas funcionalidades a la plantilla hija sin miedo a perderlas en futuras actualizaciones de la plantilla padre.
Por lo tanto, se puede decir que los child themes son una forma segura de realizar cambios en las plantillas sin que estos sean borrados por futuras actualizaciones de las mismas.
Cómo crear un child theme
1 – Accede por FTP al servidor donde tengas instalado WordPress y dirígete a la carpeta /wp-content/themes donde se encuentran todas las plantillas de tu blog.
2 – Crea una carpeta con el nombre que quieras para tu child theme. Por ejemplo, yo voy a hacer un child theme de la plantilla Twenty Twelve que viene por defecto con WordPress, por lo tanto creo una carpeta en /wp-content/themes llamada twentytwelve-childtheme.
3 – Crea un archivo llamado style.css dentro de la carpeta que acabas de crear.
4 – Modifica el archivo style.css que acabas de crear para que tenga un aspecto similar al siguiente:
/*
Theme Name: Twenty Twelve Child Theme
Theme URI: https://elrespondon.com
Description: Twenty Twelve Child Theme
Author: Jose Ramon Belando
Author url: https://elrespondon.com
Template: twentytwelve
Version: 1.0
*/
@import url('../twentytwelve/style.css');Las líneas importantes son:
- Template: Aquí tienes que poner el nombre exacto de la carpeta de tu plantilla padre. En mi caso la carpeta de mi plantilla padre se llama twentytwelve tal y como puedes observar en la imagen del punto 2. En tu caso debes sustituir twentytwelve por el nombre de la carpeta de tu plantilla padre.
- @import url(‘../twentytwelve/style.css’); Aquí tienes que poner la ruta donde se encuentra el archivo style.css de tu plantilla padre. En mi caso dicho archivo se encuentra en la ruta: ../twentytwelve/style.css. En tu caso debes sustituir twentytwelve por el nombre de la carpeta de tu plantilla padre.
Si no configuras estas dos líneas de forma correcta, el child theme no aparecerá en tu panel de control de WordPress y probablemente te muestre el siguiente error:
Temas dañados Los siguientes temas están instalados pero incompletos. Los temas deben tener una hoja de estilos y una plantilla. Nombre: Twenty Twelve Child Theme Descripción: No encontramos el tema principal. Por favor, instala el tema principal “twentytwelve”.
El resto de líneas del archivo style.css (theme name, theme URI, description, author, author url y versión) son opcionales y puedes modificarlas para poner en ellas información relacionada con tu página.
5 – Accede al panel de control de WordPress y dirígete al apartado Apariencia -> Temas, donde podrás observar que ya aparece el child theme que acabas de crear. Actívalo y a partir de ese momento tu blog empezará a funcionar con él.
Cómo modificar el aspecto o añadir nueva funcionalidad a un child theme recién creado
1 – Modificar el aspecto de la plantilla. Para modificar el aspecto de la plantilla de tu blog, simplemente tienes que añadir el código CSS que corresponda al archivo style.css que has creado en el apartado anterior.
Por ejemplo, si quisieras cambiar el color de todos los enlaces de la plantilla de tu blog para ponerlos de color verde, simplemente tendrías que añadir el siguiente código CSS al archivo styte.css de tu child theme:
a { color: #00FF00; }Condición: Los estilos que añadas al archivo style.css del child theme o plantilla hija sobrescribirán a los estilos existentes en el archivo style.css de la plantilla padre. Es decir, primero se aplican los estilos que definas en la plantilla hija y posteriormente se aplican el resto de estilos de la plantilla padre.
2 – Modificar archivos PHP de la plantilla. Para modificar los archivos PHP de la plantilla de tu blog, simplemente tienes que copiar el archivo PHP que quieras modificar de la carpeta de la plantilla padre a la carpeta de la plantilla hija. Una vez copiado, puedes modificar el archivo según tus necesidades.
Por ejemplo, para insertar el código de Google Analytics directamente en el código fuente de tu blog, tendrías que copiar el archivo header.php de la carpeta de la plantilla padre a la carpeta de la plantilla hija y posteriormente insertar el código de Google Analytics antes de la etiqueta </head> de dicho archivo. En mi caso, tendría que copiar header.php de /wp-content/themes/twentytwelve a /wp-content/themes/twentytwelve-childtheme.
Es importante tener en cuenta aquí que debes seguir la estructura de carpetas del tema padre. Es decir, si el archivo header.php de la plantilla padre hubiera estado en /wp-content/themes/twentytwelve/carpetaX, tendría que haberlo copiado a /wp-content/themes/twentytwelve-childtheme/carpetaX.
Condición: Los archivos PHP que copies al child theme o plantilla hija sustituirán por completo a los archivos con el mismo nombre de la plantilla padre. Por eso en este caso, a diferencia del anterior, hay que copiar los archivos completos de la plantilla padre a la plantilla hija y posteriormente modificarlos.
3 – Añadir nueva funcionalidad a la plantilla. Para modificar las funciones de la plantilla de tu blog, simplemente tienes que crear un nuevo archivo functions.php y añadir en él las nuevas funciones que necesites.
Por ejemplo, para para insertar el código de Google Analytics a través del archivo functions.php del blog, tendrías que crear un nuevo archivo llamado functions.php en la carpeta del child theme y añadirle el código correspondiente. En mi caso, tendría que crear un archivo llamado functions.php dentro de la carpeta /wp-content/themes/twentytwelve-childtheme y añadirle el siguiente código:
<?php
add_action('wp_head', 'googleanalytics');
function googleanalytics() { ?>
// Reemplazar esta línea con tu código de Google Analytics
<?php } ?>Condición: Las funciones que añadas al archivo functions.php del child theme o plantilla hija ampliarán la funcionalidad del archivo functions.php de la plantilla padre. Es decir, en este caso no hace falta copiar el archivo functions.php entero, sino solamente colocar en él las nuevas funciones que quieras tener disponibles en tu blog.
Si quieres ampliar información sobre este tema, te recomiendo que consultes la guía oficial sobre child themes en WordPress: Child Themes WordPress