Javier Félix
  • INICIO
  • SOBRE MI
  • DISEÑO WEB A MEDIDA
  • BLOG
  • CONTACTO
  • LLAMAR AHORA
  • Buscar
  • Menú Menú
FORMACIÓN

Cómo crear un tema hijo en WordPress

Última revisión: Diciembre de 2022

FORMACIÓN

Cómo crear un tema hijo en WordPress

Última revisión: Diciembre de 2022

Cuando un proyecto online con WordPress se basa en la personalización de un tema o plantilla web, muchas veces surgirá la necesidad de modificar algunos aspectos, como pueden ser los colores, tipos de letra, frases, o la forma en la que se muestran los elementos para personalizarlos a medida.

Por regla general todos los temas WordPress vienen con un panel de personalización desde el que podrás ajustar su configuración a tu gusto, según los objetivos y necesidades. Pero otras veces necesitarás hacer ciertos cambios en el tema que no se contemplan en su personalizador.

Por ello se suelen utilizar los temas hijos o Child Themes.

¿Qué es un tema hijo?

Un tema hijo es un tema que tiene toda la funcionalidad y el estilo de otro tema, llamado tema padre.

Los temas hijos o Child Themes son la forma recomendada por WordPress para realizar modificaciones en el código de un tema existente, ya que éstos conservan todos los cambios y modificaciones del código personalizado, incluso después de una actualización. Si modificas el código directamente en un tema y luego éste se actualiza, los cambios se perderán.

Su funcionamiento se basa en que el tema hijo hereda la funcionalidad del tema padre, al que además vas a añadir o modificar algunas funciones o aspectos de diseño.

Los temas hijos se pueden usar para añadir acciones a tu medida, implementando tus propios estilos CSS y tus propias funciones, o incluir cualquier tipo de fichero que creas oportuno, desde imágenes o sonidos a librerías, modificaciones de archivos de plantilla y ganchos PHP personalizados.

Realmente el proceso de crear un Child Theme es muy sencillo. Podrás crear un tema hijo de forma manual o con ayuda de plugins, siendo requisito indispensable, en ambas maneras, tener instalado en tu WordPress el tema original o tema padre que quieras clonar/modificar.

También es importante conocer qué tipo de licencia tiene cada tema. Como cualquier otro tipo de software, cada tema tendrá su propia licencia. Si haces uso de un tema con licencia GPL, estarás obligado a liberarlo con la misma licencia, según los fundamentos y reglas del Software Libre.

Cómo crear un tema hijo en WordPress de forma manual

Paso 1: Instalación del tema padre

Antes de comenzar a crear un tema hijo tendrás que instalar el tema padre que se vaya a clonar/modificar. Cuando lo tengas instalado, podrás avanzar al siguiente paso.

Paso 2: Crear la nueva carpeta

La manera más rápida de crear un tema hijo es dirigirnos a la ruta donde tenemos WordPress instalado y acceder a la carpeta donde se encuentran los temas [wp-contents/themes]. Una vez allí tendrás que crear una nueva carpeta con el nombre que hayas decidido utilizar, por ejemplo “mi-tema”. Una vez creada la nueva carpeta, procederás con el siguiente paso.

Esto lo puedes realizar a través del administrador de archivos de tu hosting.

Paso 3: Copiar el fichero .css

Ahora copiarás el archivo de hoja de estilos [style.css] ubicado en la carpeta del tema padre, y lo pegarás en la nueva carpeta del tema hijo.

Esto lo puedes realizar a través del administrador de archivos de tu hosting.

Paso 3: Modificaciones en el archivo .css

El siguiente paso será modificar dicho fichero .css, en la carpeta del tema hijo. Para ello tendrás que editar los metadatos de la cabecera:

  • Theme name: Nombre del tema [obligatorio]
  • Theme URI: Referencia web del tema [opcional]
  • Description: Descripción [opcional]
  • Author: Autor del tema [opcional]
  • Author URI: Referencia web del autor del tema [opcional]
  • Versión: Número de versión [opcional]
  • License: Tipo de licencia
  • License URI: Referencia web de la licencia
  • Tags: Etiquetas necesarias que describen el tema y permiten una búsqueda en el repositorio de WordPress
  • Template: Indica el directorio o carpeta donde se encuentra instalado el tema padre [obligatorio]

Una vez que tengas preparados los metadatos de tu Child Theme, tendrás que eliminar por completo el contenido restante del archivo css.

Paso 4: Poner en cola los estilos css del tema padre

El siguiente paso consistirá en poner en cola el contenido de la hoja de estilos original.

En el pasado, el método común era importar la hoja de estilos del tema padre usando @import dentro del fichero .css. Esta ya no es la práctica recomendada, ya que aumenta la cantidad de tiempo que tardan en cargarse las hojas de estilo.

Actualmente la forma recomendada de poner en cola las hojas de estilo es agregar la acción wp_enqueue_scripts en la función wp_enqueue_style() dentro del fichero functions.php.

De manera que para poner en cola los estilos del tema padre tendrás que crear un archivo functions.php dentro de la carpeta del tema hijo y añadir la siguiente función en dicho archivo:

/**

* Enqueue styles

*/

function child_enqueue_styles() {

      wp_enqueue_style( 'tema-padre', get_template_directory_uri(). '/style.css');

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

Paso 5: Imagen del tema hijo

Si quieres mostrar una imagen miniatura o captura de pantalla de tu tema hijo, deberás crear el archivo [screenshot.png] y copiarlo en su carpeta correspondiente.

Recomiendo copiar el fichero original del tema padre y modificar su contenido en la carpeta del tema hijo, siempre respetando el nombre del fichero.

Paso 6: Otros archivos

Los demás ficheros del tema padre también podrán ser modificados desde el tema hijo para preservarnos de los problemas relacionados con las actualizaciones.

A diferencia de los archivos .css, los demás ficheros están implementados en PHP, de manera que cuando los creas en tu tema hijo, éstos no sobre escriben al del tema padre, sino que se cargan ambos, primero el del tema hijo y luego el del tema padre.

Así tus modificaciones siempre tendrán más relevancia que las posibles actualizaciones que sufra el tema padre.

Conclusión

Cuando hayas finalizado ya podrás acceder al gestor de temas en el escritorio de WordPress y verás cómo aparece tu tema hijo recién creado (aparentemente igual que el tema padre).

A partir de aquí ya podrás comenzar a modificar aspectos del diseño, escribiendo tu nuevo css, de forma que todas las reglas que añadas, tendrán más prioridad que las del css del tema padre.

De esta manera aprovecharás el potencial de las hojas de estilo para personalizar tu sitio web o blog sin que las actualizaciones del tema padre afecten a tus modificaciones.

Cómo crear un tema hijo de forma automatizada

Para crear un tema hijo de forma automatizada, es decir, haciendo uso de plugins, puedes buscar y utilizar cualquiera de los que existen en el repositorio de WordPress.

Pero por su sencillez de uso y excelentes resultados, voy a recomendarte una magnífica herramienta para facilitarte el trabajo y ahorrarte mucho tiempo.

CHILD THEME CONFIGURATOR

El proceso es muy sencillo:

  • Instala y activa el plugin
  • Accede a la herramienta haciendo clic en la sección de Child Themes, dentro de Herramientas, en la barra lateral izquierda
  • Elige la opción que quieras ejecutar, en este caso, crear un nuevo Child Theme
  • Selecciona el tema padre que quieras modificar (previamente instalado)
  • Haz clic en el botón Analizar
  • Después de mostrarte confirmación de que el tema padre seleccionado permite la creación de temas hijos, entonces puedes continuar rellenando los siguientes campos
  • Escribir el nombre de la nueva carpeta donde se almacenarán los ficheros del tema hijo
  • Seleccionar dónde guardar los estilos CSS
  • Seleccionar el método para cargar los estilos del tema padre (se recomienda wp_enqueue_style)
  • Personalizar los campos relativos a la información del tema hijo: nombre del tema, autor, descripción, etiquetas, etc.
  • Opcionalmente podrás también copiar los menús y widgets del tema padre
  • Clic en el botón de crear tema hijo y ¡listo!

Sin duda se trata de una excelente herramienta que te ahorrará bastante tiempo y evitará que tengas que escribir código si no tienes los conocimientos necesarios.

A modo de conclusión, los temas hijos son indispensables si quieres personalizar un tema y modificar su aspecto sin tener que crear uno desde cero. Son la manera correcta y recomendada por WordPress para hacer cambios en temas.

COMPARTIR ESTA ENTRADA
  • Compartir en Facebook
  • Compartir en Twitter
  • Compartir en WhatsApp
  • Compartir en Telegram
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Hola, mi nombre es Javier Félix y soy diseñador web especializado en WordPress.

Estoy aquí para ayudarte a crear o mejorar tu proyecto online.

ENLACES

Inicio

Sobre mi

Diseño web a medida

Blog

Contacto

BLOG

Actualizaciones

Herramientas

Formación

Noticias

WORDPRESS

WordPress Español

Temas

Plugins

Soporte

Javier Félix | Servicios profesionales de WordPress a medida en Tenerife © 2023
Cómo instalar un tema en WordPressCómo instalar un tema en WordPressCómo traducir un tema o plugin en WordPressCómo traducir un tema (o plugin) en WordPress
Desplazarse hacia arriba

Utilizo cookies para ofrecerte la mejor experiencia en mi sitio web.

Puedes aprender más sobre qué cookies utilizo o desactivarlas en los ajustes.

Logotipo
Resumen de privacidad

Este sitio web utiliza cookies para que pueda ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a mi web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca se almacena información personal.

Desde aquí puedes consultar mi Política de Cookies y mi Política de Privacidad.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias ayudan a hacer una página web utilizable activando funciones básicas como la navegación y el acceso a áreas seguras de la página web. La página web no puede funcionar adecuadamente sin estas cookies. En este sitio web las cookies estrictamente necesarias son para:

  • Seguridad de la web.
  • Ver los cambios realizados en la web a tiempo real.
  • Indicar si ha aceptado o rechazado las cookies.

Si desactivas esta cookie no podré guardar tus preferencias. Esto significa que cada vez que visites este sitio web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Las cookies estadísticas ayudan a los propietarios de páginas web a comprender cómo interactúan los visitantes con las páginas web reuniendo y proporcionando información de forma anónima. En este sitio web las cookies de estadística son para:

  • Generar datos estadísticos acerca de cómo utiliza el visitante nuestro sitio web.
  • Recopilar datos sobre las visitas del usuario a nuestro sitio web, como qué páginas han sido leídas y qué secciones han sido más vistas.

Dejar estas cookies activas nos permitirá mejorar nuestro sitio web.

¡Por favor, activa primero las cookies estrictamente necesarias para que pueda guardar tus preferencias!