¿Por qué es importante usar Child themes? y ¿cómo crear uno?

¿Por qué es importante usar Child themes? y ¿cómo crear uno?

¿Por qué es importante usar Child themes? y ¿cómo crear uno?

Si has llegado a este post, probablemente llevas bastante tiempo con tu sitio WordPress. Sin embargo, has llegado a una encrucijada muy importante, deseas personalizarlo.

En caso contrario, back to the basics.

¿Qué es un Tema Child de WordPress?

Un child theme (tema child, tema hijo), es un tema que funciona en conjunto con otro tema (Tema padre o bien Parent theme). Este le indica a WordPress que es un child theme y quién es su tema parent. Seguido de esto, WordPress tomará en primera instancia el código del tema parent y en caso de tener código personalizado en el tema child, éste se sobrescribirá.

Estructura de un Tema Child en WordPress

Normalmente para que un child theme funcione en WordPress, éste debe contar con dos archivos como mínimo, sin embargo, personalmente me gusta agregar un 3ero.

  1. Hoja de estilos (style.css), esta tendrá un encabezado a manera de comentarios los cuales le indican a WordPress que es un tema child, así como su nombre, su tema parent entre otras cosas.
  2. Archivo de Funciones (functions.php), este archivo debe incluir una función que encola los estilos del paren theme, es decir, es a través de esta función donde le indicamos a WordPress que respete los estilos del tema parent para nuestro tema child.
  3. Imagen del tema, este me gusta agregarlo desde el momento en que creo un child theme, esta imagen es la que aparecerá como portada de nuestro theme child en el gestor de temas.

Punto importante a tomar en cuenta: existen muchas guías para llevar a cabo este proceso, algunas de ellas hacen mención que para heredar los estilos del tema parent debemos hacer el llamado a través de la hoja de estilos, esto ya no es correcto hacerlo; lo correcto es hacerlo a través del functions.php.

Ya va, me has platicado sobre que es un Tema child y cómo es su estructura, mejor cuéntame para que me sirve crear mi propio tema child.

Sin duda alguna la razón principal por la que debes usar un child theme es la personalización.  Sin embargo, te platicaré unos cuantos ejemplos.

  • Temas específicamente diseñados para ser Parent theme. Existen algunos temas diseñados para utilizarse como frameworks.
  • Quieres realizar cambios visuales, ojo no de funcionalidad (para esta parte es recomendable hacerlo mediante plugins propios).
  • Quieres modificar tu Parent child sin perder tus personalizaciones.

Si ya llegaste hasta este punto, ya sabes qué es un child theme y para que sirven. Ahora te platicaré algunas ventajas y desventajas para que tengas en cuenta a la hora de utilizarlo.

Ventajas

  • Celeridad. Si estás pensando construir un sitio completamente personalizado, te ayudará a llevar a cabo tu desarrollo mucho más rápido ya que heredarás muchas funciones y estilos del parent theme.
  • Actualizaciones. Podemos actualizar nuestro parent theme sin miedo a perder nuestras personalizaciones ya que estás no afectan a los estilos o modificaciones que hayamos hecho.
  • Frameworks. Nos permite aprovechar algún framework para realizar personalizaciones de nuestro sitio.

Desventajas

  • Rendimiento. Existe la posibilidad en que el sitio se ralentice debido al llamado de estilos y funciones que llama del paren theme (Sin embargo, esto tiene que ver un poco más con el parent theme).
  • Personalización. Así como podremos llevar a cabo muchas personalizaciones, si no cuentas con muchos conocimientos técnicos, es posible que necesites de un desarrollador web que se asegure que las personalizaciones que lleves acabo no interfieran con el parent theme y afecte el aspecto de tu sitio web.

¡Muy bien! Ahora ya tienes panorama más amplio respecto a los child themes. Hasta aquí terminamos con la teoría, es momento de ponernos ¡manos a la obra!

¿Cómo crear un Child Theme de WordPress?

Como lo vimos anteriormente, un child theme básico lo componen 3 archivos: la hoja de estilos, archivo de funciones yla imagen de portada.

Antes de empezar directamente con los archivos, debemos crear la carpeta que los va contener.  Esta carpeta (El nombre de la carpeta es indistinto) la crearemos dentro de wp-content/themes dentro de tu instalación de WordPress.

La hoja de estilos (Stylesheet | Style.css)

Una vez dentro de la carpeta de nuestro child theme, creamos un archivo con el nombre style.css y agregamos el siguiente código:

/*
 Theme Name:  My Child Theme. Child for Twenty Nineteen.
 Theme URI:  https://wppuebla.com/
 Description:  Theme to WP Puebla. Child theme for the Twenty Nineteen theme.
 Author:  Jair Martell
 Textdomain:  wppuebla
 Author URI:  https://wppuebla.com/
 Template:  twentynineteen
 Version:  1.0
 License:  GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

El texto anterior es un comentario, no es un código como tal, por lo que no afectará en absoluto a tu sitio. Básicamente le indica a WordPress que es un Child theme y la información del mismo.

  • Nombre del Tema: El nombre para tu tema.
  • URI del Tema: Donde los usuarios pueden encontrar el código o documentación para el tema.
  • Descripción: Texto descriptivo para ayudarle a los usuarios a entender lo que hace el tema.
  • Autor: Tu nombre
  • Textdomain: este es utilizado para internacionalización. Utiliza este dominio de texto como el segundo parámetro de cualquier función de internacionalización.
  • URI del Autor: El sitio del autor.
  • Plantilla: La carpeta donde se encuentra almacenado el tema parent. Ojo, debes de colocar el nombre de la carpeta, no el nombre del tema. Sin esta línea, tu Child theme no funcionará.
  • Versión: el número de la versión.
  • Licencia: La licencia, la cual debe ser GNU. [enlace]
  • URI de la Licencia: El enlace a la información de la licencia.

Una vez agregado el código con nuestros datos, lo guardamos. Posteriormente si queremos ver que haya funcionado esto. Nos iremos a nuestro WordPress en Apariencia/Temas,podremos ver nuestro Child theme, sin embargo, lo veremos sin foto de portada.

Aquí es donde entra el 2do archivo para nuestro Child theme, esta imagen da una idea de cómo luce el tema. A reserva que tu tema vaya ser completamente personalizado y distinto al tema padre, puedes copiar el archivo screenshot.png de tu tema parent y lo pegas en el child theme.

El Archivo de Funciones (Functions.php)

Por último, agregaremos el archivo de funciones. A través de este, es como encolaremos la hoja de estilos del tema padre, de no hacerlo nuestro sitio se vería roto ó con nada de estilos.

Ahora, dentro de la carpeta de nuestro child theme, crearemos un archivo nuevo con el nombre functions.php y agregaremos el siguiente código:

<?php
 /* enqueue script for parent theme stylesheeet */
 function childtheme_parent_styles() {
  // enqueue style
  wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); 
 }
 add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Interpretemos el código anterior, utilizamos la función wp_enqueue_style() para encolar la hoja de estilo del tema parent, con la función get_template_directory_uri() ubicando donde se encuentra almacenado el archivo. La función se encuentra dentro una función llamada wppuebla_parent_styles(), la cual está enganchada al hook wp_enqueue_scripts.

Puedes editar el código para agregar tu propio prefijo en el nombre de la función. En el ejemplo viene “childtheme”, esto se fue así para asegurar que no esté en conflicto con cualquier otra función del tema parent. Ya para terminar guarda el archivo.

¿Cómo Activar su Tema Child en WordPress?

¡Éxito! Ya has creado tu propio child theme, ahora necesitas activarlo. Asumo que este proceso saber hacerlo, pero de igual manera te lo recuerdo. En el admin de WordPress, ve al menú Apariencia/Temas, selecciona tu nuevo child theme y dale click en activar.

Por otro lado, si tienes la inquietud que al activar el child theme dejará de tomar en cuenta el tema padre, puedes despreocuparte ya que esta parte WordPress la tiene cubierta debido a la configuración que hicimos previamente y sabrá como desplegar los archivos del tema padre.

Ahora cuando vayas al home de tu sitio, se verá como antes. Sin embargo, se ve igual, esto se debe a que no hemos hecho personalizaciones. Pero ahora tienes un Child theme funcional.

¡Bien hecho!

inicio sitio

Es importante mencionarte que si es la primera vez que haces este proceso, llévalo a cabo en un sitio de pruebas, jamás lo hagas en un sitio de producción hasta que no lo hayas probado antes.

Los temas child son de mucha utilidad, ya que nos permite personalizar un tema sin tener que editar de forma directa su código. Podremos utilizarlo para agregar ciertas funcionalidades adicionales a nuestro tema base (parent theme) ya sea para personalizarlo o agregar/editar archivos de plantilla de nuestro tema padre.

Si te ha gustado este post, te invito a que lo compartas con tu comunidad y estés al pendiente de los próximos posts, así como de los Meetups que tenemos cada mes.

2 comentarios en “¿Por qué es importante usar Child themes? y ¿cómo crear uno?”

Deja un comentario