Si estás creando una página en Wordpress de cierta enjundia y no quieres tirarte de los pelos, te recomendamos que lo plantees mediante la creación de un child theme. ¿Por qué?
¿Por qué crear un child theme?
Mientras que una plantilla principal incluye todos los archivos del theme de WordPress y los activos necesarios para que el tema funcione, un child theme en Wordpress es la replicación de la estructura del tema padre en una carpeta paralela con el fin de tener nuestras personalizaciones a salvo. En general, un tema hijo hereda la apariencia del tema principal y todas sus funciones, pero se puede utilizar para realizar modificaciones en cualquier parte de la plantilla. De esta forma, las customizaciones se mantienen separadas de los archivos del tema principal y nos da la seguridad de actualizar el tema base sin afectar las personalizaciones realizadas en nuestra web. ¿Qué beneficios tiene?
- Mantenemos la personalización separada de las funciones del tema central.
- Aprovechamos el esfuerzo y las pruebas realizadas en el tema principal.
- Son una excelente forma de empezar a aprender sobre el desarrollo de themes en Wordpress.
- Supone un ahorro de tiempo y dinero.
¿Cómo crear un child theme?
Cuando hoy en día compramos una template muchas veces esta contiene un .zip para instalar directamente el child theme. Esto nos generará la estructura necesaria y los principales archivos de personalización vacíos. Si queremos entender como funciona un tema hijo, los pasos a seguir son:
Crear la carpeta del tema hijo
Primero, crearemos una nueva carpeta en su directorio de temas, ubicado en wp-content/themes. Es una buena práctica nombrarlo con el mismo que el principal añadiendo el sufijo -child. Por ejemplo, si estamos creando un tema hijo de la plantilla Salient el nombre del hijo debería ser “salient-child”.
Crear las hojas de estilo
A continuación, deberemos generar el archivo de estilos. Este documento llamado style.css contiene todas las reglas y declaraciones CSS que controlan el aspecto de la web. La hoja de estilo debe contener un formato de encabezado concreto que le indicará a WordPress la información básica sobre el tema, incluido el hecho de que es un tema secundario con un padre en concreto. En él, los campos ‘Template’ y ‘Theme Name’ son obligatorios.
/*
Theme Name: Salient
Theme URI: http://mi-web.com/salient-child/
Description: Salient Child Theme
Author: Vivra Estudio
Author URI: https://vivraestudio.com
Template: salient
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: salientchild
*/
Encolar las hojas de estilo
La forma ideal de encolar style.css es que el tema principal cargue ambos (el padre y el hijo). Desgraciadamente no todas las templates funcionan así. Por lo tanto, debemos examinar el código fuente del tema principal para ver lo que hace y obtener el nombre de identificador que utiliza el tema principal. El identificador es el primer parámetro de wp_enqueue_style().
Si el tema principal carga ambas hojas de estilo, el tema secundario no necesita hacer nada.
Si el tema principal carga su estilo usando una función que comienza con get_template, como get_template_directory() y get_template_directory_uri(), el child theme debe cargar solo los estilos secundarios, usando el identificador principal en el parámetro de dependencia.
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(),
array( ‘parenthandle’ ),
wp_get_theme()->get(‘Version’) // solo funcina si tienes Version en el encabezado
);
}
Por contra, si el theme principal llama a sus estilos usando una función que comienza con get_stylesheet, como get_stylesheet_directory() y get_stylesheet_directory_uri(), el tema secundario debe cargar las hojas de estilo principal y secundaria.
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
$parenthandle = ‘parent-style’; // Esto es salient-style’ del Salient theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . ‘/style.css’,
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get(‘Version’)
);
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(),
array( $parenthandle ),
$theme->get(‘Version’) // solo funcina si tienes Version en el encabezado
);
}
Instalar y activar el child theme
Es la hora de instalar el child theme en nuestro Wordpress. Si hemos creado la estructura en local, podemos copiar la carpeta mediante FTP en la ruta antes indicada. También es posible crear un .zip de la estructura creada e ir a Apariencia > Temas > Agregar nuevo para cargar el archivo zip como con cualquier otro theme.
En estos momentos el tema hijo ya está listo para activarse. Volviendo a Apariencia > Temas deberíamos ver el nuevo tema en la lista y activarlo.
Añadir archivos de templates
Para modificar las templates contenidas en nuestra web tanto en el tema central como en otros módulos, deberemos copiar la template original a una estructura similar en el tema hijo. Esto implica que la nueva template del theme child realizará una sobrescritura de la original. Por ejemplo, para el caso de Woocommerce, podemos crear un arbol tipo Woocommerce > emails y copiar y modificar email-header.php del plugin original.
Usar functions.php
Mientras que las templates en el punto anterior sobrescriben, los archivos functions.php y styles.css “suman”. Todo aquello que no esté contenido en el hijo será reclamado desde el padre. La estructura de functions.php es muy simple: debe incluir una etiqueta PHP de apertura en la parte superior y, debajo, las funciones PHP que queremos incluir entre nuestras funcionalidades.
Recuerda que el tema hijo se carga siempre antes que el tema padre.
< ?php // Apertura PHP tag – no debe haber nada por encima
//Función para eliminar provincias
add_filter(‘woocommerce_states’, ‘eliminar_provincias’);
function eliminar_provincias( $provincias ) {
unset($provincias[‘ES’][‘TF’]);
unset($provincias[‘ES’][‘GC’]);
unset($provincias[‘ES’][‘CE’]);
unset($provincias[‘ES’][‘ML’]);
return $provincias;
}
Hasta aquí el escrito de hoy. Si tienes alguna duda puedes ponerte en contacto con nosotros o consultar nuestros servicios de diseño web.
Open 10 - 19h.