Saltar al contenido

Cómo crear un tema hijo o child theme en WordPress

17/02/2021

Los temas de WordPress son por naturaleza ya “personalizables”, su instalación es sencilla , las posibilidades que ofrece son numerosas pero siempre hay pequeñas cosas que queremos cambiar. Un color aquí, un tamaño de fuente allá, tal vez usar otro llamado a la acción, en definitiva queremos modificar el CSS de nuestro tema de WordPress y mucho más …

El único inconveniente es que incluso los pequeños cambios en un tema le impiden actualizar a una nueva versión en el futuro, porque si actualiza, perderá todos los cambios: /

¿Un child theme para qué?

Los temas secundarios resuelven este problema permitiéndole usar todas las características de su tema mientras le permiten actualizar el tema, sin temor a perder sus cambios.

¿Qué es un tema hijo?

Un tema secundario es un tema basado en su tema principal. Toma todas las funciones sin modificarlas nunca. ¡Así que puede hacer cambios en su hijo y, en caso de actualización de los padres, no los pierde!

Cualquier archivo colocado en el tema hijo y con el mismo nombre que en el tema padre, tomará el control y sobrescribirá el archivo original (excepto functions.php ).

Nota : muchos temas premium de nueva generación incluyen un tema hijo listo para usar en su zip. En este caso, solo necesita configurarlo. Tenga cuidado, obviamente debe instalar el tema principal (sin activarlo), luego instalar el tema secundario y finalmente activar este último.

¿Cómo configurar un tema hijo?

Para hacer un tema hijo, necesitamos el tema original que llamamos tema padre y 2 archivos que vamos a crear. También será necesario crear un directorio para colocar allí los archivos del tema hijo.

Por lo tanto, lo primero que debe hacer es crear una carpeta para su tema hijo en el FTP. Todo lo que tiene que hacer es crear la carpeta del tema del niño en / wp-content / themes / name of your childrethem child /.

Ahora vamos a crear los dos archivos que necesitamos y que colocaremos en la carpeta de nuestro tema hijo:

  1. un archivo functions.php
  2. un archivo style.css

Por ejemplo, me basaré en un tema principal que lleva el nombre de Orbital Theme, que también es el nombre de la carpeta de mi tema en el FTP.

En el archivo functions.php, integraremos el código que le permitirá combinar o sobrescribir el archivo style.css  del padre de otra manera que no sea con el famoso @import css (no recomendamos @ import porque agrega una solicitud innecesaria cf:  https : //codex.wordpress.org/ )

Aquí está el código para poner en el archivo functions.php  del tema hijo  :

<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Una vez hecho esto, ya tenemos la parte que nos permitirá llamar a nuestro archivo style.cssTodo lo que tenemos que hacer es crear el archivo style.css para el tema hijo . Veamos qué debe contener necesariamente este archivo:

/*
Theme Name: Theme hijo
Description: Theme hijo de Studio Ideas
Author: Studio Ideas
Author URI: https://orbitalthemes.net/
Template: Orbital Theme
Version: 1.1.0
*/

Descripción línea por línea del archivo style.css :

  • Nombre del tema : el nombre que quiero darle a mi tema hijo
  • Descripción : La descripción de mi tema hijo, la que aparecerá en mi administrador de temas de WordPress.
  • Autor : el autor del tema hijo, en este caso usted es
  • URI del autor : la URL del sitio del autor porque un pequeño anuncio no hace daño.
  • Plantilla : el nombre del tema principal en este caso el nombre del directorio tal como está escrito en el FTP
  • Versión : la versión de su tema hijo solo para información

Pequeños detalles para recordar, de lo contrario, su tema hijo no funcionará :

  • Nunca ponga un espacio antes del colon . Nombre del tema: funcionará pero Nombre del tema: no funcionará
  • Para el atributo Plantilla : si su tema en el administrador se llama, por ejemplo, «wpserveur» pero el nombre que se muestra en el directorio FTP es «WPserveur», entonces debe respetar el caso y escribir WPserveur y no wpserveur
  • Por lo demás , no puedes dejar nada, ¡funcionará de todos modos!

Para iluminar un poco su administrador de temas de WordPress, también puede colocar un archivo screenshot.jpg  (se recomienda 600 × 450 px) que mostrará la miniatura del tema de su hijo en el administrador de temas.

¡Ya está, su child theme está listo!

Ahora puede agregar todos sus cambios CSS en el archivo style.css del tema secundario y no los perderá de nuevo si actualiza el tema principal (no olvide comentarlos, a veces ayuda;).

Ahora, si desea modificar su single.php o su header.php , ¡nada podría ser más simple! ¡Cópielos del tema principal al secundario y edítelos! También puede agregar funciones en el de su hijo functions.php , sabiendo que la de los padres functions.php siempre se cargará pasado y tienen prioridad en caso de funciones idénticas.

¿No hay un plugin para hacerlo por mí?

Aunque esto no es realmente necesario dada la sencillez de crear un tema hijo, estamos bajo WordPress y necesariamente no hay 1 plugin que pueda hacerlo, sino 3. El uso de estos plugins debería reservarse para principiantes puros, por mi parte yo prefiero el método manual.

Para ir más allá con el child theme

¿En qué caso podemos prescindir de un tema hijo o incluso cómo traducir su tema de WordPress directamente desde un tema hijo con Poedit? Todas estas son preguntas que responderemos en los siguientes artículos: