Qué es un tema hijo y cómo crear uno en WordPress

Introducción

Los temas hijo de WordPress son temas que funcionan junto con un tema real (padre) de WordPress y heredan todas sus funciones, características y estilo. Los temas hijo de WordPress son el método principal para personalizar temas.

El concepto de tema padre-hijo fue desarrollado por el núcleo de WordPress para permitir a los usuarios personalizar sus temas de forma eficiente y segura. Como todos sabemos, los temas de WordPress se actualizan con regularidad. Cuando se actualiza un tema, se sobrescriben todos los cambios personalizados realizados previamente. Anteriormente, no era posible actualizar un tema de WordPress sin perder estos cambios personalizados. Los usuarios tenían dos opciones: o malgastar sus esfuerzos y perder su trabajo, o exponer su sitio a un riesgo de explotación debido a las vulnerabilidades de seguridad del tema obsoleto. A diferencia de los temas padre, los temas hijo permiten que las personalizaciones permanezcan separadas y no se vean afectadas por la actualización del tema padre.

¿Cuándo se debe utilizar un tema hijo de WordPress?

En primer lugar, debe saber que no todos los temas de WordPress se han desarrollado siguiendo el concepto de tema padre-hijo. Los temas padre de WordPress suelen denominarse marcos temáticos, que contienen sus propios ganchos y filtros. Debes elegir el tema padre con cuidado y asegurarte de que es fácil de usar y funciona correctamente cuando se configura como tema hijo.

En segundo lugar, debe determinar el propósito de crear un tema hijo. Hay situaciones en las que no es la solución más eficaz, dependiendo de lo que quieras conseguir.

Si estás utilizando un tema personalizado que ha sido desarrollado específicamente para ti, no es esencial crear un tema hijo, ya que no hay riesgo de que tus cambios se pierdan. No considere esto como una recomendación de no utilizar un tema hijo, sino como una posible opción. Si no quieres editar directamente los archivos de tu tema, puedes optar por un tema hijo si tu tema personalizado permite tal configuración. Además, editar los archivos del tema siempre conlleva un cierto riesgo, especialmente si no eres un desarrollador experimentado.

Si su objetivo es añadir una funcionalidad específica en lugar de realizar personalizaciones relacionadas con el diseño, el uso de un plugin o la codificación de un plugin podría ser un enfoque más adecuado. En tal caso, puedes conservar la funcionalidad si decides cambiar del tema actual a otro. Sin embargo, si la funcionalidad se implementa en el tema hijo, se perderá.

¿Cómo funciona un tema hijo de WordPress?

Como ya se ha dicho, el tema hijo hereda el diseño y la funcionalidad del tema padre, pero ¿cómo funciona esto exactamente?

El tema hijo contiene instrucciones especiales que indican a WordPress que se trata de un tema hijo y cuál es el actual Tema principal es. WordPress utiliza entonces el código del tema padre y sobrescribe sólo las partes necesarias con el código definido en el tema hijo.

Cada tema hijo debe tener dos archivos necesarios: un archivo de hoja de estilos (style.css) y un archivo de funciones (functions.php). El archivo stylesheet contiene un texto comentado que indica a WordPress que se trata de un tema hijo y cuál es el tema padre. El archivo functions contiene una función que mapea el archivo de la hoja de estilos del tema padre para que la hoja de estilos del tema hijo se cargue primero. También se utiliza para añadir ciertas funciones insertando el código necesario en el archivo.

Dependiendo de lo que quiera conseguir, puede que necesite crear archivos adicionales en el tema hijo, por ejemplo, archivos de plantilla, partes de plantilla, archivos de inclusión, etc.

El mayor reto a la hora de trabajar con temas hijo es probablemente aprender a utilizarlos. Los frameworks robustos requieren un cierto grado de familiarización, ya que cada uno tiene sus propios ganchos y filtros.

Antes de comenzar la creación de un tema hijo, le recomendamos que trabaje en un sitio web de desarrollo o de prueba. Afortunadamente, aquí en ORC Webhosting GmbH, ofrecemos un solo clic WordPress staging, para que pueda probar fácilmente todo antes de empujar en vivo a su sitio web de producción.

Crear un tema subordinado

Para crear un tema hijo básico de WordPress, debe crear los dos archivos necesarios mencionados anteriormente (hoja de estilos y archivo de funciones) en una carpeta nueva e independiente.

Esta guía proporciona un ejemplo utilizando el tema estándar de WordPress Twenty Twenty.

Crear una carpeta para un tema hijo

En primer lugar, debe crearse una nueva carpeta para los archivos del tema hijo. Esta carpeta debe estar ubicada en el directorio de temas de WordPress (wp-content/themes). Se recomienda nombrar la carpeta como el tema principal, seguido de "-child", por ejemplo, "twentytwenty-child".

Puede crear una nueva carpeta con el nombre introducido en Gestor de archivos integrado en cPanel o con tu cliente FTP favorito.

Creación de un archivo de hoja de estilo

Después de crear la nueva carpeta, debe crear un archivo con el nombre style.css en ella.

Este archivo contiene las reglas CSS que controlan la apariencia de su tema. Debe incluir el siguiente comentario de cabecera, que contiene información básica sobre el tema e indica a WordPress que es un tema hijo del tema padre definido.

/*
Nombre del tema: Twenty Twenty Child
URI del tema: http://meinewebseite.ch
Descripción: Twenty Twenty Child Theme
Autor: John Smith
Autor URI: http://meinewebseite.ch
Plantilla: twentytwenty
Versión: 1.4
Licencia: GPLv2 o posterior
Licencia URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

Si escribe el comentario en el archivo style.css Si desea insertar un nuevo tema, asegúrese de insertarlo al principio y reemplace los detalles con la información de su tema.

Los detalles más importantes a los que debe prestar atención son los siguientes:

Nombre del tema - Debe dar al tema subordinado un nombre único.
Plantilla - Debe introducir el nombre del directorio del tema padre. Esta línea sólo existe en los temas subordinados y no funcionará correctamente sin ella. En nuestro caso, el directorio del tema es "twentytwenty". Si está utilizando un tema diferente, por favor asegúrese de reemplazar esta línea en consecuencia. Puede comprobarlo en wp-content/themes.

Encontrará el resto de detalles en su Panel de administración de WordPress > Ver > Temas > Detalles del tema.

Si modifica los datos necesarios, asegúrese de guardar el archivo.

Crear archivo de funciones

Para garantizar que los estilos del tema principal se integran correctamente, debe crearse un nuevo archivo llamado functions.php en el directorio del tema hijo. De lo contrario, el tema hijo aparecerá sin estilo y de forma incorrecta.

El método ideal para cargar hojas de estilo en cola es que el tema padre cargue las hojas de estilo de los temas padre e hijo. Sin embargo, no todos los temas de WordPress hacen esto. Por lo tanto, necesita comprobar el código del tema padre para averiguar cómo funciona y averiguar el nombre del manejador que usa el tema padre. El manejador es el primer parámetro de la función wp_enqueue_style().

Si el diseño padre carga el estilo con una función que empieza por obtener_plantilla el diseño hijo sólo tiene que cargar los estilos hijo a través del manejador del elemento padre en el parámetro de dependencia.

get('Version') // esto sólo funciona si tienes Version en la cabecera del estilo
    );
}

Si el diseño padre carga el estilo con una función compatible con get_stylesheet el diseño hijo debe cargar las hojas de estilo padre e hijo. Debe asegurarse de utilizar el mismo nombre de manejador que el diseño padre utiliza para las hojas de estilo padre.

parent()->get('Versión')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // esto sólo funciona si tienes Version en la cabecera del estilo
    );
}

Si introduce el código correspondiente en el fichero funciones.php no olvide guardar el archivo.

Esto completa la creación del tema hijo. Ahora sólo necesita ser activado.

Activar tema hijo

El último paso es activar el tema hijo. Para ello, inicie sesión en el panel de administración de WordPress y vaya a Apariencia > Temas en el menú de la izquierda.

En la página "Temas", encontrará su nuevo tema subordinado entre los demás Temas de WordPress. Sitúe el puntero del ratón sobre él y haga clic en el botón "Activar".

Una vez hecho esto, su nuevo tema hijo funcionará.

Tenga en cuenta que no notará ninguna diferencia en el aspecto y el comportamiento de su sitio web, ya que no hemos realizado ningún ajuste estilístico o funcional.

Ahora puede empezar a hacer las personalizaciones que desee sin preocuparse de que su trabajo se pierda cuando se actualice el diseño.

¡Enhorabuena! En esta guía, ha aprendido a crear temas hijo de WordPress y a aplicar cambios de diseño y funciones a su sitio web de forma segura. Esperamos que hayas podido seguir nuestras instrucciones sin problemas y lograr el resultado deseado.