En este articulo veremos como crear un tema hijo a partir de un tema existente. Los temas de WordPress establecen la apariencia que tendrá nuestro sitio web.
Puedes elegir entre multitud de temas existentes cuando estás creando un sitio web. También puedes construir un tema propio. Por ejemplo, tu tema puede especificar qué dispositivos o acciones del usuario hacen visible el contenido. También puede tener tipografía y elementos de diseño personalizados, o puede mostrar el contenido, incluyendo imágenes y vídeos, en cualquier lugar que desees.
Los temas de WordPress no se limitan a la disposición y la tipografía, esta demostrado que los mejores temas son los mas bonitos y hacen que tu contenido sea más atractivo para los visitantes.
A continuación vamos a ver que relación existe entre un tema padre y un tema hijo y como implementarlo.
Contenido
¿Qué es un tema padre en WordPress?
La explicación realmente es sencilla, un tema padre es un tema completo. Esto quiere decir que el tema incluye todos los archivos de plantilla de WordPress y absolutamente todos los archivos necesarios para que el tema funcione.
Entre estos ficheros podemos ver los archivos index.php y style.css (la plantilla principal y los archivos de estilo, respectivamente). Estos son los únicos ficheros de plantilla necesarios para que el tema funcione. No obstante, prácticamente la mayoría de los temas también incluyen archivos PHP, archivos de localización, gráficos, Javascript y/o archivos de texto.
Se puede decir que todos los temas son considerados temas padre, a excepción de (como es obvio) de los temas hijo.
A continuación vamos a ver qué es un tema hijo y las ventajas que ofrece a los propietarios de sitios de WordPress.
¿Qué es un tema hijo en WordPress?
Al contrario de un tema padre que es un tema completo, un tema hijo es un subtema que hereda el aspecto, la administración y las funciones del tema padre. Cuando haces modificaciones en el tema hijo, éstas solo se aplican en los ficheros del tema hijo y no de su tema padre.
¿Cuáles son las ventajas de crear un tema hijo?
Crear un tema hijo permite actualizar el tema padre sin perder tus personalizaciones. Si no tienes un tema hijo, tendrás que editar cada uno de los ficheros del tema en uso directamente y cuando actualices el tema, tus personalizaciones se perderán. Sin un tema hijo, probablemente te enfrentarías a una tremenda elección: o actualizas o conservas las modificaciones. No actualizar conlleva muchos riesgos de seguridad, es posible que el tema tenga una vulnerabilidad que permita a un atacante acceder a sitios que no debería o realizar acciones para las que no está autorizado.
Hay dos ventajas extra en crear y personalizar un tema hijo. Están relacionadas con la primera. Mantener estas modificaciones en una carpeta separada de tu tema hace que sean fáciles de replicar o trasladar de un sitio a otro.
Si empiezas a personalizar tu tema hijo y algo va mal o no estás satisfecho, puedes simplemente desactivar el tema hijo. Esto restablecerá el tema padre y tu sitio web tal y como estaba.
No obstante, el crear un tema hijo no es siempre la mejor de las opciones. Si solo estás añadiendo CSS personalizado, entonces crear un tema hijo es ideal. Pero si vas a hacer grandes cambios en la funcionalidad del tema padre, entonces lo mejor será crear un tema nuevo que puedas editar inmediatamente.
Cómo crear un tema hijo en WordPress, paso a paso
Para crear un tema hijo en WordPress únicamente se requiere unos pocos pasos. Para enseñar los pasos que se deben seguir utilizaremos el tema predeterminado de WordPress Twenty Twenty-One como ejemplo.
Paso 1: Crear una carpeta de tema hijo.
En primer lugar, debes crear un directorio en el que puedas colocar todos los archivos de la plantilla y los activos de tu tema hijo. Para crear este directorio, se puede utilizar SSH, SFTP,FTP o utilizarás el Administrador de Archivos en el panel de control de tu proveedor de alojamiento de donde se encuentra tu WordPress. Elegir una de estas opciones depende de lo que permita tu proveedor de hosting.
Una vez que hayas abierto el Administrador de Archivos, haz clic en la carpeta public_html, www, html o el directorio dende se encuentre tu WordPress. A continuación, haz clic en la carpeta wp-content.
Busca la carpeta «themes». A continuación, crea una nueva carpeta en este directorio. Nombra esta carpeta utilizando el nombre del tema padre y añade «-child» al final. Así que si estuvieras creando un tema hijo de Twenty Twenty-One, nombrarías la carpeta «twentytwentyone-child». Esta carpeta será el directorio de tu tema hijo.
Paso 2: Crear una hoja de estilos para su tema hijo.
A continuación, tendrás que crear un archivo de hoja de estilos que contenga todas las reglas y declaraciones CSS para tu tema hijo. Para ello, cree un nuevo archivo de texto y nómbrelo «style.css».
Tendrás que añadir un comentario de cabecera obligatorio en la parte superior del archivo para que la hoja de estilos funcione realmente. Este comentario contiene información básica sobre el tema hijo, incluyendo que es un tema hijo con un tema padre particular.
Realmente sólo necesitas incluir dos cosas: el nombre del tema y la plantilla (es decir, el nombre del tema padre). Puedes incluir otra información, como una descripción, el nombre del autor, la versión y las etiquetas. Estos detalles adicionales son importantes si vas a publicar o vender tu tema hijo.
Este es un ejemplo de un comentario de cabecera completo para un tema hijo de Twenty Twenty-One. Para que funcione tu child theme o tema hijo el fichero style.css debe contener una cabecera especial, crea el fichero style.css dentro del directorio que hemos creado y añadele el siguiente contenido:
/* Theme Name: Twenty Twenty-One Theme URI: https://example.com/twenty-twenty-one-child/ Description: Twenty Twenty-One Child Theme Author: Jonh Doe Author URI: https://example.com Template: twentytwentyone Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: two-column, responsive-layout Text Domain: twentytwentyonechild */
Como en múltiples lenguajes de programación, las barras inclinadas y los asteriscos. Esto quiere decir que esta parte del código quedara como un comentario de CSS para que WordPress no intente ejecutarlo.
- Theme URI: La URL de la página principal del child theme.
- Description: La descripción de tu tema hijo.
- Author: El nombre de la persona que lo crea.
- Author URI: La dirección de la página web del autor.
- Template: El nombre del template del padre. Pero no el nombre del tema, sino el nombre del directorio que contiene el parent theme o tema principal.
- Tags: Las etiquetas por las que van a encontrar tu theme. En este caso, siempre uso las mismas que tiene el tema padre.
- Version: La versión del child theme. Como es la primera vez que lo creas, puedes poner 1.0.0. Si luego realizas modificaciones, puedes ir aumentando el número de la versión.
- License: El tipo de licencia bajo la que está sujeta el child theme. Existen muchas: Creative Commons, GPL, BSD, AGPL… En este caso, puedes usar la misma que la del tema padre.
- License URI: La URL de la licencia que has seleccionado.
- Text Domain: El text domain se usa para hacer un tema traducible, por lo que necesitas asignarle un nombre identificativo. Por ejemplo, el nombre del tema separado por guiones.
Esto es lo que como mínimo debe tener un tema hijo de WordPress para poder iniciarse. Mas tarde puede añadir tu propio CSS en este fichero. Ahora vamos a guardar solamente esto en este fichero en el directorio del tema hijo.
Paso 3: Poner en cola las hojas de estilo de los temas padre e hijo.
En este paso es cuando empezamos a modificar realmente el tema. Empezamos por poner en cola las hojas de estilo del tema hijo que estamos creando y de su tema padre. Haciéndolo de esta forma, garantizamos que el tema hijo para que cuando activemos el tema no se descuadre el formato del sitio web.
También hacemos que la hoja de estilos cargue antes que la del tema padre (pero sin anular esta) para que cuando añadamos el CSS customizado sobrescribiendo algo del tema padre, estas modificaciones se apliquen correctamente.
Para aplicar todo esto, tienes que crear otro fichero en el directorio de tu tema hijo. Tienes que llamarlo «functions.php», dentro del fichero añade este codigo:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }
Paso 4: Instalar y activar el tema hijo.
Para instalar y activar el tema hijo se hace de la misma manera que cualquier tema. Tienes dos opciones: puedes copiar la carpeta al sitio usando FTP, o crear y subir un archivo zip de la carpeta del tema hijo.
Para subir el archivo, ve a tu panel de control de WordPress y haz clic en Apariencia > Temas > Subir. Una vez subido, haz clic en Activar.
Ahora vamos a empezar a personalizarlo.
Paso 5: Personaliza tu tema hijo.
Si queremos personalizar el tema hijo, una buena opción es empezar añadiendo CSS al fichero style,css que hemos creado en el directorio del tema hijo. Desde aquí puedes personalizar la combinación de colores, la tipografía, etc. Para esto solo tienes que añadir el código CSS debajo del comentario de la cabecera del fichero style.css.
Si quieres modificar funcionalidades del tema principal, puedes añadir código PHP en el fichero functions.php del tema hijo.
Por ejemplo, si quieres permitir que los usuarios formateen sus entradas de diferentes maneras, puedes utilizar la función add_theme_support(). Para permitirles dar formato a las publicaciones como notas, enlaces, una galería de imágenes, citas, una sola imagen o un vídeo, entonces añadirías lo siguiente a tu archivo functions.php en el directorio de tu tema hijo:
add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );
En este fichero puedes añadir todo el código que necesites. Antes de subir tu tema hijo, lo mejor es probarlo en un entorno de pruebas.
El tema hijo de WordPress no funciona
Si tu tema hijo no funciona debes comprobar las siguientes cosas.
1. Comprueba dos veces tu archivo functions.php.
Asegúrate de que has puesto en cola la hoja de estilos de tu tema hijo en tu archivo functions.php. Si no la has puesto en cola, tu tema hijo no se cargará. Tu sitio permanecerá en el tema principal, por lo que se verá bien; el problema es que los cambios que hagas en el tema hijo no aparecerán en el front-end. Consulta el paso 3 anterior para añadir el código de puesta en cola a tu archivo PHP.
2. Asegúrate de que has nombrado la hoja «style.css».
Comprueba que has llamado a tu fichero de estilos tu hoja CSS «style.css», no «stylesheet.css» o de otra forma. Dado que «style.css» es la nomenclatura estándar de WordPress, utilizar ese nombre de archivo permitirá que tu archivo functions.php sepa automáticamente que esa es tu hoja de estilos. Si nombras tu hoja de estilos de otra manera, el archivo functions.php no podrá recuperarla y mostrarla al usuario final.
3. Borra tu caché.
Si tienes plugins de cache, es posible que el navegador muestre la pagina con una versión antigua. Borra la cache de WordPress. Revisa si el tema tiene cache (algunos tienen caché propia). También prueba desde una ventana incognito del navegador, para verificar que no es la cache del navegador.
4. Añade !important a tu código CSS.
Si el tema padre sigue sobrescribiendo el código CSS de tu tema hijo, añade !important a los elementos que hayas cambiado. Esto anulará forzosamente lo que esté escrito en la hoja CSS del tema padre. Añadirías !important justo antes del punto y coma, así
p { background-color: gray !important; }
La regla !important puede utilizarse para IDs, clases CSS y elementos HTML estándar como párrafos, tablas, encabezados y otros.
Para saber más sobre esta propiedad, consulta Cómo utilizar la propiedad !important en CSS.
5. Ponte en contacto con el soporte de tu tema o consulta el foro del tema.
Si has seguido todos estos pasos y el CSS sigue sin cargarse, es el momento de contactar con el equipo de soporte de tu tema o consultar el foro del tema en WordPress.org. Aunque este debería ser tu último recurso, tiene la ventaja de darte respuestas específicas para tu tema. Es posible que el desarrollador de tu tema de WordPress haya utilizado un código personalizado o haya implementado un sistema de nomenclatura diferente para los archivos del tema.
Crea tu tema hijo de WordPress
Instalar un tema de WordPress es un gran primer paso para crear un sitio web de WordPress. Para personalizarlo, puedes utilizar el editor Gutenberg incorporado o tu constructor de temas (si viene con uno). Pero para ir más allá y personalizar no sólo su diseño sino su funcionalidad, querrás crear un tema hijo.