Un tema hijo en WordPress es un “subtema” que hereda el estilo y la funcionalidad de otro tema, conocido como tema padre, al tiempo que le permite realizar personalizaciones de forma segura sin modificar los archivos del tema original.
Para crear un tema hijo, crea una carpeta en el directorio wp-content/themes. Esta carpeta debe incluir un archivo style.css personalizado y un archivo functions.php. La hoja de estilos del tema hijo se carga después de la del tema principal, lo que permite que tu CSS personalizado tenga prioridad y garantiza que las actualizaciones del tema principal no sobrescriban tus cambios.
Un tema hijo es un conjunto de instrucciones que se superponen al tema original, lo que permite actualizar el tema principal, como Twenty Seventeen, Twenty Nineteen o Twenty Twenty-One, sin perder las personalizaciones. Exploremos los conceptos clave, los pasos para crear un tema hijo y las prácticas recomendadas para el desarrollo de temas.
¿Cuál es la diferencia entre los temas padre e hijo?
Un tema principal es un tema completo de WordPress con todos los archivos y estilos necesarios. Tiene su propia carpeta y un encabezado style.css con metadatos. Una vez activado, funciona como el tema activo de tu sitio, proporcionando diseños y estilos.
Un tema hijo hereda características y estilos de su tema padre. Al hacer referencia a la carpeta del tema padre en el encabezado de la hoja de estilos del tema hijo, WordPress carga el archivo style.css del tema padre antes que el CSS del tema hijo. Esto permite agregar o sobrescribir archivos de plantilla e incluir CSS adicional sin modificar el archivo style.css del tema padre.
Beneficios de usar un tema hijo
Aprovechar un tema secundario ofrece varias ventajas prácticas, especialmente al mantener o ampliar un tema personalizado complejo:
- Actualizaciones seguras: Actualizar los archivos del tema principal no sobrescribirá los cambios personalizados que hayas realizado en el directorio del tema secundario. Puedes aplicar parches de seguridad y mejoras de funciones al tema principal sin alterar la apariencia de tu sitio web.
- Separación de código impecable: Todo el código personalizado, desde ajustes en archivos CSS hasta fragmentos de código PHP, reside en el tema hijo. Esta separación facilita el seguimiento, la depuración y la eliminación de tus modificaciones, en lugar de tener que buscarlas en el código del tema padre.
- Desarrollo de temas más rápido: Un plugin para crear o configurar temas secundarios (como el Configurador de Temas Secundarios oficial) puede crear un nuevo tema secundario en segundos. Dedica menos tiempo a configurar carpetas y más al diseño y la funcionalidad.
- Reutilización: Una vez que hayas creado un nuevo tema hijo para un sitio, puedes empaquetarlo como un archivo zip y subirlo a otras instalaciones de WordPress, ahorrando tiempo en tareas repetitivas de desarrollo de temas.
- Plataforma de aprendizaje: para los aspirantes a desarrolladores de temas, los temas secundarios proporcionan una forma accesible de experimentar con archivos de plantilla, ganchos de acción y filtros sin arriesgar un sitio en vivo.
Funciones de un tema hijo
Un tema hijo en WordPress es fundamental para una personalización segura y escalable del sitio. Sus funciones principales incluyen:
- Heredando los estilos y diseños del tema principal: Carga y se basa en la hoja de estilos y la estructura del tema principal, conservando todos los elementos de diseño y diseños originales.
- Estilo personalizado y anulación de plantillas: Los desarrolladores pueden anular estilos, encabezados, pies de página y más a través del archivo CSS del tema hijo y los archivos de plantilla copiados.
- Agregar o modificar funcionalidad: el archivo functions.php en un tema secundario le permite escribir o alterar el código PHP para cambiar el comportamiento de WordPress, sin tocar la lógica principal del tema.
- Separar el código personalizado de las actualizaciones del tema: las personalizaciones permanecen aisladas de las actualizaciones del tema principal, por lo que puede mantener las mejoras de seguridad y rendimiento sin perder los cambios.
- Simplificación de pruebas y creación de prototipos de temas: ideal para experimentar con cambios de diseño o funciones en un sitio de WordPress sin comprometer la estabilidad.
Creación de un tema secundario (paso a paso)
Puedes crear un tema hijo manualmente o usar un plugin de configuración de temas hijos. A continuación, se muestra el proceso manual, que te da control total sobre la carpeta y los archivos del tema hijo.
- Crear el directorio del tema hijo: En tu instalación de WordPress, ve a wp-content/themes. Crea una nueva carpeta, por ejemplo, twentyone-child, si tu tema principal es Twenty Twenty-One. Este directorio del tema hijo se convertirá en el contenedor de todas tus plantillas y recursos personalizados.
- Añade la hoja de estilos (style.css): Dentro de la carpeta del tema secundario, crea un archivo llamado style.css. Agrega el siguiente encabezado en la parte superior:
/*
Nombre del tema: Twenty Twenty-One
URI del tema secundario: https://example.com/twentyone-child
Descripción: Un tema secundario para el tema Twenty Twenty-One
Autor: Su nombre
Plantilla: twentytwentyone
Versión: 1.0.0
*/
Cambie el nombre del tema, la plantilla y otros campos para que coincidan con el nombre del tema secundario y la carpeta del tema principal.
- Poner en cola los estilos padre e hijo: Crea un archivo functions.php en la carpeta del tema hijo. Usa este fragmento básico para cargar los estilos correctamente:
php function my_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'parent-style' ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
Esto garantiza que la hoja de estilo del tema principal se cargue primero, seguida de cualquier CSS personalizado en el tema secundario.
- Activa tu tema hijo: Comprime la carpeta del tema hijo (si la subiste desde el panel de control) o simplemente actualiza la sección Temas en Apariencia. Localiza tu nuevo tema hijo, haz clic en Activar y verifica que tu sitio web se cargue correctamente con el diseño del tema principal y las modificaciones del tema hijo.
Comprensión de los archivos de temas secundarios
Un tema secundario completamente funcional generalmente incluye:
- style.css: Contiene los metadatos del encabezado del tema hijo y todo el CSS personalizado.
- functions.php: este archivo contiene el código de puesta en cola anterior y cualquier fragmento de archivo PHP, ganchos o filtros adicionales para ampliar la funcionalidad.
- Archivos de plantilla (opcional): Copie cualquier plantilla del tema principal, como header.php, single.php o page.php, en la carpeta de su tema hijo para sobrescribirla. WordPress utilizará su versión en lugar de la del tema principal.
- screenshot.png (opcional): Se muestra una imagen de vista previa en el panel de Temas, con un tamaño de 1200×900 px.
- assets/ (opcional): una subcarpeta para imágenes específicas del tema secundario, JavaScript u otros recursos.
Todos los demás archivos del tema principal que no se anulan permanecen intactos, por lo que el tema secundario “hereda” todo del principal, incluidos los menús, los widgets y las opciones del tema.
Opciones fáciles de usar para personalizar WordPress sin un tema secundario
Existen alternativas más sencillas a un tema hijo para quienes desean personalizar su sitio de WordPress sin necesidad de modificaciones avanzadas. Estos métodos son ideales para principiantes que desean ajustar el estilo, el diseño o la funcionalidad sin editar los archivos principales ni crear una estructura de tema independiente.
Estos son los métodos de personalización más comunes para principiantes:
- Personalizador de temas (Apariencia > Personalizar): La mayoría de los temas modernos de WordPress incluyen una amplia gama de ajustes en el personalizador integrado, lo que permite modificar colores, fuentes, logotipos y diseños de la página de inicio sin necesidad de modificar el código.
- Panel CSS adicional: Ubicado en el Personalizador, este campo te permite escribir fragmentos de CSS personalizados que modifican el estilo del tema. Los cambios se aplican al instante y se guardan con la configuración del tema.
- Complementos CSS personalizados: complementos como Simple Custom CSS o WP Add Custom CSS ofrecen una forma segura e independiente de agregar reglas CSS, incluso si cambia su tema más adelante.
- Complementos específicos del sitio: en lugar de editar los archivos de su tema, puede crear un complemento liviano específico del sitio para funciones básicas como códigos cortos, tipos de publicaciones personalizados o pequeños ajustes de PHP.
- Creadores de páginas (por ejemplo, Elementor, Beaver Builder): estas herramientas de arrastrar y soltar brindan control visual sobre el diseño y los diseños de las páginas, lo que hace que la personalización sea fácil sin escribir una sola línea de código.
Estos métodos son perfectos para usuarios que buscan flexibilidad sin la complejidad de gestionar una carpeta de tema secundario ni editar archivos manualmente. Garantizan que los cambios se mantengan intactos tras las actualizaciones del tema (en la mayoría de los casos) y no requieren acceso FTP ni experiencia en desarrollo de temas.
Errores comunes y solución de problemas
Incluso los desarrolladores de temas con experiencia pueden tener problemas al trabajar con temas secundarios. Aquí tienes algunas comprobaciones rápidas:
- Nombre de plantilla incorrecto: asegúrese de que la línea Template en su archivo style.css coincida exactamente con la carpeta del tema principal (distingue entre mayúsculas y minúsculas).
- Tema secundario no activo: después de la instalación, recuerde activar el tema secundario; de lo contrario, su CSS y PHP personalizados no se ejecutarán.
- Problemas de caché de CSS: Las cachés de navegadores o plugins pueden ocultar cambios de CSS. Borre las cachés o use hojas de estilo versionadas en sus llamadas de encolado.
- Dependencias faltantes: si confía en una función de tema principal, confirme utilizando la prioridad de gancho correcta para que el código principal se cargue primero.
Mejores prácticas en el desarrollo de temas
A continuación se muestran algunas prácticas recomendadas para el desarrollo de temas de WP:
- Mantén la funcionalidad en los plugins: si añades características que no son estrictamente de presentación, como tipos de publicaciones personalizadas o códigos cortos, considera empaquetarlas como un plugin en lugar de sobrecargar tu tema hijo.
- Utilice un configurador de temas secundarios: herramientas como el complemento Configurador de temas secundarios pueden automatizar la creación de carpetas, la configuración de encabezados y las rutinas de cola, lo que es ideal para aquellos que no se sienten cómodos editando encabezados de archivos CSS o archivos PHP manualmente.
- Mantén el control de versiones: Almacena tu tema hijo en Git u otro VCS. Etiqueta las versiones antes de cambios significativos para revertirlas fácilmente si algo falla.
- Documente sus cambios: mantenga un archivo README.md simple en la carpeta del tema secundario que enumere sus personalizaciones, para que sus colaboradores y usted en el futuro comprendan sus modificaciones.
¿Deberías utilizar un tema hijo de WordPress?
Comprender cuándo usar un tema hijo y cuándo no puede ahorrarle tiempo y asegurar el futuro de su sitio. Si bien los temas hijo son herramientas potentes para desarrolladores y usuarios avanzados, no siempre son necesarios para todas las tareas de personalización.
Aquí te explicamos cómo decidir:
Utilice un tema secundario si:
- Debe anular o ampliar los archivos de plantilla (por ejemplo, single.php, header.php).
- Planea escribir funciones PHP personalizadas o ganchos de filtro a través de functions.php.
- Su tema recibirá actualizaciones periódicas y usted deseará conservar los cambios.
- Estás construyendo un sitio de cliente o un entorno de prueba con una lógica de diseño personalizada.
Evite un tema secundario si:
- Solo necesitas ajustes visuales básicos, como cambios de color o fuente.
- Su tema principal admite configuraciones de personalización robustas o edición completa del sitio.
- Prefieres utilizar creadores de páginas o complementos de diseño para realizar cambios de diseño.
- Estás utilizando un tema basado en bloques (por ejemplo, Twenty Twenty-Four), donde los temas secundarios son menos relevantes debido a las partes de la plantilla y los estilos globales.
Consejo profesional: Si estás entre estos cambios, considera empezar con cambios menores usando el Personalizador o un plugin CSS. Si tus necesidades aumentan, puedes migrar a un tema hijo sin perder tus personalizaciones iniciales.
Al sopesar su nivel de comodidad técnica y los objetivos a largo plazo del sitio, puede elegir con confianza el camino correcto, ya sea un tema secundario o una alternativa más simple.
Cuándo no utilizar un tema secundario
Si bien son potentes, los temas secundarios no siempre son la opción correcta:
- Pequeños ajustes de CSS: Un plugin como "Simple Custom CSS" podría ser suficiente para realizar varios cambios de estilo.
- Rediseños completos: Puede resultar más sencillo si se crea un diseño completamente nuevo, un tema personalizado desde cero o se parte de un tema base.
- Sitios web que requieren un alto rendimiento: Cargar varios archivos style.css y ganchos PHP adicionales puede generar sobrecarga. Si la velocidad es una prioridad, revise los recursos de su tema hijo y considere la posibilidad de insertar el CSS crítico directamente en el código.
Cargar y distribuir su tema secundario
Una vez que el tema de su hijo esté listo:
- Comprima la carpeta del tema secundario: comprima la carpeta (por ejemplo, twentyone-child.zip).
- Cargar a través del Panel de control: Vaya a Apariencia > Temas > Agregar nuevo > Cargar tema, seleccione su archivo zip y haga clic en Instalar ahora.
- Activar y probar: Después de la activación, navegue por las páginas clave para confirmar que todo se visualiza y funciona como se espera.
- Compártelo con otros: Si has creado un tema hijo, considera distribuirlo en GitHub o en el de WordPress.org (siguiendo las directrices), para que otros propietarios de sitios web puedan beneficiarse.
Reflexiones finales
Usar un tema hijo es la forma más segura y eficaz de personalizar un tema de WordPress sin modificar los archivos originales. Permite añadir CSS personalizado, modificar plantillas y actualizar el tema principal de forma segura sin perder los cambios. Ya sea creando un tema hijo desde cero o modificando uno existente, es una estrategia innovadora para principiantes y desarrolladores.
¿Necesitas ayuda experta para configurar tu tema hijo de WordPress? Seahawk ofrece servicios profesionales para ayudarte a empezar con buen pie.
