Puede que con las últimas mejoras de WordPress, permitiendo añadir CSS a la base de datos para realizar cambios visuales en tu tema, o utilizando plugins para modificar algún contenido, no necesites crear y configurar un tema hijo en tu sitio. Pero hay situaciones en los que no quedará más remedio que tener uno.
La importancia de crear un tema hijo en WordPress
Nunca llueve a gusto de todos, y esa plantilla o tema que elegimos o compramos en su día, resulta que no se adapta en su totalidad a lo que queríamos.
Podemos contratar, pedir o realizar nosotros mismos los cambios del tema modificando los archivos originales, dejando todo, como se suele decir, "niquelado".
Pero pasado un tiempo, y debido a los cambios en seguridad, arreglos de fallos o cambio en la versión de WordPress, los temas tienen que actualizarse, y si no realizamos la actualización pondremos en peligro nuestra web.
Las actualizaciones son mejoras y adaptaciones a los últimos cambios, y hay que realizarlas siempre, sí o sí.
El "codex" de WordPress aconseja crear y configurar un tema hijo desde el principio si vamos a realizar algún cambio importante, por pequeño que sea.
El tema hijo o child theme de WordPress no sustituye al tema padre, sino que adquiere su funcionalidad, permitiendo realizar cambios de forma segura y fácil de aspectos y funciones puntuales, haciéndolos prevalecer sobre el tema padre, y manteniendo intacto el resto de aspectos del tema principal.
Para ofrecer una imagen gráfica a modo de ejemplo, imagina un dibujo sobre el que pones un papel transparente para colorearlo. Todo el mundo verá el dibujo coloreado, pero el original se mantendrá intacto dejando ver las partes que no se han coloreado.
Plugins de terceros para realizar cambios
Hoy día existen plugins para casi cualquier cosa que necesites y toda mejora que realicemos de cara al usuario final es buena, pero tenemos que asumir una serie de riesgos y condiciones.
Los plugins son complementos adicionales al tema, por consiguiente, añaden código que no conocemos y que pueden perjudicarnos en muchos factores, como la velocidad de carga o la compatibilidad entre varios complementos creados por otros desarrolladores.
Existen plugins que añaden código y plugins que modifican código, con estos últimos son con los que hay que tener más precaución a la hora de utilizarlos.
La famosa pantalla en blanco suele ser por el fallo de algún plugin o tema desactualizado.
Al instalar un plugin tenemos que fijarnos en la popularidad que tiene, las veces que se ha instalado, los comentarios y, sobre todo, si tiene soporte.
Si un plugin lleva más de 6 meses sin ser actualizado, aunque funcione al momento de activarlo, a largo plazo nos acabará dando dolores de cabeza si no dispone de un soporte que lo adapte a los cambios de WordPress.
Con un tema hijo creamos una zona segura que no será afectada por las actualizaciones futuras del tema y con el que nos aseguramos que los cambios que hagamos no desaparecerán.
El tema hijo actúa sobre una copia de los archivos del tema principal, por lo que no alteramos el código inicial y siempre podremos revertir los cambios si deseamos dejar de usar un tema hijo.
De esta forma evitamos estar pendientes de los plugins que hayamos podido utilizar para cambiar aspectos de la web, que si no tienen soporte es muy posible que dejen de funcionar y sean más un problema que una solución.
Cómo crear y configurar un tema hijo o child theme
El tema hijo puede estar compuesto por diferentes archivos, y dependiendo de lo que necesitemos modificar podrá tener más o menos archivos.
Pero para empezar, antes de realizar ningún cambio, vamos a crear la base del tema hijo, y esto lo podemos hacer de dos formas, automatizado con un plugin o de forma manual con un editor de texto o código.
Crear tema hijo con un editor de texto
Primero vamos a ver cómo está compuesto un tema hijo básico válido para cualquier tema de WordPress.
Los archivos fundamentales son los denominados style.css, cuya cabecera indica a la web que estamos utilizando un tema hijo, y functios.php, que se encargará de añadir o modificar funciones importantes si lo necesitamos.
Si queremos añadir una imagen que identifique al tema hijo en la administración de WordPress, podemos añadir un archivo en formato PNG que renombraremos como screenshot.png, con un tamaño recomendado de 1200x900 px.
Todos estos archivos los guardaremos en una misma carpeta para poder disfrutar de un child theme que complemente al tema principal.
El nombre de la carpeta del tema hijo (Ej: Tutema-hijo), puede ser cualquiera nombre, pero sin signos de puntuación ni caracteres especiales. Si son varias palabras, deben estar separadas por guiones.
Configuración del archivo style.css
Aunque se puede hacer con cualquier editor de texto, estos podrían añadir caracteres o cambios de formato a la hora de guardarlos, por lo que recomiendo utilizar un editor de código, que funcionan igual que un editor de textos pero asegurándonos que el archio se guardará correctamente.
Yo uso Brackets, un editor de código muy sencillo y gratuito disponible para Windows y Mac.
Abrimos un documento nuevo con cualquier editor de texto y añadimos la cabecera del archivo style.css, (según está explicado en la web de WordPress), que son unas líneas comentadas con los símbolos "/* - */" al principio y al final.
Los datos a continuación son los más utilizados, pero si no vamos a comercializar el tema hijo, y es sólo para uso personal, no es necesario rellenar todos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Theme Name: (Nombre que le damos al tema hijo) Theme URI: (Dirección URL del sitio oficial del tema padre o del tema hijo, si existe) Template: (Nombre del tema padre tal cual aparece en la carpeta "wp-content") Author: (Persona, empresa o entidad que crea el tema hijo) Author URI: (Dirección web del autor) License: (Determinar la licencia para su utilización, pública o no) License URI: (Url donde se encuentra el texto que describe el tipo de licencia) Description: (Una pequeña descripción personal sobre el tema hijo) Tags: (Etiquetas que puedan identificarse con el tema hijo) Version: (Número de versión o actualización del tema hijo) Updated: (Fecha y hora de creación o actualización del tema hijo) */ /*---------- Personalización tu tema a partir de aquí ----------*/ |
De todos los datos, los únicos que hay que respetar y rellenar correctamente son Theme Name y Template. El resto pueden quedarse en blanco si no vamos a comercializarlo.
Vamos a poner de ejemplo la creación de un tema hijo basado en el tema Divi, quedaría así:
|
1 2 3 4 5 6 7 8 9 10 |
/* Theme Name: Divi Hijo Theme URI: http://www.elegantthemes.com Template: Divi Author: Ingresosviaweb Author URI: https://www.ingresosviaweb.com Description: Tema hijo del tema Divi para realizar modificaciones Version: 1.0 */ /*---------- Personalización tu tema a partir de aquí ----------*/ |
Guardamos el archivo con el nombre style y le cambiamos la extensión por .css
Antiguamente se añadía una línea de código con la función @import para activar los estilos del tema padre, pero desde hace ya algún tiempo esta práctica está en desuso y la activación de los estilos se realiza desde el archivo functions.php, mucho más ágil y recomendado para la carga de la web.
Configuración del archivo functions.php
Abrimos un nuevo documento con el editor de texto y añadimos el siguiente contenido:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php // Salir si se accede de forma directa if ( !defined( 'ABSPATH' ) ) exit; // INICIO DE LA ACCION DEL TEMA PADRE // No modificar ni eliminar los marcadores de comentarios: if ( !function_exists( 'chld_thm_cfg_locale_css' ) ): function chld_thm_cfg_locale_css( $uri ){ if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) ) $uri = get_template_directory_uri() . '/rtl.css'; return $uri; } endif; add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' ); if ( !function_exists( 'chld_thm_cfg_parent_css' ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) ); } endif; add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 ); // FIN DE LA ACCIÓN DEL TEMA PADRE //----- Personalización tus funciones a partir de aquí ----- |
Guardamos el nuevo archivo renombrándolo como functions y con la extensión .php
La acción que hemos insertado y que no debemos borrar, activa el archivo style.css del tema padre y lo combina con el del tema hijo que hayamos añadido a ese archivo.
Configurar la imagen del tema hijo
Este archivo no es necesario, pero conseguiremos mostrar una imagen propia en el apartado de Temas de WordPress, pudiendo localizar el tema hijo de una simple mirada.
Podemos utilizar cualquier editor de imágenes, el que venga con vuestro ordenador o alguno gratuito y online como Pixlreditor.
El tamaño aconsejado por WordPress es de 1200x900 px.
La única condición es guardar el archivo con el nombre screenshot y la extensión .png, el diseño o contenido de la imagen es de tu elección.
Subir un tema hijo al servidor
Lo más habitual sería acceder a los archivos del servidor a través del "Administrador de archivos" y colocar la carpeta del tema hijo en la dirección "wp-content/themes/".
Una forma totalmente legítima y válida, pero que depende de acceder al servidor y al cPanel para colocar los archivos en su sitio.
También podemos utilizar un cliente FTP, como pude ser Filezilla, para colocar el tema hijo en su sitio correspondiente
Tan sólo tendríamos que configurarlo para que conectara con nuestro servidor, lo que requiere, sino lo usamos habitualmente, conocer los datos de conexión con el servidor.
Una vez con los archivos en su sitio, accedemos a la administración de WordPress y lo activamos.
Más fácil todavía
Para los que no están familiarizados con la gestión de un servidor, o no tiene acceso, hay un proceso muy sencillo con el que no tendremos que entrar en el hosting.
Podemos comprimir la carpeta en un archivo .zip e instalarlo como si fuera un tema nuevo. Vamos a Temas>Añadir Nuevo>Subir tema y realizamos el proceso de instalación habitual desde la administración de WordPress.
Una vez instalado el tema hijo, lo activamos. El tema padre se desactivará, pero tiene que estar instalado para que funcione el tema hijo. NO LO BORRÉIS.
Modificar archivos de la plantilla desde el tema hijo
Para poder modificar el código de los archivos del tema padre, sin que se vea afectado el original, tenemos que realizar una copia de dicho archivo en la carpeta del tema hijo.
Por ejemplo, si queremos modificar los créditos de WordPress que aparecen al pie de la web, realizaremos una copia del archivo footer.php y la pegaremos o moveremos a la carpeta del tema hijo.
Al modificar el archivo que hemos colocado en la carpeta del tema hijo, se aplicarán los cambios en la web, manteniendo el archivo original intacto y con la opción de no perder los cambios con las futuras actualizaciones.
Crear un tema hijo con plugins
En este apartado podemos utilizar un plugin de los que llamo "de usar y tirar". Estos plugins dejan de ser funcionales una vez que hemos realizado el trabajo que necesitábamos y deben ser eliminados de nuestra página web de WordPress .
Con "Child Theme Configurator", de forma automática, podemos crear y configurar un tema hijo en un abrir y cerrar de ojos.
Esta opción es muy válida para la mayoría de la gente que no quiera o desee editar sus propios archivos, pero hay que tener presente que la utilización de cualquier plugin, aunque los eliminemos después de utilizarlos, van dejando cierta basura residual en la base de datos.
Estos residuos no son importantes ni afectarán significativamente al rendimiento del sitio, a no ser que abusemos de esta práctica habitualmente.
Instalación del plugin
La instalación de "Child Theme Configurator" se realiza igual que cualquier otro plugin.
Al activar el plugin aparecerá un acceso a las opciones dentro de la pestaña "Herramientas" llamado "Temas Hijo".
Crear el tema hijo
Al iniciar el complemento tendremos las tres primeras opciones que darán paso a las siguientes para configurar el Child Theme personalizado.
- Selecciona una opción: Marcamos "CREAR un nuevo tema hijo", las otras opciones que puedan aparecer son para trabajar con un tema hijo ya creado.
- Selecciona un tema padre: Si disponemos de varios temas instalados, elegimos sobre el que queremos crear el tema hijo.
- Analizar tema padre: Este paso nos indicará si hay algún problema para crear el tema hijo. Picamos en "Analizar".
A continuación aparecerán el resto de pestañas, que sólo prestaremos atención en caso de querer comercializar el tema hijo, ya que son datos informativos y de autoría. Lo dejamos todo como está por defecto.
En el caso de no haber seguido las recomendaciones de WordPress y no haber creado el tema hijo antes de empezar a diseñar nuestro sitio, podemos marcar la opción 8 para que se repliquen los cambios que tengamos hasta el momento en el tema padre.
Para terminar pulsamos en la opción 9 "Create New Child Theme" y ya podemos ir al apartado de temas de WordPress para poder activarlo.
Añadir archivos para modificar
Antes de cerrar el complemento podemos utilizarlo para duplicar los archivos que queremos modificar y darles otro aire diferente.
En la parte superior de las opciones del plugin hay unas pestañas para realizar acciones más avanzadas, una de ellas contiene un desglose de los archivos del tema padre que podemos duplicar y trasladar al tema hijo.
Una vez que ya tenemos los archivos de nuestro interés en el tema hijo sólo hay que editarlos para realizar los cambios.
Dentro de esta pestaña podemos agregar una miniatura para poder identificar el tema hijo mejor dentro del apartado "Temas" para activar.
Geniaaaalll amigo, me ha sido de mucha ayuda, mil gracias
Hola buen día necesito ayuda con la creación de un tema hijo, para poder agilizar la Compatibilidad Divi y Sensei (plugin de cursos), será que me puedes ayudar.
Cuando intento colocar un código para poder modificar functions.php me sale este mensaje
No ha sido posible comunicar con el sitio para comprobar los errores fatales, así que el cambio de PHP se ha revertido. Tendrás que subir el cambio a tu archivo PHP por otros medios, como por ejemplo usando SFTP.
Disculpa, es probable que este tipo de asesorías sea paga pero la verdad me urge que alguien me ayude
Cuando el editor de temas o plugins no permite guardar los cambios es porque puede existir un error en el código y WordPress protege el archivo de ser modificado o por algún problema con el servidor. Si el código es correcto puedes añadirlo a través del gestor de arvhivos del servidor, buscas el archivo funtions.php dentro de las carpetas de instalación del tema hijo y lo editas desde el mismo servidor.
También puedes crear una conexión FTP y utilizar un programa como FileZilla para conectar con los archivos del servidor sin necesidad de acceder al panel de control.