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 las características y estilos de su tema padre. Al hacer referencia a la carpeta 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 añadir o anular 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 en el directorio del tema secundario. Puedes aplicar parches de seguridad y mejoras de funciones al tema principal con total confianza sin afectar la apariencia de tu sitio.
- Separación clara del código : Todo el código personalizado, desde ajustes de 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 las modificaciones si es necesario, en lugar de tener que buscar 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 haya creado un nuevo tema secundario para un sitio, puede empaquetarlo como un archivo zip y cargarlo en 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:
- Heredar estilos y diseños del tema principal : carga y desarrolla la estructura y la hoja de estilos del tema principal, conservando todos los elementos y diseños originales.
- Estilos personalizados 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 secundario 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.
- Crea el directorio del tema secundario : En tu instalación de WordPress, ve a wp-content/themes. Crea una carpeta nueva, por ejemplo, twentyone-child, si el tema Twenty Twenty-One es el principal. Este directorio del tema secundario 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:
wp_enqueue_style( 'estilo-padre', obtener_uri_directorio_plantilla() . '/style.css' );
wp_enqueue_style( 'estilo-hijo',
obtener_uri_directorio_hoja_de_estilo() . '/style.css',
array( 'estilo-padre' ),
wp_get_theme()->get('Versión')
);
}
add_action( 'wp_enqueue_scripts', 'mis_estilos_enqueue_hijos' );
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 secundario : Comprime la carpeta del tema secundario (si lo subes desde el panel de control) o simplemente actualiza la sección Temas en Apariencia. Busca tu nuevo tema secundario, haz clic en Activar y verifica que tu sitio cargue correctamente con el diseño del tema principal y las modificaciones de tu tema secundario.
Comprensión de los archivos de temas secundarios
Un tema secundario completamente funcional generalmente incluye:
- style.css : contiene los metadatos del encabezado del tema secundario 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): Copia cualquier plantilla del tema principal, como header.php, single.php o page.php, en la carpeta del tema secundario para sobrescribirla. WordPress usará tu 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 configuraciones amplias en el personalizador incorporado, lo que le permite ajustar colores, fuentes, logotipos y diseños de página de inicio sin tocar el código.
- Panel CSS adicional: Ubicado en el Personalizador, este campo te permite escribir fragmentos CSS personalizados que anulan 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 de plantilla en su 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:
- Mantenga la funcionalidad en los complementos : si está agregando funciones que no son estrictamente de presentación, como tipos de publicaciones personalizados o códigos cortos, considere empaquetarlos como un complemento en lugar de saturar su tema secundario.
- 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 complemento como “Simple Custom CSS” podría ser suficiente para varios cambios de estilo.
- Rediseños completos : puede ser más limpio si estás construyendo un diseño completamente nuevo, creando un tema personalizado desde cero o comenzando desde un tema inicial.
- Sitios web sensibles al rendimiento : Cargar varios archivos style.css y ganchos PHP adicionales puede generar sobrecarga. Revisa los recursos de tu tema secundario y considera integrar CSS crítico si la velocidad es una prioridad.
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 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 muestra y funciona como se espera.
- Compartir con otros : si ha creado un tema secundario , considere distribuirlo en GitHub o en el de WordPress.org (siguiendo las pautas), lo que permitirá que otros propietarios de sitios se beneficien.
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.
