¿Alguna vez has encontrado un tema de WordPress casi perfecto para tu web pero decidiste no usarlo por un diminuto y exasperante elemento de diseño que no podías pasar por alto? ¿Quizá el estilo de la fuente, la paleta de colores o la ubicación de los elementos de diseño?
El mercado de temas de WordPress está saturado de tantos temas estupendos, gratuitos y premium, pero salvo que contrates a un desarrollador para crear un tema a medida para tu sitio, hay pocas probabilidades de que encuentres uno que sea perfecto hasta el último píxel.
Los temas hijos de WordPress permiten a los webmasters modificar los archivos de un tema manteniendo intacta su funcionalidad principal, sin arriesgarse a perder las modificaciones cada vez que se actualiza el tema. Te dan el poder de modificar la apariencia de un tema, desde algo tan pequeño como la llamada a la acción de un botón hasta cambiar por completo cada elemento de diseño.
Este artículo cubrirá todo lo que necesitas saber sobre los temas hijos, desde qué son hasta por qué son tan importantes. Terminaremos con un tutorial sobre cómo usar temas hijos en tu sitio de WordPress, de la forma correcta.
¿Suena bien? ¡Empecemos!
Temas hijos de WordPress: los conceptos básicos
Los temas hijos son temas independientes que heredan activamente la funcionalidad de sus temas padre. La funcionalidad de un tema hijo anula la del tema padre, lo que significa que la funcionalidad del tema hijo se aplicará a tu web. Una vez que activas un tema hijo, WordPress comprobará si tiene alguna funcionalidad concreta. Sin embargo, si la funcionalidad no existe, buscará en los archivos del padre y usará la que esté programada allí.
En español sencillo, los temas hijos son archivos de tema duplicados y, cada vez que sientas la necesidad de modificar aspectos de diseño o alguna funcionalidad, lo editas en los archivos del tema hijo. Esta es una gran función porque permite a los webmasters hacer cambios en el tema sin el persistente miedo a estropear los archivos originales.
La mayoría de los temas de WordPress hoy en día vienen con temas hijos (o variaciones de sus temas hijos) de serie.
¿Por qué deberías usar temas hijos?
Realizar modificaciones y alteraciones en tu tema mediante temas hijos es una buena práctica ampliamente aceptada (y recomendada). Piénsalo así: si la fastidias la primera vez, siempre puedes volver a intentarlo. Aparte de este destacado beneficio, los temas hijos son importantes para el mantenimiento y el desarrollo de tu sitio de WordPress.
Elimina el riesgo de perder las modificaciones
Hacer cambios en tu tema padre (los archivos originales del tema) significa que los cambios se perderán cuando actualices el tema. Esto te deja en una especie de callejón sin salida; si actualizas el tema pierdes todas las modificaciones, pero si no lo actualizas tendrás errores residiendo en tu sitio que podrían estar afectándolo negativamente.
Puedes copiar y pegar el código asociado a las modificaciones en tu tema padre una vez que termine de actualizarse. Aunque eso es totalmente posible, ¿por qué dedicar tiempo a localizar las modificaciones que hiciste y copiarlas y pegarlas en los archivos actualizados del tema cada vez que actualizas tu tema? Es un proceso fácil pero falible.
Aquí es donde se percibe por primera vez la importancia de los temas hijos. Usando temas hijos, puedes conservar todas las modificaciones y actualizar de forma segura el tema de tu sitio.
Mantén el código organizado
Un tema de WordPress suele estar compuesto por unos pocos miles de líneas de código y varios archivos distintos: HTML, CSS, PHP, JavaScript y más. Y por ello, cualquier pequeño cambio hecho aquí y allá se vuelve difícil de rastrear. Cuando llegue el momento de volver a editar el tema o corregir errores no previstos, resultará bastante costoso (tanto en tiempo como en presupuesto).
Como se comentó antes, los temas hijos se heredan activamente de los temas padre. Cualquier cambio que hagas en el tema hijo permanece ahí (¡lo que pasa en los temas hijos se queda en los temas hijos!) y es más fácil de rastrear porque solo tendrá unos pocos cientos de líneas de código (en las circunstancias más agresivas) en lugar de unos pocos miles.
Como probablemente ya te habrás dado cuenta, no hay desventajas en usar temas hijos. En realidad, protegen tu sitio de errores accidentales.
Cómo crear un tema hijo en WordPress
La mayoría de los temas vienen con temas hijos, pero si encuentras uno de tu agrado que no lo tenga, crear un tema hijo por ti mismo no es difícil. Demostraré el tutorial creando un tema hijo para nuestro tema Sparkling.
Paso 1: Crea un directorio para el tema hijo en tu instalación de WordPress.
- Navega al directorio de temas de tu sitio de WordPress (
/wp-content/themes). - Crea una nueva carpeta y nómbrala sparkling-child. Es una buena práctica dar a tu tema hijo el mismo nombre que el padre con -child añadido al final.
Añadiremos todos los archivos del tema hijo a esta carpeta. Dicho esto, el único archivo que un tema hijo necesita para funcionar correctamente es el archivo style.css.
Paso 2: Crea un archivo style.css para tu nuevo tema hijo.
- Navega al directorio del tema hijo creado en el Paso 1, es decir,
/wp-content/themes/sparkling-child. - Crea un nuevo archivo
.cssen el directorio y nómbralostyle.css. - Copia y pega el siguiente código en el nuevo archivo
style.css:
En el código anterior, las líneas más importantes son las que empiezan con Theme Name, Template y @import. Debes rellenar estas líneas correctamente si estás creando un tema hijo para otro tema padre. La línea @import garantiza que no tengas que reescribir las reglas CSS del tema padre desde cero. Sin la línea @import, el nuevo sitio solo tendrá el contenido cargado, sin estilos.
Si tu tema padre tiene varias hojas de estilo, sáltate este paso. Te mostraremos cómo importar varias hojas de estilo usando una función nativa de WordPress en los siguientes pasos.
Paso 3: Crea el archivo functions.php (opcional).
El archivo functions.php permite a los desarrolladores web añadir funcionalidad a sus webs de WordPress usando funciones nativas de WordPress y código PHP.
- Navega a la carpeta de tu tema hijo, es decir, sparkling-child.
- Crea un archivo
.phpy nómbralofunctions.php. - Añade el siguiente código al archivo functions.php:
Es importante señalar que un tema hijo no requiere un archivo functions.php para funcionar. De hecho, solo deberías añadir este archivo si tienes intención de modificar la funcionalidad del tema padre. En la mayoría de los casos, una hoja de estilo es suficiente, pero si tu tema padre tiene varias hojas de estilo, tendrás que crear un archivo functions.php.
Paso 4: Importa varias hojas de estilo (opcional).
Si, por ejemplo, el tema padre que has seleccionado viene con más de una hoja de estilo, importarlas a tu tema hijo con @import ralentizará tu web un par de segundos, lo cual no es bueno. No querrás aumentar el tiempo de carga de la página de tu sitio si puede evitarse con unas pocas líneas de código.
- Navega al directorio de tu tema hijo y abre el archivo
functions.phpen un editor de texto. - Añade las siguientes líneas de código al archivo
functions.phpbajo la etiqueta de apertura<?php:
La función wp_enqueue_style() usada en el código anterior importará varias hojas de estilo a tu tema hijo sin ralentizar tu sitio.
Nota: Las buenas prácticas para crear temas hijos sugieren que siempre deberías importarlos usando el código dado arriba, sin importar cuántas hojas de estilo tenga tu tema padre.
Paso 5: Sube el tema hijo.
Ahora que has creado con éxito el tema hijo, es hora de subirlo a tu web de WordPress y activarlo.
- Comprime el directorio del tema hijo en un archivo
.zip. - Inicia sesión en tu panel de administración de WordPress y navega a Apariencia > Temas.
- Haz clic en el botón Añadir nuevo en la siguiente pantalla.
- Haz clic en el botón Subir tema para continuar.
- Busca el archivo
.zipde tu tema hijo y súbelo. - Una vez que el tema hijo esté subido, haz clic en Activar.
También puedes subir el tema hijo mediante tu cliente FTP copiando y pegando directamente el archivo .zip en el directorio de temas. Si estás creando un tema hijo para otro tema, haz las alteraciones necesarias al código dado arriba.
Este tutorial solo pretende demostrar cómo se crea un tema hijo. Hemos creado un tema hijo para Sparkling que puedes descargar directamente si prefieres no dedicar tiempo a crear el tuyo.
Personalizar tu tema hijo
Suponiendo que todo salió según lo planeado, cuando actives el tema hijo tu web debería verse igual que cuando el tema padre está activado. ¡Pero espera! ¿No es todo el sentido de crear un tema hijo hacer que tu web se vea diferente?
En esta sección, te mostraremos cómo puedes empezar a personalizar el tema hijo para hacer modificaciones.
Aplicar estilos personalizados
Como el primer archivo (y el archivo obligatorio) que creamos fue style.css, solo tiene sentido empezar añadiendo estilos personalizados al tema hijo usándolo. Al añadir código CSS personalizado a la hoja de estilo, podrás anular la hoja de estilo del tema padre.
Con CSS, puedes modificar cada aspecto de diseño y estilo del tema activado, desde colores y botones hasta dimensiones y estilos de fuente. Los desarrolladores web con verdadera maña para el CSS modifican toda la disposición del tema hijo para hacerlo único.
Todo lo que tienes que hacer es añadir código CSS personalizado al final del archivo style.css de tu tema hijo y listo. Aquellos de vosotros que no queráis acceder al cliente FTP de vuestro sitio cada vez que haya que hacer un cambio sencillo podéis navegar al editor predeterminado de WordPress (Apariencia > Editor) y añadir código CSS directamente desde ahí. Navega a Apariencia > Editor y añade código CSS directamente desde ahí.
Todo lo que tienes que hacer es añadir código CSS personalizado al final del archivo de tu tema hijo y listo.
Técnicas alternativas de modificación de temas
Añadir código CSS al archivo style.css es la forma más sencilla de hacer modificaciones en el tema hijo. Sin embargo, si quieres llevar las cosas al siguiente nivel y quizá añadir alguna funcionalidad nueva y personalizada al tema hijo, ahí es donde la cosa se pone seria. Hay distintos tipos de modificación que puedes hacer (aparte de cambiar los elementos de diseño), como:
- Añadir nuevas funciones al archivo
functions.php. Ya hemos creado el archivofunctions.phppara tu tema hijo, así que todo lo que tienes que hacer ahora es añadirle algunas funciones personalizadas según la funcionalidad que quieras lograr. Puedes programar en PHP o usar funciones nativas de WordPress. - Editar archivos de plantilla. Si
style.cssyfunctions.phpsimplemente no bastan y aún necesitas modificar el tema, puedes copiar y pegar los archivos de plantilla del tema padre y editarlos en consecuencia. - Añadir nuevos archivos de plantilla. Si has encontrado plantillas que te gustan en otro lugar (no en el directorio del tema padre) o si quieres crear tus propias plantillas, puedes añadirlas directamente al tema hijo y partir de ahí.
Puedes estar tranquilo sabiendo que tu web de WordPress estará a salvo de errores dañinos e involuntarios, sin importar el método o métodos que adoptes para hacer modificaciones en tu tema activado. Si por casualidad algo del código va mal, sabrás exactamente dónde ocurrió el error y podrás corregirlo. (Pista: ¡suele estar en las últimas líneas que añadiste!)
Una de las mejores cosas de los temas hijos es que permiten a los usuarios personalizar por completo el tema padre para que coincida con la marca de su sitio, lo cual es especialmente útil tanto para negocios nuevos como consolidados. Y si quieres rediseñar por completo tu sitio más adelante basándote en el mismo tema padre o en uno nuevo, ¡siempre puedes crear un nuevo tema hijo y partir de ahí!
Para terminar
Los temas hijos son la forma recomendada de hacer modificaciones en un tema de WordPress. Evitan que los usuarios cometan errores potencialmente dañinos en sus archivos de tema originales y que se arriesguen a perder las modificaciones cada vez que el tema se actualiza.
Cubrimos todo lo que necesitas saber sobre los temas hijos en WordPress, comentamos por qué son tan importantes y te guiamos a través de un tutorial detallado sobre cómo crear tu propio tema hijo desde cero. Para ayudarte a empezar a hacer modificaciones, concluimos con una breve sección sobre cómo puedes ponerte en marcha con la personalización del tema hijo.
¿Estás de acuerdo en que todas las modificaciones de diseño y funcionalidad deberían hacerse mediante temas hijos? ¿Pudiste crear un tema hijo y activarlo con éxito en tu sitio de WordPress? Nos encantaría conocer tu experiencia, ¡así que cuéntanoslo en los comentarios de abajo!
Dinos si te ha gustado la publicación.
¿Buscas un nuevo hosting?
Aloja tu sitio con Phluit, sin contratos a largo plazo, con migraciones gestionadas y una garantía de devolución del dinero de 30 días.
- Ahorra tiempo y costes, y maximiza el rendimiento del sitio
- Ayuda instantánea de expertos en hosting de WordPress, 24/7
- Alcance de audiencia global con varios centros de datos.
- Optimización con nuestra aplicación integrada
- Monitorización del rendimiento.
