Una de las primeras cosas que hacemos es definir el aspecto visual de nuestra web, necesitamos que sea atractiva y amigable para nuestros visitantes. Es la vía de comunicación entre nosotros y ellos. Dentro de WordPress los temas se encargan de esa tarea, implementando el aspecto visual y muchas de las funcionalidades requeridas.

¿Qué son los temas hijos y cual es su utilidad?

Un tema de WordPress no es más que un grupo de archivos, diseñados para funcionar en conjunto y determinan tanto el aspecto visual, como las funcionalidades de nuestra web. Si lo primero que hacemos es escoger un tema para nuestra web, el siguiente paso que debemos dar es crear un tema hijo. ¿Por qué debemos hacerlo?

La respuesta es simple, sea cual sea el tema elegido, llegará el momento en que haremos algún ajuste o modificación del diseño, o puede que necesitemos ampliar las funcionalides incluidas de serie. Si modificamos los archivos originales, correremos el riesgo de que al actualizar el tema, nuestras modificaciones se pierdan. 

Y debemos mantener nuestro tema actualizado. Las actualizaciones no solo nos ofrecen nuevas y mejores funcionalidades, sino que corrigen errores y fallos de seguridad. Si no mantenemos nuestro software al día, aumentamos innecesariamente el riego de perder nuestros contenidos, o que nuestra web sea comprometida por hackers.

Podemos definir un tema hijo como un grupo de archivos independientes, que modifican las funcionalidades del tema padre.  Un tema hijo nos permite hacer las modificaciones necesarias y a la vez podemos mantener el tema actualizado. Lógicamente tendremos que revisar nuestras modificacioens para mantenderlas adaptadas a las nuevas versiones del tema, pero no perdemos nuestro trabajo.

Muchos temas comerciales, incluyen temas hijos y recomiendan trabajar con ellos. Cuando no sea así, crear un tema hijo es una tarea sencilla, al alcance de cualquiera. 

¿Cómo crear un tema hijo?

Como para casi todo en WordPress, tenemos más de un plugin para hacerlo. Una busqueda en el repositorio o en Google nos presentará varias opciones. Nos obstante, veamos como hacerlo manualmente.

Para ello debemos crear una carpeta dentro de /wp-content/themes, con el nombre que deseemos y dentro de esa carpeta tenemos que crear 2 archivos:

  • 1
    style.css

Este archivo debe comenzar con el siguiente texto:

/*    
Theme Name: Tema Hijo
Theme URI: http://example.com/tema-hijo/
Version: 1
Description: Descripción del tema hijo.
Author: Nombre del autor
Author URI: http://example.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, responsive-layout
Template: tema-padre
Text Domain: tema-hijo
*/
/* A partir de esta línea comienza la personalización del tema */

Cambiaremos las líneas, según nuestras necesidades. 
Theme Name: Pondremos el nombre de nuestro tema.
Template: Pondremos el nombre de la carpeta que contiene el tema padre, por ejemplo si estamos desarrollando un tema hijo de Twenty Seventeen, la carpeta sería twentyseventeen.
Text Domain: Necesaria si queremos agregar texto traducible en nuestro tema hijo.

El resto de las líneas son opcionales, pero se recomienda colocarlas.

  • 2
    funtions.php

El archivo style.css del tema hijo, reemplaza al archivo style.css del tema padre. Por ese motivo es necesario cargar su contenido. La práctica recomendada es cargar los estilos usando el archivo functions.php.

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

<?php

function enqueue_child_styles() {
$estilo_p = 'estilo-del-padre';
$uri_padre = get_template_directory_uri();
$estilo_h = 'estilo-del-hijo';
$uri_hijo = get_stylesheet_directory_uri();
wp_enqueue_style( $estilo_p, $uri_padre . '/style.css' );
wp_enqueue_style( $estilo_h, . '/style.css',
array($estilo_p),wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_styles');

Este fragmento de código utiliza la acción wp_enqueue_scripts para cargar los estilos definidos en nuestra función enqueue_child_styles.

Dentro de nuestra función definimos las variables:
$estilo_p: ID del padre, lo buscaremos dentro del functions.php del padre. Una ubicación probable es  la llamada a wp_enqueue_scripts
$estilo_h: ID del hijo, podemos usar cualquier texto
$uri_padre: Ubicación de los archivos del padre, utilizamos la función predefinida en WordPress para ello.
$uri_hijo: Ubicación de los archivos del hijo. También utilizamos la función predefinida en WordPress para ello.

A diferencia de style.css, el archivo functions.php no sobrescribe al del tema padre, se carga antes que él. Como podemos nuestro propio código, sin limitaciones, esto permite añadir nuevas funcionalidades, y también modificar las existentes. 

Si subimos ambos archivo a nuestra instalación, tendremos nuestro tema disponible en nuestro panel de control en WordPress. 

Un pequeño detalle;  si queremos utilizar una imagen para nuestro tema hijo, debemos subirla en formato png o jpg. El nombre del archivo debe ser screenshot.png o screenshot.jpg, según corresponda. Yo uso un tamaño de 800x600. Si accedemos a los detalles del tema, se nos mostrará la información que hayamos incluido en style.css

Solo tendremos que activar nuestro tema hijo y a partir de ese momento, haremos nuestras modificaciones, con la confianza de que podemos actualizar el tema padre sin perder nuestro trabajo.

Como usar el tema hijo

Usaremos style.css para modificar los estilos del tema padre e incluir los nuestros. Si repasamos functions.php vemos que primero cargamos los estilos del padre, de esa forma nuestras modificaciones tienen precedencia.

El archivo functions.php, es nuestro mejor amigo. Por ejemplo, veremos que a veces incluir unas pocas líneas de código, nos pueden evitar tener instalado un plugin. Encontraremos ese tipo de recomendaciones muy a menudo.

En el caso de modificaciones complejas, podemos estructurar nuestras modificaciones de acuerdo a nuestras necesidades y en lugar de tener un functions.php gigantesco, usaremos las herramientas de PHP para gestionar nuestro código.

Una funcionalidad muy importante es la que nos permite modificar los archivos del tema padre. Por ejemplo queremos modificar la cabecera (header.php), el pie de página footer.php) o la plantilla de nuestras páginas (page,php). Solo tenemos que copiarlas a las carpeta de nuestro tema hijo y realizar las modificaciones pertinentes. 

En realidad podemos hacer esto con cualquier archivo del padre, lo copiamos en la misma ubicación dentro de nuestro tema hijo, creando las carpetas intermedias que sean necesarias, y trabajamos sobre nuestra copia. Siempre que exista una copia modificada, WordPress la utilizará en lugar de utilizar el archivo original.

También podemos crear nuevos archivos para añadir plantillas y formatos adicionales, específicos para nuestro tema. Para ello nos guiaremos por la jerarquía de WordPress. En breve trataremos este aspecto con más detalle.

Esta gran ventaja, tiene un pequeño impacto en la velocidad de carga de nuestra web. La búsqueda adicional dentro del tema hijo requiere tiempo. 

Ventajas e inconvenientes de los temas hijos

La principal ventaja de un tema hijo es que nos evita crear un tema nuevo desde cero. Podemos utilizar cualquier tema gratuito o comercial que nos ofrezca la mayoria de las funcionalidades deseadas. De esta forma tendremos que hacer pocas modificaciones

Por otra parte, mantener el tema padre actualizado no pondrá en peligro nuestro trabajo. Así podemos beneficiarnos de utilizar una plataforma estable, ampliamente probada y menos sucesptible a errores y agujeros de seguridad.

Y, si el tema padre incluye widgets y plugins, estos estarán disponibles directamente en nuestro tema hijo. Es otra forma de decir que heredamos no solo el diseño sino todas las funcionalidades.

Como ya hemos indicado, un tema hijo tiene un pequeño impacto negativo en el rendimiento de nuestra web. Si este impacto es relevante, debemos plantearnos cambiar de tema padre o desarrollar por completo un tema propio.

La implementación de un tema hijo, requiere conocer el funcionamiento del tema padre. Algunos frameworks pueden ser complejos, o pueden incluir características que no utilizemos. Nos llevará tiempo familiarizarnos con ellos, por eso es muy importante hacer la elección correcta.

Finalmente, nuestro tema hijo es un tema completamente diferente de cara a WordPress. Esto quiere decir que si ya hemos personalizado el tema padre, tendremos que repetir el proceso en el tema hijo. Por este motivo, debemos crear el tema hijo antes de personalizar el tema padre.

Si ya es demasiado tarde y tenemos la suerte que el tema padre permite exportar e importar sus configuraciones, haremos el proceso según su documentación. En caso contrario tendremos que utilizar algun plugin como:

Como hemos visto, ya no tenemos excusas para no utilizar temas hijos en nuestro  Wordpress


0 0 votes
Valoración del artículo
Suscribir
Notificar de
guest
0 Comentarios
Newest
Oldest Most Voted
Inline Feedbacks
View all comments