Crear un Child Theme para Twenty'em

Usar Child Themes es la mejor manera de modificar un theme de WordPress. En este tutorial explicamos cómo crear uno para Twenty'em incluyendo los archivos y funciones mínimos requeridos.

Introducción

Para comenzar es bueno tener claro por qué usar un Child Theme en lugar de modificar uno ya existente. Pues es muy sencillo, si se modifica un theme directamente, cuendo este se actualice se perderán todos los cambios, además que usar un Child Theme acelera el proceso de desarrollo y es una excelente manera de aprender a desarrollar themes para WordPrerss.

Requerimientos mínimos

Un Child Theme requiere únicamente un archivo style.css, pero eso nos impide hacer verdaderas modificaciones desde el punto de vista de programación, para eso necesitamos incluir además un archivo functions.php. Veamos cómo crear un Child Theme para Twenty'em:

twenty-em-child

Lo primero es crear un directorio para nuestro Child Theme, en este ejemplo lo nombraremos twenty-em-child/, pero el nombre pueded ser cualquier otro.

style.css

En el directorio twenty-em-child/ creamos un archivo style.css, que debe llevar la siguiente cabecera:

/**
 * Theme Name:	Twenty'em Child
 * Theme URI:	https://themingisprose.com/twenty-em
 * Description:	Twenty'em Child Theme
 * Author:	RogerTM
 * Author URI:	https://themingisprose.com
 * Version:	1.0
 * Template:	twenty-em
 * License:	GNU General Public License v2 or later
 * License URI:	http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: t_em_child
 */

La linea Template: twenty-em corresponde al Parent Theme, en este caso Twenty'em. Las demás lineas deberán modificarse en dependencia de cada proyecto en particular.

functions.php

En la documentación sobre Child Themes en el Codex de WordPress se especifica que en el archivo functions.php debe incluirse el archivo style.css del Parent Theme y de esa manera heredar todos los estilos, en el caso de Twenty'em esto no es necesario, pues dicho archivo no contiene nada más que las cabeceras necesarias.

En este caso el único requerimiento es especificar el textdomain del Child Theme. Para eso creamos una función “setup” y la enganchamos al hook after_setup_theme.

function t_em_child_setup(){
	// Make Twenty'em Child available for translation.
	load_child_theme_textdomain( 't_em_child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 't_em_child_setup' );

Estos son los requerimientos mínimos para crear un Child Theme para Twenty'em. Con esto ya podemos comenzar a modificar nuestro archivo style.css y functions.php y extender las funcionalidades de nuestro proyecto.

Pero un momento, Twenty'em usa Bootstrap, veamos cómo heredar los archivos Less y los plugins jQuery de Bootstrap en nuestro Child Theme.

Incluir Boostrap en nuestro Child Theme

Bootstrap es conocido por ser uno de los frameworks más populares en el desarrollo de sitios webs modernos, lo que quiere decir que nos hace la vida mucho más fácil.

Bootstrap Less

Veamos cómo incluir los archivos Less de Bootstrap y heredar todo su contenido.

Lo primero que tenemos que hacer es crear un directorio donde guardar nuestros archivos .less, en este caso lo llamaremos css/. En dicho directorio incluimos un par de archivos: style-theme.less y style-scheme.less.

El nombre de los archivos es opcional y pueden ser la cantidad que cada uno desee según su flujo de trabajo y nivel de organización

En el archivo style-theme.less escribimos las siguientes lineas:

/** Import Bootstrap Less */
@import "../../twenty-em/css/style.less";
// This file is optional
@import "style-scheme.less";

La primera linea incluirá todos los archivos .less de Bootstrap y todo su contenido, variables, clases, etc… La segunda incluye el archivo style-scheme.less, que es opcional, pero en este caso lo usaremos para redeclarar variables o clases, así tener un mejor nivel de organización.

Solo falta que todo lo que escribamos en nuestros archivos .less sea efectivo para nuestro proyecto. Para ello usaremos un pequeño truco, compilaremos todos estos archivos, es decir, Twenty'em se encargará de que lo que se muestre al navegador sea solamente un archivo .css.

Para lograr esto, en nuestro archivo functions.php escribiremos la siguiente función:

function t_em_child_enqueue(){
	global $t_em_theme_data;

	$less_files = array( T_EM_CHILD_THEME_DIR_PATH . '/css/style-theme.less' => T_EM_CHILD_THEME_DIR_URL . '/css' );
	$options = array( 'compress' => true );
	wp_enqueue_style( 'child-style-less', t_em_lessphp_compiler( $less_files, $options ), '', $t_em_theme_data['Version'], 'all' );

}
add_action( 'wp_enqueue_scripts', 't_em_child_enqueue' );

El punto fundamental en este pedazo de código es la función t_em_lesphp_copiler() que se encarga de compilar todos los archivos .less de nuestro proyecto y devolver al navegador un archivo .css. De esta manera no tenemos que hacer nada más, pues esta función se encarga de verificar si hay algún cambio con respecto al último archivo compilado, de ser así, pues lo compila nuevamente y carga el archivo resultante, que puede ser algo como:

<link rel='stylesheet' id='style-less-css' href='http://example.com/wp-content/themes/twenty-em/css/cache/lessphp_942449a3404ac4438697d84936c4e31ccca8570c.css?ver=1.0' type='text/css' media='all' />

La función t_em_lessphp_compiler() se encuentra en el archivo /inc/functions.php de Twenty'em v1.1.1

Ya tenemos todo listo, o casi todo, solo falta incluir los plugins jQuery de Bootstrap en caso de que necesitemos alguno de ellos.

Bootstrap jQuery

Para incluir uno de los plugins jQuery de Bootstrap usaremos la función , que debemos llamarla desde t_em_child_enqueue(). El siguiente ejemplo muestra cómo:

t_em_register_bootstrap_plugin( $plugin, $script = '', $script_src = '', $deps = array(), $transition = true, $in_footer = false )

La función t_em_register_bootstrap_plugin() se encuentra en el archivo /inc/functions.php de Twenty'em v1.1.1

El único parámetro obligatorio para esta función es $plugin, que es el nombre del archivo a incluir. En resumen quedaría de la siguiente forma:

function t_em_child_enqueue(){
	/** */
	t_em_register_bootstrap_plugin( 'plugin.min.js' );
}
add_action( 'wp_enqueue_scripts', 't_em_child_enqueue' );

plugin.min.js puede ser cualquiera de los plugins jQuery de Bootstrap.

Conclusiones

Ya tenemos todo listo, de esta manera podemos crear nuestro Child Theme y comenzar a desarrollar un proyecto basado en WordPress y Twenty'em.

Lecturas Recomendadas

Compartir: Crear un Child Theme para Twenty'em

No hay respuestas para: Crear un Child Theme para Twenty'em

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *