Crear un Child Theme en WordPress de manera correcta

[ 3 mayo 2017 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Básico] [ ]

mejoras

Tienes un bonito theme para tu sitio, pero te gustaría hacer algunas modificaciones, ya sea cambios CSS o de estructura, ¿Cómo realizar estas modificaciones sin que se pierdan al actualizar el theme?, la respuesta es creando un Child Theme.

1- Generalidades

Los Child Themes o Temas Hijo son una característica de WordPress que puedes usar cuando quieres hacer retoques al theme que estas usando y no perder los cambios cuando actualices el theme, ya que las modificaciones las harás en el theme hijo.

En este artículo nos vamos a basar en el theme Twenty Seventeen, sin embargo los pasos son similares para otros themes.

2- Creando la estructura del Child Theme

Para crear un Child Theme simplemente crea una nueva carpeta en la siguiente ruta:
wp-content/themes/, es buena práctica dar el mismo nombre que tiene la carpeta del tema padre y agregar el texto “-child”.

Dentro de esta carpeta, crea además los archivos : style.css y functions.php, que son los archivos mínimos necesarios para crear correctamente el tema hijo.

3- Contenido del archivo style.css

Dentro del archivo style.css coloca la siguiente metadata:

/*
Theme Name:   Twenty Seventeen Child
Theme URI:    http://misitio.com/twenty-seventeen-child/
Description:  Child theme para modificaciones varias
Author:       Mi nombre
Author URI:   http://misitio.com
Template:     twentyseventeen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-seventeen-child
*/

En el código anterior:

• Theme Name: nombre del tema hijo
• Theme URI: opcional, la url de la documentación y demo del tema hijo.
• Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
• Template: este parámetro te indica el nombre de la carpeta del tema padre.
• Version: versión del tema hijo, importante para el control de cambios.
• License, License URI: si se quieres hacer alguna variación a la licencia.
• Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
• Text-Domain: si tus cambios implican agregar texto traducible.

4- Contenido del archivo functions.php

Una vez que has creado el archivo style.css, necesitas ahora importar los estilos del tema padre, anteriormente se usaba @import para importar los estilos, sin embargo esto es una mala práctica, lo que se recomienda es usar el archivo functions.php y a través de código cargar el archivo style.css del theme padre y, en caso se hagas modificaciones CSS en el tema hijo, cargar también el style.css del theme hijo.

El código para cargar los estilos es similar a:

<?php
function enqueue_styles_child_theme() {

	$parent_style = 'twentyseventeen-style';
	$child_style  = 'twentyseventeen-child-style';

	wp_enqueue_style( $parent_style,
				get_template_directory_uri() . '/style.css' );

	wp_enqueue_style( $child_style,
				get_stylesheet_directory_uri() . '/style.css',
				array( $parent_style ),
				wp_get_theme()->get('Version')
				);
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' );

En el código anterior:

• La función: enqueue_styles_child_theme, es llamada en la acción: wp_enqueue_scripts
• Definimos dos variables, que serán los IDs de los estilos a cargar.
  • El ID del padre ya existe por lo que tenemos que buscarlo en el archivo functions.php del theme padre.
  • El ID del theme hijo puede ser cualquier texto, aunque se recomienda igualmente que tenga un nombre similar al theme padre.
• Colocamos en cola el estilo del tema padre a través de la función wp_enqueue_style.
• Colocamos en cola el estilo del tema hijo, igualmente usando la función wp_enqueue_style.
• En la carga del style.css del tema hijo usamos el tercer parámetro para indicar dependencia.
• También usamos el cuarto parámetro para usar la versión que se ha definido en el archivo style.css del tema hijo.

5- Sobreescribiendo archivos

En el tema hijo puedes sobreescribir cualquier otro archivo del tema padre, siempre que mantengan el mismo nombre y se encuentren en la misma ruta. En la siguiente imagen de ejemplo hemos sobreescrito el archivo footer.php y el archivo /template-parts/header/site-branding.php.

6- Creando nuevos archivos

Siguiendo la jerarquía de archivos en un theme, es posible crear nuevos archivos que no están incluidos en el tema padre. En la imagen adjunta se ha creado el archivo: category-noticias.php

¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.

Valora este artículo : (6 votos, promedio: 4,33 de 5)

Cargando…