Cómo crear un child theme en WordPress: una guía fácil

Como propietario de un sitio web de WordPress, es natural que quieras jugar con el diseño del sitio web y la funcionalidad de los temas de WordPress. Pero, ¿cuál es la mejor manera de hacerlo sin meterse con el tema original? Un tema secundario en WordPress es una excelente manera de modificar y probar su tema sin rascarse la cabeza con el riesgo de interrumpir su tema original.

Usar un tema secundario de WordPress es una forma inteligente de personalizar de forma segura el código de su tema sin arriesgar su trabajo. Si está planeando hacer ediciones en CSS, HTML o PHP de su tema, un tema secundario es el camino a ver. ¿Por qué? Porque sin uno, cualquier actualización de su tema principal podría borrar sus cambios.

Para facilitar las cosas, hemos elaborado una guía para principiantes que explica cómo funciona un child theme, cómo configurarlo y cómo hacer los cambios que desea. ¡Sumérgete y personaliza con confianza!

Un tema secundario, como su nombre indica, es como un «complemo» a su tema principal o principal, heredando sus características y estilos. Cuando está buscando personalizar su tema de WordPress, sumergirse directamente en los archivos del tema puede ser arriesgado porque cualquier cambio puede alterar el tema principal. Ahí es donde entran los temas secundarios, son una forma más segura de hacer modificaciones sin tocar los archivos originales.

El tema secundario hereda automáticamente el estilo principal del archivo style.css del tema principal, que establece el aspecto general del tema. Con un tema secundario, puede modificar o agregar fácilmente a este estilo agregando sus propios archivos o haciendo ajustes a los existentes. Esto le da la flexibilidad de personalizar el tema sin cambiar los archivos originales.

Los temas secundarios se almacenan en su propia carpeta, separados del tema principal, y dependen de la función principal a menos que decida cambiar las cosas. Cuando activas un tema secundario en WordPress, está vinculado al tema principal, y WordPress comprobará primero los archivos del tema secundario. Si un archivo no ha sido cambiado, WordPress simplemente usará la versión principal.

Recuerde, sin embargo, que un child theme no puede funcionar solo. Necesita el tema principal instalado justo al lado para funcionar correctamente

Beneficios de usar un child theme en WordPress

Crear un tema secundario es una forma inteligente de hacer cambios en su sitio de WordPress sin el riesgo de perder todo su arduo trabajo. Si editara los archivos del tema principal directamente, cada vez que el tema recibe una actualización, sus personalizaciones se borrarían. Esto puede dejarte atascado con una opción frustrante: o bien omitir todas las actualizaciones futuras, lo que puede conducir a problemas de compatibilidad y seguridad, o actualizar y perder el tiempo y el esfuerzo que invierte en personalizar tu tema de WordPress.

Sin embargo, con un child theme, no tienes que tomar esa decisión. Todas sus modificaciones se almacenan de forma segura en una carpeta separada, lo que significa que puede conservar sus cambios incluso cuando se actualiza el tema principal. Además, esta configuración facilita el movimiento de sus personalizaciones de un sitio a otro si es necesario, ahorrándole tiempo si está trabajando en varios sitios o migrando a uno nuevo.

Otra gran aja de usar un tema secundario es que es una excelente manera de aprender sobre el desarrollo de temas personalizados en un entorno de bajo riesgo. Puede experimentar con cambios y nuevas características, y si algo no sale según lo planeado, simplemente puede deshabilitar el tema secundario. Su sitio volverá instantáneamente a la apariencia y funcionalidad originales del tema principal, por lo que no se hace ningún daño.

Cosas que hacer antes de crear un tema secundario en WordPress

Ahora, hemos visto a muchos usuarios de WordPress ansiosos por saltar a personalizar sus sitios, solo para golpear una pared cuando surgen errores inesperados. Es totalmente comprensible, ponerse manos a la obra con un child theme puede parecer emocionante hasta que los desafíos técnicos comienzan a aparecer.

Por eso es esencial prepararse un poco antes de sumergirse, al igual que lo haría antes de tomar un examen. Aquí hay algunos consejos que podrías tomar antes de comenzar a crear tu child theme:

Comprender los conceptos básicos del código

Trabajar con un child theme significa que tendrás que lidiar con el código. Como mínimo, un conocimiento básico de HTML, CSS y PHP será útil (y posiblemente JavaScript si quieres tener fantasía). Si eres nuevo en la codificación, el manual de temas de WordPress es un gran lugar para comenzar para obtener una orientación rápida.

Elige el tema de los padres adecuado

Elija un tema principal que ya esté cerca del aspecto y la funcionalidad que desea. Idealmente, encontrará uno que solo necesita unos pocos ajustes, lo que hace que su proceso de personalización sea más fluido. Si estás cambiando de tema por completo, echa un vistazo a nuestra lista de verificación de cosas que hacer antes de cambiar los temas de WordPress, ¡te ahorrará algunos posibles dolores de cabeza!

Usar un sitio local o de estadificación para las pruebas

Es mejor experimentar en un sitio local o en un sitio de ensayo en lugar de ir directamente a su sitio en vivo. De esta manera, si cometes un error, no afectarás la apariencia o funcionalidad de tu sitio en vivo.

Cree una copia de seguridad de su sitio

Antes de realizar cualquier cambio, haga una copia de seguridad de su sitio web. Si es tu primera vez, un complemento como Duplicator puede ayudar a que el proceso de copia de seguridad sea simple y sin estrés. De esta manera, puede restaurar su sitio rápidamente si algo no sale según lo planeado.

Una vez que haya cubierto estos conceptos básicos, ¡estará listo para seguir nuestra guía paso a paso para crear el tema de su hijo con confianza!

Cómo crear un tema secundario en WordPress manualmente: 5 sencillos pasos

Crear un tema hijo en WordPress es más fácil de lo que parece, y es una excelente manera de entender cómo funcionan los temas secundarios sin arriesgar su tema principal.

A través de cómo crear un tema secundario basado en el tema predeterminado Twenty Fifteen de WordPress y hacer algunos ajustes personalizados para ver el proceso en acción.

Paso 1: Crear una carpeta child theme

Comience creando una nueva carpeta en su ordenador donde irán todos los archivos para su tema hijo. Más tarde subirás esta carpeta a tu sitio web.

Puede nombrar la carpeta después de su tema principal con «-child» añadido al final. Por ejemplo, si su tema principal se llama «Twenty Twenty-Two», su carpeta temática secundaria se llamaría twentytwentytwo-child. Esto hace que sea fácil de identificar como un child theme para el padre.

Paso 2: Configure una hoja de estilo para el tema de su hijo

A continuación, cree un archivo style.css dentro de su nueva carpeta de temas secundarios. Este archivo contenderá todos los estilos personalizados para su tema secundario.

Para configurar la hoja de estilo correctamente, agregue los siguientes comentarios de encabezado en la parte superior de su archivo style.css. Esto le dice a WordPress que su nuevo tema es hijo del tema principal:

Theme Name: Twenty Twenty-Two ChildTheme URI: https://wordpress.org/themes/twentytwentytwo/Author: WordPress TeamAuthor URI: https://wordpress.org/Template: twentytwentytwoDescription: Child Theme for Twenty Twenty-TwoVersion: 1.0*/

Una vez guardado, vaya a su panel de WordPress y diríjame a Apariencia → Temas. Ahora debería ver el tema de su hijo en la lista.

Paso 3: Vincula las hojas de estilo del tema de padres e hijos

Para asegurarnos de que se apliquen los estilos de su tema principal, necesitamos vincular su hoja de estilo al tema secundario. Esto se hace creando un archivo functions.php en su carpeta de temas secundarios y agregando 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 estilo del tema principal para que su tema secundario herede todo su estilo.

Paso 4: Edite la hoja de estilo del tema del niño (style.css)

Ahora puede comenzar a agregar sus estilos personalizados directamente en el archivo style.css del tema secundario. Por ejemplo, para cambiar el color de los enlaces en su sitio, podría agregar:

a {color: #D54E21;text-decoration: none;}

Esta regla anula el estilo de enlace del tema principal sin afectar al resto de su diseño.

Paso 5: Modificar un archivo de plantilla

Con un tema secundario, también puede modificar plantillas individuales. Digamos 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 su carpeta de temas secundarios.
• Abra el archivo en un editor de texto y haga sus cambios.

Por ejemplo, si desea eliminar la sección de comentarios de las páginas de publicaciones individuales, localice esta parte del código:

if ( comments_open() || get_comments_number() ) :comments_template();endif;

Elimínelo o coméntelo para ocultar los comentarios. WordPress utilizará el archivo single.php modificado de la carpeta del tema secundario, por lo que cualquier actualización del tema principal no sobrescribirá su personalización.

Cómo crear un child theme con un complemento (no se requiere codificación)

Si no te gusta la codificación, pero aún quieres crear child theme, ¡estás de suerte! Si bien hay varios complementos que puede usar para crear un child theme en WordPress, vamos a usar el complemento -The Child Theme Configurator para explicar el proceso.

Este complemento hace que sea súper fácil configurar y personalizar un tema secundario para temas clásicos (sin bloque) de WordPress. Aquí tienes una guía sencilla paso a paso para empezar.

Paso 1: Instalar y activar el complemento

Primero, vaya a su panel de WordPress, busque «Configurador de child themes» en la sección Complementos e instálelo. Una vez activado, dirígete a Herramientas → Temas para niños.

Paso 2: Configurar el child theme

En el Configurador de temas para hijos, vaya a la pestaña Padre/Hijo. Verás una opción para elegir una acción, selecciona «CREAR un nuevo child theme» para comenzar.

Paso 3: Elige el tema de tu padre

A continuación, seleccione el tema principal sobre el que desea construir en el menú desplegable. Para este ejemplo, digamos que estamos usando el tema Hestia. Después de elegir su tema, haga clic en el botón «Analizar» para asegurarse de que el tema sea compatible para crear un tema secundario.

Paso 4: Nombre la carpeta temática de su hijo

A continuación, se le pedirá que nombre la carpeta donde se almacenará el tema secundario. Puedes ser creativo aquí o mantenerlo simple con un nombre como «Hestia-child» para mantener las cosas organizadas.

Paso 5: Decide dónde guardar estilos personalizados

Aquí hay una opción importante: puede guardar nuevos estilos personalizados en la hoja de estilo principal (style.css) de su tema hijo, o en un archivo de hoja de estilo separado.

• Hoja de estilo principal: Este es el archivo principal donde los estilos se guardan por defecto. Cualquier cambio aquí sobrescribirá los estilos de tema originales.

• Hoja de estilo separada: esta opción guarda sus estilos personalizados en un nuevo archivo, por lo que los estilos del tema original permanecen intactos.

Por ahora, elegiremos la hoja de estilo principal, pero siéntase libre de probar la opción separada si desea preservar el aspecto del tema principal por completo.

Paso 6: Establecer el manejo de la hoja de estilo del tema principal

Desplácese hacia abajo y elija cómo cargar la hoja de estilo del tema principal. Nos quedaremos con la opción predeterminada «Usar la cola de estilo de WordPress», ya que esto permite que el complemento lo maneje automáticamente.

Paso 7: Personalizar los detalles del child theme

Cuando llegue al Paso 7, haga clic en «Haga clic para editar los atributos del tema secundario». Aquí, puede agregar detalles como el nombre, la descripción y la versión del tema secundario.

Paso 8: Copiar menús y widgets

Normalmente, crear un tema secundario restablecerá sus menús y widgets. Para evitar restablecerlos, marque la casilla en el paso 8 para copiarlos del tema principal al tema secundario.

Crea tu child theme

Finalmente, haga clic en «Crear nuevo child theme». El complemento creará automáticamente una carpeta para su tema hijo, completa con los archivos style.css y functions.php necesarios para futuras personalizaciones.

Vista previa y activación

Antes de activar, haga clic en el enlace de vista previa en la parte superior de la pantalla para asegurarse de que todo se vea bien. Si la vista previa del tema de su hijo se muestra bien sin romper ningún elemento, ¡siga adelante y haga clic en «Activar y publicar» para que esté en vivo!

¡Y ahí lo tienes! Su tema hijo ya está activo. En este punto, se verá y funcionará igual que el tema de tu padre. Ahora puede agregar de forma segura personalizaciones al tema secundario sin afectar al original. ¡Feliz personalización!

¿Qué hacer si su child theme de WordPress no funciona?

¿El tema de tu hijo no muestra tus cambios? No se preocupe, aquí hay algunos problemas comunes y correcciones para que funcione como se espera.

Compruebe dos veces su archivo functions.php

Comience asegurándose de haber colado la hoja de estilo del tema secundario en su archivo functions.php. Si no está en cola, el tema secundario no se cargará correctamente, y su sitio continuará mostrando el tema principal, haciendo que parezca que sus cambios no se muestran.

Confirme que su hoja de estilo lleva el nombre style.css

Vuelva a comprobar que ha nombrado su hoja de estilo style.css, no stylesheet.css o cualquier otra cosa. WordPress espera que la hoja de estilo principal del tema secundario se llame style.css. Si tiene un nombre diferente, su archivo functions.php no lo reconocerá y sus estilos personalizados no se aplicarán.

Verifique el nombre de la plantilla en style.css

En su archivo style.css, el campo Plantilla debe coincidir exactamente con el nombre de la carpeta de su tema principal. Esto le dice a WordPress qué tema usar como padre. Si el nombre es incorrecto, WordPress no sabrá en qué tema debe basarse el tema secundario.

Borra tu caché

A veces, el almacenamiento en caché puede impedir que veas actualizaciones. Intenta borrar tu caché, especialmente si estás usando un complemento de almacenamiento en caché. También es útil borrar la caché de su navegador o abrir su sitio en una ventana de incógnito para ver si se muestran sus cambios. Si está trabajando activamente en el tema secundario, considere desactivar cualquier complemento de almacenamiento en caché hasta que haya terminado.

Conclusión

¡Y eso es todo! A estas alturas, deberías tener una sólida comprensión de lo que es un tema secundario de WordPress y cómo funciona junto con un tema principal. Instalar un tema es solo el comienzo de la construcción de un sitio de WordPress.

Mientras que el editor Gutenberg integrado o el creador de su tema pueden ayudarle a hacer ajustes de diseño, crear un tema secundario abre aún más posibilidades. Con un tema secundario, no solo puede ajustar el diseño, sino también personalizar la funcionalidad sin tocar los archivos principales, lo que le da total libertad para hacer que su sitio sea verdaderamente único.