Advertisement
  1. Code
  2. WordPress

Cómo crear un «tema hijo» en WordPress

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Si estás utilizando un tema que descargaste del repositorio gratuito de temas de WordPress, o quizá uno que compraste en ThemeForest, tal vez desees hacerle algunos retoques.

A lo mejor quieres registrar una nueva fuente o añadir un nuevo archivo de plantilla. Tal vez deseas añadir algún código de uno de los tutoriales o cursos de Envato Tuts+. O quizá quieras utilizar el tema como base para un tema con tu propio diseño.

Probablemente estés tentado en ir y editar el código fuente de un tema de terceros (es decir, un tema que no escribiste tú mismo), ¡pero no lo hagas! La próxima vez que actualices ese tema, se descargarán nuevos archivos y perderás todos los cambios que hayas hecho.

Frustrante, por decir lo menos.

Pero, ¿qué puedes hacer si necesitas editar el tema?

Por fortuna, existe una manera de editar el código de un tema y aún así tener la posibilidad de descargar las últimas actualizaciones: y es creando un tema hijo, utilizando el tema original como tema padre.

Esto significa que activarás el tema hijo en el escritorio de WordPress, pero dentro del código de ese tema hay instrucciones indicándole a WordPress que se trata de un tema hijo, y cuál es el tema padre. Mantienes el tema padre instalado en tu sitio, pero no lo activas. (Es esencial mantenerlo instalado, ya que sin él, el tema hijo no funcionará.)

En este tutorial, voy a enseñarte cómo crear un tema hijo en WordPress. También te daré algunos consejos sobre cómo funcionan los temas hijos y los temas padres, para que conozcas qué conjunto de código se está utilizando para mostrar el contenido en tu sitio.

Creando el tema hijo

Lo primero que tienes que hacer es crear el tema hijo en tu carpeta wp-content/themes. El tema hijo debe tener dos archivos para funcionar: una hoja de estilos y un archivo de funciones. También puedes añadir archivos opcionales, como archivos de plantilla o archivos de inclusión.

Crea una carpeta para tu tema hijo en la carpeta de temas y ponle un nombre adecuado. Al mío lo voy a llamar tutsplus-child-theme.

Dentro de esa carpeta, crea un archivo y nómbralo style.css.

En la parte superior de ese archivo, añade el siguiente código comentado:

Esto le dice a WordPress que se trata de un tema y ofrece la misma información que encontrarías en cualquier tema, con una adición. La línea Template: twentynineteen le dice a WordPress que este es un hijo del tema Twenty Nineteen.

Puedes usar cualquier tema como tema padre, utilizando el nombre de la carpeta donde está almacenado. No uses el título del tema: en su lugar, utiliza el nombre de la carpeta.

Ahora guarda la hoja de estilos y crea otro archivo en tu tema hijo, y nómbralo functions.php.

En este archivo, necesitas poner en cola (enqueue) la hoja de estilos del tema padre. Antes se hacía utilizando una línea @import en la hoja de estilos, pero ya no es la manera recomendada de hacerlo.

En lugar de eso, en tu archivo functions, añade este código:

Esto pone en cola correctamente la hoja de estilos del tema padre, utilizando get_tempate_directory_uri() para encontrar ese tema (el directorio de plantillas es la carpeta donde está almacenado el tema padre, mientras que el directorio de la hoja de estilos es la carpeta donde se almacena el tema actual).

Si quieres añadir algún estilo a tu tema hijo para anular o aumentar el estilo en el tema padre, regresa a la hoja de estilos de tu tema hijo y agrégala allí. No añadas el archivo functions ni trates de poner en cola más hojas de estilo.

También puedes añadir funciones al archivo functions del tema hijo y archivos de plantilla a la carpeta del tema, lo que anulará los mismos archivos de plantilla en el tema padre.

Así que ahora tienes configurado tu tema hijo, ¡es así de fácil! No obstante, vale la pena entender exactamente cómo interactúan los archivos de plantilla del tema hijo y del tema padre.

Creando los archivos de plantilla

Ahora veamos los archivos de plantilla del tema. El archivo de plantilla que WordPress utiliza para mostrar una página en tu sitio dependerá de dos cosas: la jerarquía de la plantilla y los archivos que añadas a tu tema hijo.

Imagina que estás viendo la página de archivo de la categoría Viajes en tu sitio. WordPress utilizará la jerarquía de la plantilla para encontrar el archivo más relevante:

  1. un archivo de plantilla de archivo de categoría para esa categoría específica, utilizando el slug: category-travel.php
  2. un archivo de plantilla de archivo de categoría para esa categoría específica, usando el ID: category-23.php
  3. un archivo de un archivo de categoría general: category.php
  4. un archivo de un archivo general: archive.php
  5. el que incluye todo: index.php

WordPress buscará esto en el tema padre y en el tema hijo. WordPress usará el primer archivo de la jerarquía que encuentre, ya sea en el tema padre o en el tema hijo.

Existe una excepción. Cuando el archivo de plantilla más relevante tiene una versión tanto en el tema padre como en el tema hijo, WordPress utilizará el archivo del tema hijo e ignorará el del tema padre. Este es uno de los usos más comunes de los temas hijos: anular un archivo específico en el tema padre.

Aquí hay algunos ejemplos, usando el ejemplo de la categoría anterior:

  • Si tu tema hijo tiene archive.php e index.php y tu tema padre tiene category.php e index.php, entonces WordPress utilizará category.php del tema padre porque es el más alto en la jerarquía.
  • Si tu tema hijo tiene category.php e index.php y tu tema padre tiene archive.php e index.php, WordPress usará el archivo category.php del tema hijo, pues es el más alto en la jerarquía.
  • Si tu tema hijo tiene archive.php e index.php y el tema padre tiene archive.php e index.php, WordPress utilizará el archivo archive.php de tu tema hijo. Esto se debe a que existen dos copias del archivo más alto en la jerarquía, y el tema hijo anula al tema padre.

Así que si quieres anular un archivo de plantilla en tu tema padre, crea un duplicado de ese archivo en el tema hijo con el código que quieras. O crea un archivo que esté más alto en la jerarquía de plantillas y añádelo a tu tema hijo.

Añadiendo funciones al tema hijo

Las funciones trabajan de forma diferente a los archivos de plantilla y son un poco menos simples

Si añades una función a tu tema hijo con el mismo nombre que una de tu tema padre, WordPress arrojará un error porque está tratando de llamar a la misma función dos veces.

Pero esto no ocurrirá si la función en el tema padre es pluggable (conectable).

Un archivo conectable está contenido en un control condicional para otra función con el mismo nombre, que se parece a esto:

Aquí, WordPress verificará que no se ha llamado a ninguna función que tenga el mismo nombre. Si es así, ejecutará esta función. Esto se debe a que las funciones del tema hijo son llamadas antes que las funciones del tema padre. Si escribes una función en tu tema hijo con el mismo nombre, esa se ejecutará.

Pero, ¿qué ocurre si la función del tema padre no es conectable y quieres anularla?

Pues bien, puedes hacerlo escribiendo una nueva función que esencialmente cancele la función en el tema padre, dándole una prioridad mayor, de modo que después de ella se ejecute la función del tema padre. Como alternativa, puedes desenganchar la función del tema padre y escribir una nueva función en el tema hijo, enganchada a ese mismo gancho.

Imagina que la función en el tema padre se ve así:

Si tu función en tu tema tu hijo pudiera deshacer la función del tema padre sin que tuvieras que detener la función de este, lo escribirías de esta manera:

Pero si tuvieras que evitar que la función del tema padre se ejecute, primero la desengancharías, de esta manera:

Ten en cuenta que aún tienes que poner la función remove_action() dentro de otra función, en este caso enganchada a wp_head().

Entonces podrías escribir la función para el tema hijo como si la del tema padre no existiera, aunque recordando no darle el mismo nombre.

Los temas hijos son una herramienta útil para editar temas

Los temas hijos tienen dos usos principales:

  • Con un tema que ha sido diseñado para ser utilizado como tema padre (a menudo referido como framework). El framework no está diseñado para usarse solo: en su lugar, añades archivos de plantilla y estilos adicionales con un tema hijo.
  • Para permitirte editar el tema padre sin tener que modificarlo directamente, o para añadir archivos de plantilla adicionales. Esto significa que cuando el tema principal se actualice en el futuro, no perderás tu trabajo.

Así que la próxima vez que leas un tutorial que te diga que utilices un tema hijo en vez de editar un tema de terceros, ¡sabrás qué hacer!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.