Como propietario de un sitio web WordPress , es natural que quieras experimentar con el diseño y la funcionalidad de los temas. Pero, ¿cuál es la mejor manera de hacerlo sin alterar el tema original? Un tema hijo en WordPress es una excelente opción para modificar y probar tu tema sin preocuparte por el riesgo de dañar el original.
Usar un tema hijo de WordPress es una forma inteligente de personalizar el código de tu tema de forma segura sin arriesgar tu trabajo. Si planeas editar el CSS, HTMLo PHP, un tema hijo es la mejor opción. ¿Por qué? Porque sin uno, cualquier actualización de tu tema principal podría borrar tus cambios.
Para facilitarte las cosas, hemos creado una guía para principiantes que explica cómo funciona un tema hijo, cómo configurarlo y cómo realizar los cambios que desees. ¡Anímate a personalizarlo con confianza!
Entendiendo el tema hijo en WordPress
Un tema hijo, como su nombre indica, es como un complemento para tu tema, heredando sus características y estilos. Al personalizar tu tema de WordPress, modificar directamente los archivos del tema puede ser arriesgado, ya que cualquier cambio puede alterar el núcleo del tema. Ahí es donde entran en juego los temas hijos: son una forma más segura de realizar modificaciones sin tocar los archivos originales.
El tema hijo hereda automáticamente el estilo principal del archivo style.css del tema padre, que define la apariencia general del tema. Con un tema hijo, puedes modificar o ampliar fácilmente este estilo añadiendo tus propios archivos o modificando los existentes. Esto te da la flexibilidad de personalizar el tema sin modificar los archivos originales.
Los temas secundarios se almacenan en su propia carpeta, separados del tema principal, y dependen de este para su funcionalidad a menos que decidas modificarlos. Al activar un tema secundario en WordPress, se vincula al tema principal, y WordPress revisará primero los archivos del tema secundario. Si un archivo no se ha modificado, WordPress simplemente usará la versión del tema principal.
Recuerda, sin embargo, que un tema hijo no puede funcionar solo. Necesita que el tema padre esté instalado junto a él para funcionar correctamente.
Lea sobre: Subcontratar el desarrollo de complementos y temas de WordPress
Beneficios de usar un tema hijo en WordPress
Crear un tema hijo es una forma inteligente de modificar tu de WordPress sin el riesgo de perder todo tu trabajo. Si editaras directamente los archivos del tema padre, cada vez que se actualice, tus personalizaciones se borrarían. Esto te obligaría a tomar una decisión difícil: o bien omitir todas las actualizaciones futuras, lo que puede generar problemas de compatibilidad y seguridad, o actualizar y perder el tiempo y el esfuerzo invertidos en personalizar tu tema de WordPress.
Sin embargo, con un tema hijo, no tienes que tomar esa decisión. Todas tus modificaciones se guardan de forma segura en una carpeta aparte, lo que significa que puedes conservar los cambios incluso cuando se actualiza el tema principal. Además, esta configuración facilita mover tus personalizaciones de un sitio a otro si lo necesitas, lo que te ahorra tiempo si trabajas con varios sitios o migras a uno nuevo.
Otra gran ventaja de usar un tema hijo es que es una excelente manera de aprender sobre el desarrollo de temas personalizados en un entorno de bajo riesgo. Puedes experimentar con cambios y nuevas funciones, y si algo no sale como esperabas, simplemente puedes desactivar el tema hijo. Tu sitio volverá instantáneamente a la apariencia y funcionalidad originales del tema padre, así que no hay ningún problema.
Obtenga más información sobre: ¿Cómo editar y personalizar sin problemas los encabezados en WordPress?
Mejore su sitio de WordPress con desarrollo experto
Transforme su tema hijo en un sitio web totalmente personalizado y de alto rendimiento con nuestros servicios profesionales de desarrollo de WordPress.
Cosas que hacer antes de crear un tema hijo en WordPress
Hemos visto a muchos usuarios de WordPress ansiosos por personalizar sus sitios, pero se topan con un obstáculo cuando surgen errores inesperados. Es totalmente comprensible: probar un tema hijo puede parecer emocionante hasta que aparecen los desafíos técnicos.
Por eso es fundamental prepararse un poco antes de empezar, como lo harías antes de un examen. Aquí tienes algunos consejos que puedes seguir antes de empezar a crear tu tema hijo:
Comprender los conceptos básicos del código
Trabajar con un tema hijo implica lidiar con código. Como mínimo, te resultará útil tener conocimientos básicos de HTML, CSS y PHP (y posiblemente JavaScript si quieres profundizar). Si eres nuevo en la programación, el manual de temas de WordPress es un excelente punto de partida para obtener una guía rápida.
Aprende: Cómo convertir Figma a código: React, HTML, Vue, JS, CSS
Elija el tema parental adecuado
Elige un tema principal que se acerque a la apariencia y funcionalidad que buscas. Lo ideal es encontrar uno que solo requiera algunos ajustes, lo que facilitará el proceso de personalización. Si vas a cambiar de tema por completo, consulta nuestra lista de cosas que debes hacer antes de cambiar de tema de WordPress; ¡te ahorrará dolores de cabeza!
Utilice un sitio local o de preparación para realizar la prueba
Lo mejor es experimentar en un sitio local o de prueba antes de lanzar tu sitio web principal. De esta forma, si cometes un error, no afectará la apariencia ni la funcionalidad de tu sitio web en producción.
Crea una copia de seguridad de tu sitio
Antes de realizar cualquier cambio, haz una copia de seguridad de tu sitio web. Si es la primera vez que lo haces, un plugin como Duplicator puede simplificar el proceso y hacerlo más sencillo. De esta forma, podrás restaurar tu sitio rápidamente si algo no sale según lo previsto.
Una vez que hayas cubierto estos conceptos básicos, ¡estarás listo para seguir nuestra guía paso a paso para crear el tema de tu hijo con confianza!
Aprende: Las mejores soluciones para hacer copias de seguridad de varios sitios web de WordPress
Cómo crear un tema hijo en WordPress manualmente: 5 sencillos pasos
Crear un tema secundario en WordPress es más fácil de lo que parece y es una excelente manera de comprender cómo funcionan los temas secundarios sin poner en riesgo el tema principal.
Veamos cómo crear un tema secundario basado en el tema predeterminado Twenty Fifteen de WordPress y realizar algunos ajustes personalizados para ver el proceso en acción.
Paso 1: Crear una carpeta de tema secundario
Empieza creando una carpeta en tu ordenador donde se guardarán todos los archivos de tu tema hijo. Más tarde, subirás esta carpeta a tu sitio web.
Puedes nombrar la carpeta como tu tema principal, añadiendo "-child" al final. Por ejemplo, si tu tema principal se llama "Twenty Twenty-Two", la carpeta de tu tema secundario se llamaría twentytwentytwo-child. Esto facilita su identificación como tema secundario para el tema principal.
Paso 2: Configurar una hoja de estilos para el tema secundario
A continuación, crea un archivo style.css dentro de la carpeta del nuevo tema secundario. Este archivo contendrá todos los estilos personalizados para el tema secundario.
Para configurar la hoja de estilos correctamente, añade los siguientes comentarios de encabezado en la parte superior del archivo style.css. Esto indica a WordPress que tu nuevo tema es un tema secundario del tema principal:
Nombre del tema: Twenty Twenty-Two Tema secundario URI: https://wordpress.org/themes/twentytwentytwo/ Autor: Equipo de WordPress URI del autor: https://wordpress.org/ Plantilla: twentytwentytwo Descripción: Tema secundario para Twenty Twenty-Two Versión: 1.0 */Una vez guardado, ve a tu panel de WordPress y dirígete a Apariencia → Temas. Ahora deberías ver tu tema hijo en la lista.
Paso 3: Vincular las hojas de estilo del tema principal y del secundario
Para asegurarnos de que se apliquen los estilos del tema principal, debemos vincular su hoja de estilos con el tema secundario. Esto se hace creando un archivo functions.php en la carpeta del tema secundario y añadiendo el siguiente código:
<?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}Este código cargará la hoja de estilos del tema principal para que el tema secundario herede todo su estilo.
Aprenda: ¿Cómo reparar y arreglar la base de datos de WordPress?
Paso 4: Editar la hoja de estilos del tema secundario (style.css)
Ahora puedes empezar a añadir tus estilos personalizados directamente en el archivo style.css del tema secundario. Por ejemplo, para cambiar el color de los enlaces de tu sitio, puedes añadir:
un {color: #D54E21;decoración de texto: ninguna;}Esta regla anula el estilo de enlace del tema principal sin afectar el resto de su diseño.
Sepa: ¿Debería construir su sitio web con código, sin código o con un creador de sitios web?
Paso 5: Modificar un archivo de plantilla
Con un tema hijo, también puedes modificar plantillas individuales. Supongamos que quieres cambiar la forma en que se muestran las publicaciones editando el archivo single.php.
- Copie single.php del tema principal y péguelo en la carpeta del tema secundario.
- Abra el archivo en un editor de texto y realice los cambios.
Por ejemplo, si desea eliminar la sección de comentarios de las páginas de publicaciones individuales, busque esta parte del código:
si ( comentarios_abiertos() || obtener_numero_de_comentarios() ) :plantilla_de_comentarios();finsi;Elimínalo o coméntalo para ocultar los comentarios. WordPress usará el archivo single.php modificado de la carpeta del tema secundario, por lo que las actualizaciones del tema principal no sobrescribirán tu personalización.
Aprende: ¿Cómo crear una plantilla de página personalizada en WordPress?
Cómo crear un tema secundario con un complemento (sin necesidad de codificación)
Si no te gusta programar pero aun así quieres crear un tema hijo, ¡estás de suerte! Aunque existen varios plugins que puedes usar para crear un tema hijo en WordPress, vamos a usar el Child Theme Configurator para explicar el proceso.
Este plugin facilita enormemente la configuración y personalización de un tema hijo para temas clásicos (sin bloques) de WordPress. Aquí tienes una sencilla guía paso a paso para empezar.
Paso 1: Instalar y activar el complemento
Primero, ve a tu panel de WordPress, busca “Child Theme Configurator” en la sección Plugins e instálalo. Una vez activado, dirígete a Herramientas → Temas secundarios.
Paso 2: Configurar el tema secundario
En el configurador de temas secundarios, ve a la Padre/Hijo . Verás una opción para elegir una acción; selecciona "CREAR un nuevo tema secundario" para comenzar.
Paso 3: Elige el tema principal
A continuación, selecciona el tema principal que quieres usar en el menú desplegable. En este ejemplo, supongamos que usamos el tema Hestia. Después de elegir el tema, haz clic en el botón "Analizar" para asegurarte de que sea compatible con la creación de un tema secundario.
Paso 4: Nombra la carpeta de temas de tu hijo
Se te pedirá que nombres la carpeta donde se guardará el tema secundario. Puedes usar tu creatividad o usar un nombre simple como "Hestia-secundario" para mantener todo organizado.
Paso 5: Decide dónde guardar los estilos personalizados
Aquí hay una elección importante: puede guardar nuevos estilos personalizados en la hoja de estilo principal (style.css) de su tema secundario o en un archivo de hoja de estilo separado.
- Hoja de estilos principal: Este es el archivo principal donde se guardan los estilos por defecto. Cualquier cambio aquí sobrescribirá los estilos originales del tema.
- Hoja de estilos independiente: Esta opción guarda tus estilos personalizados en un archivo nuevo, de modo que los estilos del tema original permanecen intactos.
Por ahora, utilizaremos la hoja de estilo principal, pero siéntete libre de probar la opción separada si deseas conservar por completo el aspecto del tema principal.
Conozca más: Las mejores herramientas de software de diseño web para sitios web impactantes y fáciles de usar
Paso 6: Establecer el manejo de la hoja de estilos del tema principal
Desplázate hacia abajo y elige cómo cargar la hoja de estilos del tema principal. Mantendremos la opción predeterminada "Usar la cola de estilos de WordPress", ya que esto permite que el plugin la gestione automáticamente.
Paso 7: Personalizar los detalles del tema secundario
Al llegar al paso 7, haz clic en "Editar atributos del tema secundario". Aquí puedes agregar detalles como el nombre, la descripción y la versión del tema secundario.
Paso 8: Copiar menús y widgets
Normalmente, al crear un tema secundario, se restablecen los menús y widgets. Para evitarlo, marque la casilla en el paso 8 para copiarlos del tema principal al tema secundario.
Crea tu tema infantil
Finalmente, haz clic en "Crear nuevo tema hijo". El complemento creará automáticamente una carpeta para tu tema hijo, con los archivos style.css y functions.php necesarios para futuras personalizaciones.
Vista previa y activación
Antes de activar, haz clic en el enlace de vista previa en la parte superior de la pantalla para comprobar que todo se ve bien. Si la vista previa de tu tema secundario se ve bien sin ningún elemento dañado, haz clic en "Activar y publicar" para publicarlo
¡Listo! Tu tema hijo ya está activo. Se verá y funcionará igual que tu tema principal. Puedes personalizarlo sin afectar al original. ¡Feliz personalización!
Conozca los mejores temas de WordPress Studio para empresas creativas.
¿Qué hacer si el tema secundario de WordPress no funciona?
¿Tu tema hijo no muestra los cambios? No te preocupes, aquí tienes algunos problemas comunes y soluciones para que funcione correctamente.
Vuelva a verificar su archivo functions.php
Comience por asegurarse de haber encolado la hoja de estilos del tema secundario en su archivo functions.php. Si no está encolada, el tema secundario no cargará correctamente y su sitio seguirá mostrando el tema principal, dando la impresión de que los cambios no se visualizan.
Lectura interesante: Laravel vs WordPress: Los mejores rivales de PHP se enfrentan.
Confirme que su hoja de estilos se llama style.css
Comprueba que el nombre de tu hoja de estilos sea style.css, no stylesheet.css ni ningún otro. WordPress espera que la hoja de estilos principal del tema hijo se llame style.css. Si se llama de otra manera, el archivo functions.php no la reconocerá y tus estilos personalizados no se aplicarán.
Verifique el nombre de la plantilla en style.css
En tu archivo style.css, el campo Plantilla debe coincidir exactamente con el nombre de la carpeta de tu tema principal. Esto le indica a WordPress qué tema usar como principal. Si el nombre es incorrecto, WordPress no sabrá en qué tema debe basarse el tema secundario.
Limpia tu caché
A veces, el almacenamiento en caché puede impedir que veas las actualizaciones. Intenta borrar la caché, sobre todo si usas un plugin de caché. También es útil borrar la caché del navegador o abrir el sitio en una ventana de incógnito para comprobar si se muestran los cambios. Si estás trabajando activamente en el tema hijo, considera desactivar cualquier plugin de caché hasta que termines.
Utilice !important en su código CSS
Si observas que los estilos del tema principal siguen anulando tu CSS personalizado, prueba a añadir !important a los estilos que quieres priorizar. Esto obligará a que los estilos de tu tema secundario prevalezcan sobre los del tema principal. Por ejemplo:
p {color de fondo: gris !importante;}Este truco puede ser útil para elementos específicos, ID y clases CSS para garantizar que se apliquen los cambios.
Comuníquese con el soporte técnico del tema o consulte los foros
Si has probado todos estos pasos y tu tema hijo sigue sin funcionar, considera ponerte en contacto con el equipo de soporte del tema o consultar el foro del tema en WordPress.org. A veces, los temas tienen configuraciones únicas o código personalizado que pueden afectar al funcionamiento de los temas hijos, y el desarrollador podría tener consejos específicos.
Conclusión
¡Y eso es todo! A estas alturas, ya deberías tener una comprensión sólida de qué es un tema hijo de WordPress y cómo funciona junto con un tema principal. Instalar un tema es solo el comienzo al crear un sitio web de WordPress.
Aunque el editor Gutenberg integrado o el constructor de temas te permiten realizar ajustes de diseño, crear un tema hijo te abre aún más posibilidades. Con un tema hijo, no solo puedes ajustar el diseño, sino también personalizar la funcionalidad sin modificar los archivos principales, lo que te da total libertad para que tu sitio sea verdaderamente único.
Preguntas frecuentes sobre la creación de un tema secundario en WordPress
¿Qué es un tema hijo en WordPress y por qué debería usar uno?
Un tema hijo es una versión personalizada de tu tema existente que te permite modificar estilos CSS, archivos PHP y archivos de plantilla sin afectar directamente al tema principal. Usar un tema hijo básico garantiza que se conserve toda la funcionalidad del tema actual, a la vez que permite actualizar el tema principal sin perder los nuevos estilos ni fragmentos de código.
¿Cómo creo un tema hijo manualmente en WordPress?
Para crear un tema hijo manualmente, primero crea una carpeta en el directorio de temas de wp-content, añade un primer archivo, como style.css, con el valor de plantilla correcto que apunte al tema padre y, opcionalmente, incluye un archivo functions.php para administrar las funciones del tema hijo. Este proceso te permite añadir estilos personalizados y modificar archivos específicos de forma segura sin editar directamente el tema padre.
¿Puedo crear un tema secundario usando un complemento en lugar de codificar?
Sí, puedes crear un tema hijo con un plugin, que genera automáticamente el directorio del tema hijo, así como los archivos style.css y functions.php. Este método es ideal para principiantes que desean evitar editar directamente archivos PHP o escribir fragmentos de código.
¿Qué debo comprobar si mi tema hijo de WordPress no funciona?
Si su tema secundario está inactivo, verifique que el nombre de la carpeta coincida con el del tema principal, confirme que style.css tenga el valor de plantilla correcto, revise las funciones del tema secundario y borre la caché. Además, asegúrese de que cualquier versión personalizada de archivos específicos siga el dominio de texto y las comillas correctas.
¿Puede un tema secundario incluir tipos de publicaciones personalizados y otras características únicas?
Sí, un tema hijo puede incluir nuevos tipos de entradas personalizadas, imágenes destacadas y otras funciones, manteniendo intacto el tema principal. Permite añadir nuevos estilos, fragmentos de código o incluso crear un tema de bloque, conservando las actualizaciones del tema activo.
