En este artículo te hoy vengo a contarte todo sobre un tema hijo o child theme en WordPress, qué es, su utilidad y cómo crearlo. Antes de proseguir con la guía voy a ponerte un ejemplo de una posible situación real que puede ocurrirte si no utilizar bien el tema hijo en WordPress.
Inicias sesión en tu panel de WordPress y observas que hay una actualización disponible para tu tema. Sabes, o intuyes, que las actualizaciones son buenas y deseas mantener tu sitio seguro y a la última. Entonces, haces clic en «actualizar» y esperas mientras WordPress hace su trabajo.
Una vez que la actualización está completa, echas un vistazo a su sitio, deseando encontrar magníficas novedades. Es cuando te das cuenta de que algo ha ido terriblemente mal. Tu sitio es un desastre y todas las personalizaciones que has realizado para el diseño de tu tema ya no están.
Los temas hijos de WordPress eliminan este problema. Y, sin embargo, no siempre necesitas uno. De hecho, hay una gran cantidad de concepciones erróneas en torno a ellos.
Por eso, ahora sí, te explicamos los conceptos básicos.
¿Qué es un tema hijo de WordPress?
Es un tipo especial de tema que hereda todos los elementos de diseño de uno principal. Un tema hijo sin personalización es idéntico a su elemento primario.
Vamos al grano: tienes un tema de WordPress, pero deseas hacerlo tuyo personalizándolo. Puedes modificarlo para satisfacer tus necesidades, pero al hacerlo se crea un problema, porque los temas de WordPress se actualizan con frecuencia. Si personalizas y luego actualizas, existe una gran posibilidad de perder todos tus cambios.
Seguro que has pensado que la solución es no actualizar. Bien, nuestra opinión es que evitar actualizaciones es arriesgado. Los temas de WordPress se actualizan por diversos motivos: para cumplir con los nuevos estándares de codificación, corregir errores y solucionar problemas de seguridad.
Evitar las actualizaciones podría romper tu sitio o incluso exponerlo a ataques informáticos. En otras palabras, las actualizaciones de temas no son opcionales, hazlas cuando estén disponibles.
Por eso, al realizar cambios en un tema hijo, te aseguras de que puedes actualizar tu tema de forma segura mientras mantienes la seguridad del sitio y proteges tu trabajo.
¿Cuándo necesitas un tema hijo o child theme?
Ahora llegamos al punto que genera la mayor confusión: no siempre necesitas un tema hijo. Entonces, ¿cómo sabes si necesitas uno o no?
¿Has modificado o planeas modificar el código? ¿Vas a realizar alguna de las siguientes acciones?:
– Editar la hoja de estilo CSS del tema.
– Editar cualquiera de las plantillas PHP del tema.
– Editar el archivo functions.php del tema. Incluso solo para agregar una sola línea de código.
– Modificar cualquiera de los recursos del tema almacenados en la carpeta de temas, incluidos los archivos e imágenes javascript.
Si has respondido afirmativamente a alguna de estos apartados, entonces, necesitas un tema hijo o child theme en WordPress.
Por otro lado, si las personalizaciones de tu tema se realizan exclusivamente a través del tablero de WordPress, no lo necesitas. Aunque pueda parecer confuso, eso incluye los cambios realizados a través del Personalizador de temas. Esos cambios se almacenan en una base de datos. Eso significa que las actualizaciones de tema no sobrescribirán tus cambios.
Crear tema hijo WordPress
Ahora vamos ver juntos cómo crear child theme WordPress. Ya sabes que ese es su nombre en inglés.
Como si de cualquier otro tema de WordPress se tratase, simplemente para su isntalación: dentro del área de administración de wordpress, dirígete a la página «Aspecto», después a «Temas» y haz clic en el botón «Agregar nuevo».
Hay dos métodos de instalación.
Método 1: Dirígete al cuadro de búsqueda y pon el nombre del tema que quieras, si está disponible gratis estás de suerte.
Una vez lo encuentres, lleva el puntero del ratón al tema que estabas buscando y luego haz clic en el botón Instalar. WordPress lo descargará e instalará.
También buscará el tema principal requerido. Se instalará automáticamente si el tema es uno de los principales que existen en WordPress.
Método 2: Debes hacer clic en el botón Cargar tema si el tema hijo viene como un archivo comprimido. De esta forma se te mostrará la opción de carga. Procedes a cargarlos, ahora tan solo debes seleccionar aquel archivo que desees instalar.
Una vez hagas clic, WordPress cargará directamente el archivo zip del tema procediente de tu ordenador y lo instalará.
WordPress analizará si ya tienes instalado el tema principal, en caso contrario buscará dentro del directorio de temas y en caso de existir intentará instalarlo. Y si no se encuentra en el directorio de temas, te mandará un aviso de que debes instalarlo.
Crear tema hijo en WordPress con código
Creamos una carpeta en /wp-content/themes/. Podemos elegir el nombre que queramos, pero si usamos alguno siguiendo alguna lógica nos facilitará el trabajo.
Dentro de la carpeta creada generamos la hoja de estilos, o sea, un fichero style.css.
Puedes copiar la cabecera de la hoja de estilos del tema padre. Esto podría ser una estructura básica:
/*
Theme Name: MiTema Child
Theme URI: http://staminamarketing.com
Version: 4.0
Description: Tema hijo del tema padre Ejemplo
Author: Prueba
Author URI: http://staminamarketing.com
Template: MiTema
*/
@import url(«../MiTema/style.css»);
/*—————– Empieza a añadir cambios aquí abajo ——————————-*/
Ahora os voy a explicar las líneas del código anterior:
- Theme name: tiene que ser diferente al nombre del tema padre, es el nombre del tema hijo.
- Template: Nombre de la carpeta del tema padre.
- @import url(xxxx): Haciendo uso de la estructura del ejemplo, se le indica al tema hijo de donde heredar la hoja de estilos original.
Una vez activéis el tema hijo, ya sería posible personalizarlo para conseguir el mismo diseño del tema padre, pero con las modificaciones que deseemos para el tema hijo.
Una vez activado el tema hijo, este código lo único que hace es importar los archivos (Template: MiTema) y la hoja de estilos (@import url(«../MiTema/style.css»);) del tema padre.
Añadiendo plantillas
Ahora ya podemos editar los ficheros de nuestro tema o incluso añadir nuevos.
Si quisiéramos personalizar el pié de página, podemos copiar el fichero footer.php original del tema padre dentro de la carpeta de nuestro tema hijo, y una vez hecho estos, realizar las modificaciones en el tema hijo.
* Importante: se debe seguir la estructura de carpetas del tema padre. Si por ejemplo, el fichero header.php del tema padre está en /tema-padre/templates/header.php, en el tema hijo debe estar en la misma estructura /tema-hijo/templates/header.php.
Funciones del child theme
Cuando un child theme está activo wordpress funciona de la siguiente forma:
- Se revisa el tema activo (child theme) y se cargan los archivos del tema padre (Template: MiTema)
- WordPress a continuación carga la hoja de estilos importada (@import url(«../MyProduct/style.css»);)
Carga primero las modificaciones en la hoja de estilos del tema hijo y ficheros modificados en el tema hijo, y completa lo que le falta con la hoja de estilos y archivos originales del archivo padre, en ese orden. - Carga el archivo functions.php del tema hijo y posteriormente se carga el fichero de funciones del tema padre.
- WordPress prioriza el archivo functions.php del tema hijo sobre el del tema padre. No lo sobreescribe sino que solo se tiene en cuenta las modificaciones del tema hijo.
O sea, no tienes que copiar entero el fichero functions.php del tema padre.
Tan solo crear uno vacío e insertar las funciones específicas que no querais perder con las actualizaciones del tema padre.
Un ejemplo muy típico sería añadir un favicon.
// Favicon
function my_favicon_link() {
echo '' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );
Ventajas de un child theme
- Se hereda el código del tema padre, lo cual es más rápido pues ahorramos escribir todo desde cero.
- Las actualizaciones del tema padre no afectan al child theme.
- Es mejor modificar un tema ya creado, y que se está actualizando con regularidad, que fabricar uno desde cero. Haciendo uso de un tema hijo tan solo hay que revisar las modificaciones.
Desventajas de un child theme
- Como un child theme realiza llamadas al tema padre, puede ralentizar las web y verse afectado su rendimiento.
- Un buen tema hijo requiere un desarrollador que controle todos los archivos implicados y sus dependencias.
- Los frameworks que tienen como requisito la configuración de un child theme pueden complicar tanto su integración como el rendimiento de la web, debido a que tendremos que documentarnos sobre el propio framework antes de crear el tema hijo.
Beneficios del tema hijo en WordPress
Los temas hijos se suman a la seguridad general de tu sitio web. También hacen la personalización del tema mucho más fácil. Es posible crear un tema personalizado de WordPress simplemente modificando el CSS del tema hijo.
Simplemente, recuerda crear tu tema hijo primero y luego realizar los cambios en el archivo CSS ahí. Además, este tipo de herramientas facilitan mucho el aprendizaje. Cuando empiezas a trabajar con temas de WordPress, estos te permiten probar todo tipo de cosas sin tener que preocuparte por cargarte los diseños principales.
