Saltar al contenido

Qué es y cómo crear un tema hijo o child theme en WordPress

Qué es y cómo crear un tema hijo o child theme en WordPress
5 (100%) 1 vote

2UbV0s2

Los temas están entre los puntos más vendidos de WordPress, pero eso no significa que no vengan con sus problemas. La mayoría de los temas, incluyendo los más populares, tendrán errores que necesitan ser corregidos con el tiempo.

Después de cada actualización del tema, también existe la posibilidad de que se rompa su sitio web. Dicho de otra manera, hay que resolver los problemas a medida que surgen. Ahí es donde entran en juego los child themes de WordPress. Como su nombre indica, los temas hijo son hijos del tema padre.

Con ellos, usted puede personalizar cada uno de sus temas favoritos sin correr el riesgo de causar daños significativos a su sitio web o perder todo su trabajo duro si surge la necesidad de una actualización. Crear un tema hijo de WordPress es tan fácil como crear una carpeta y dos archivos, un archivo.css y un.php que contienen algún código que puedes copiar desde esta página.

¿Qué son los child themes de WordPress y por qué son importantes?

Los temas de WordPress Child son una opción mejor y más estable cuando se trata de la creación de sitios web personalizados. Ofrecen al diseñador o desarrollador de sitios web la opción de personalizar la apariencia de los sitios web como una función. Los temas para padres borrarán cualquier personalización que haya realizado en ellos después de una actualización del tema.

Un tema hijo permite al usuario mantener las personalizaciones separadas del tema base (padre) e intactas después de la actualización. También puede deshabilitar cualquier cambio que realice en el tema hijo. Además, los child themes son muy fáciles de configurar.

Creación manual de temas hijo de WordPress

Antes de empezar a crear temas hijo de WordPress, tendrá que hacer dos cosas. En primer lugar, tendrá que hacer una copia de seguridad del sitio web de WordPress, que es lo primero que siempre debe hacer cuando actualice el sitio web. Puede hacerlo de varias maneras, pero el plugin UpdraftPlus es una opción bastante fácil. Aquí están los pasos a seguir cuando se crea un child theme

Paso 1: crear una carpeta para el tema hijo

Cada tema de WordPress tiene su propia carpeta, los temas que ves en tu backend tienen todos su propia carpeta. La carpeta contendrá todos los archivos críticos del tema y significa que tendrá que crear uno para el tema hijo. Crear una nueva carpeta temática para niños vacía es fácil y directo. Todo lo que tiene que hacer es crear una carpeta como lo haría con cualquier otra carpeta de su ordenador.

Para Windows, simplemente vaya a su escritorio > haga clic con el botón derecho y, a continuación, haga clic en la nueva carpeta.

Para ordenadores con sistema operativo Apple, haga clic en archivo > nueva carpeta.

Es importante nombrar la carpeta, ya que esto le ayudará a encontrarla y a trabajar con ella más tarde. Recomendamos mantenerlo simple usando el nombre del tema principal y añadiendo hijo al final. Así que para nuestro ejemplo, estamos usando el tema de los veinte y diecisiete como el tema de los padres, así que le pondremos el nombre de nuestro tema de los veinte y diecisiete años a nuestro hijo.

Paso 2: Crear la nueva hoja de estilo CSS

Después de crear la carpeta de temas hijo de WordPress, tendrás que añadir tu primer archivo: style.css. El.css significa Cascading StyleSheet (CSS). El archivo incluye todas las reglas para el diseño de un tema y la apariencia general. Lo que es más importante, cualquier cambio que realice en la hoja de estilo del tema hijo anulará los del tema principal.

Puedes usar cualquiera de tus editores favoritos aparte de Word para crear el archivo style.css. Sugerimos el editor de texto básico integrado en los sistemas operativos Windows y Apple.

Abra el editor de texto, luego copie y pegue el código de abajo.
/* Nombre del tema: Twenty Seventeen Child Theme Theme URI: https://thrivewp.com Descripción: Autor de Twenty Seventeen Child Theme: ThriveWP Author URI: https://thrivewp.com Plantilla: twentyseventeen Versión: 1.0.0 */ /* Su personalización impresionante comienza aquí *¡Una
guía sencilla para crear child themes de WordPress! #WordPress #WordPressTutoriales #ThriveWP Click To Tweet

Una vez que haya pegado el código, tendrá que cambiar algunas cosas. La más importante es la Plantilla: tiene que ser exactamente igual que el nombre de la carpeta de temas principales. Se encuentra en la carpeta wp-content/themes.

Puede acceder a esto a través del administrador de archivos de su sitio web o del programa ftp. Los otros elementos del código anterior pueden cambiarse a lo que desee, pero se aconseja mantener los nombres y descripciones de los temas para que las cosas sean sencillas.

Ahora que el código style.css es añadido y editado, necesitará guardarlo como un archivo.css. Haga clic en Guardar como y para el nombre ponga style.css y guárdelo en la carpeta vacía del tema hijo.

Paso 3: Activar el tema de su hijo

La activación del nuevo tema hijo es tan simple como instalarlo en el panel de control de WordPress. Primero tendrá que convertir su nueva carpeta de temas hijo en una carpeta.zip. Si hace clic con el botón derecho del ratón en la carpeta y luego hace clic en enviar a.zip, lo hará por usted.

Ahora ve a tu tablero de WordPress y luego a Apariencia > Temas > Añadir Nuevo > Cargar Tema. Aquí seleccionará y cargará su carpeta temática infantil comprimida. Una vez instalado, el nuevo tema debería aparecer con una miniatura en blanco en Apariencia > Temas Buscarlo y, a continuación, haga clic en Activar.

Después de eso, el tema hijo comenzará a correr, pero después de comprobar la interfaz, te darás cuenta de que es un desastre. La razón detrás de esto es que el style.css estará desnudo. Puedes arreglarlo simplemente importando el estilo del padre.

Paso 4: Añadir el archivo functions.php

El style.css regirá el estilo y el diseño de su sitio web, pero functions.php permite la adición de funcionalidades avanzadas y personalizaciones a los temas. Además, el archivo permite importar el estilo del tema principal. Sin el archivo functions.php importando el estilo, el tema hijo no funcionará.

De la misma manera que creó su archivo style.css, ahora necesita crear el archivo functions.php. Abra su editor de texto y cree un nuevo archivo. Ahora copia y pega el siguiente código en él.
<?php /* Escribe tus increíbles funciones debajo de */ add_action(‘wp_enqueue_scripts’,’my_theme_enqueue_styles”); function my_theme_enqueue_styles() { $parent_style =’twentyseventeen-style’; // Esto es’twentyfifteen-style’ para el tema de los Quince. wp_enqueue_style( $parent_style, get_template_directory_uri() . wp_enqueue_style( N-‘estilo.css’); wp_enqueue_style( N-‘estilo infantil’, get_stylesheet_directory_uri() . “/style.css”, array( $parent_style), wp_get_theme()->get(‘Version’) ); }
Sólo hay una cosa que necesitas cambiar en este código y es el $parent_style = bit.

Es muy importante que lo hagas correctamente, de lo contrario, el tema de tu hijo no heredará el estilo correctamente o, lo que es peor, cargará el estilo dos veces, lo que repercutirá en los tiempos de carga del sitio.

La parte que nos interesa es el bit después de $parent_style = “twentyseventeen-style”.

twentyseventeen-style le dice al archivo de funciones de donde sacar el estilo padre. Cada tema es diferente, así que la mejor manera de encontrar esta línea es ir al archivo functions.php del tema de sus padres y buscar wp_enqueue_style.

Puede encontrar varias instancias de esta línea para reducirla y buscar más en get_stylesheet_directory_uri O get_stylesheet_uri. Ahora deberías haber encontrado una línea de código con ambas frases y en ella, deberías ver el estilo que necesitamos como el estilo twentyseventeen.

Copia eso y reemplázalo en el código de arriba. $parent_style =’twentyseventeen-style’; // Esto es’twentyfifteen-style’ para el tema Twenty Fifteen.
Functions.php screenshotAparte
del archivo functions.php, cualquier otro archivo que incluya en el niño sobrescribirá el archivo en el tema principal de su sitio web. En la mayoría de los casos, es mejor hacer una copia de cualquier archivo de plantilla que desee cambiar del tema principal y luego modificar los archivos copiados.

No cambie el archivo de sus padres. Un ejemplo rápido: si desea realizar ediciones en el archivo header.php del tema principal, debe empezar por copiar el archivo en la carpeta de temas secundarios y, a continuación, personalizarlo. De esta forma, las ediciones no se pierden cuando se actualiza el tema principal.

Usando functions.php

A diferencia de style.css, functions.php de los temas hijo no invalidará a la contraparte del tema padre. Se cargará como una adición a functions.php del tema principal. Por lo tanto, proporciona un método mejor para personalizar la funcionalidad del tema principal.

Por ejemplo, al agregar una función PHP al tema, sólo necesita abrir el archivo functions.php hijo y agregarlo allí. Nunca copie todo el contenido de functions.php desde el tema padre al tema hijo, ya que lo cargará dos veces y causará problemas con su sitio web.

Los archivos functions.php tienen una estructura simple – la etiqueta PHP de apertura situada en la parte superior y los bits de PHP debajo de ella. Usted puede agregar pocas o tantas funciones al archivo como desee, tal como lo hicimos anteriormente.

Encolado de guiones y estilos

Además de encolar el estilo como hicimos arriba, puedes añadir muchas otras funciones al archivo functions.php, por ejemplo, puedes añadir una línea para decirle a WordPress que no envíe un correo electrónico a la administración del sitio web cuando el núcleo de WordPress se actualice automáticamente. O bien, puede agregar una función para agregar compatibilidad con vídeo con capacidad de respuesta en el tema.

Formatos de publicación

El tema hijo heredará los post_formatos tal y como los define el tema padre. Sin embargo, al crear los temas hijo, debe tener en cuenta que add_theme_support (post-formats’)” anulará cualquier formato que defina el tema padre.

Soporte RTL

Para que el tema hijo sea compatible con los lenguajes RTL, deberá agregar el archivo rtl.css. Si el archivo padre no tiene un archivo rtl.css, debe agregar el archivo al tema hijo. Después de la adición, WordPress cargará el archivo rtl.css automáticamente si is_rtl() es verdadero.

Internacionalización

Puede preparar los child themes para su posterior traducción a cualquier otro idioma. Para traducirlos, debe utilizar la API de internacionalización de WordPress. Para internacionalizar el child theme, sólo tiene que seguir estos pasos.

  • Añada el directorio de idiomas. Por ejemplo, veintidós hijos/idiomas/
  • Añadir archivos de idioma
  • Cargar un dominio de texto
  • Usa las funciones GetText como una forma de añadir el soporte de i18n para las cadenas

En esta etapa, las cuerdas de su hijo estarán listas para ser traducidas. Para asegurarse de que se internacionalizan correctamente para la traducción, tendrá que incluir el dominio de texto twentynineteenchild en cada cadena.

Usar un plugin para crear un tema hijo de WordPress

Si no quieres hacer el trabajo, podrías considerar usar un plugin como Childify Me que es muy fácil de usar PERO usa un método antiguo de llamar al estilo padre que podría impactar un poco en la velocidad del sitio.

Simplemente vaya a su tablero de WordPress y luego a Plugins > Add New y busque Chidify Me. Instale y active el plugin. No hay ninguna configuración para el plugin, todo lo que necesita hacer para crear el tema hijo es ir a Apariencia > Personalizador y luego desplazarse hasta la parte inferior.

Verá el botón Childify Me. Escriba el nombre del tema hijo deseado y pulse crear. Todo lo que tiene que hacer es publicar y activar.

Conclusión

Los child themes de WordPress agilizarán el proceso de desarrollo de su sitio web. Reducirán el riesgo de daños en el sitio web cuando juegues con el estilo. Son fáciles de instalar y no tienen inconvenientes.