Google+

Temas hijos en WordPress

Temas hijos en WordPress

Es indiscutible que WordPress es una herramienta que aporta mucho valor a usuarios y desarrolladores en Internet.

Aunque no es la mejor opción para todos los proyectos, es una plataforma de calidad para blogs y, cada vez más, para sitios webs sencillos. Es fácil de usar, extensible y tiene una gran comunidad activa.

En este artículo haré una introducción a una característica muy útil: los temas hijos en WordPress.

Si has trabajado con WordPress alguna vez, seguro que has utilizado los temas en mayor o menor medida. Los temas son los responsables de la apariencia y la distribución del contenido en el sitio web.

En muchos casos es suficiente con instalar y configurar algún tema de terceros (libre o de pago). O, si estás empezando, puedes simplemente utilizar uno de los temas incluidos en la instalación de WordPress.

Sin embargo, tarde o temprano surge la necesidad de realizar cambios en el tema que estamos utilizando para adaptarlo a las necesidades concretas de nuestro proyecto. Los temas hijos de WordPress nos permiten hacer esto de forma elegante y efectiva, además de disminuir el tiempo de desarrollo.

Cómo crear un tema hijo en WordPress

Crear un tema hijo en WordPress es muy sencillo. Lo primero que debes hacer es crear un directorio para el tema hijo en el directorio de temas (normalmente en /wp-content/themes/). Crea el archivo style.css dentro de él.

temas_hijos_2

Aunque no es obligatorio, es habitual utilizar el nombre del tema padre seguido de un sufijo (en el ejemplo: -child).

A continuación, incluye el siguiente contenido en el archivo style.css;

/*
 Theme Name: HelpDev demo
 Author: HelpDev
 Author URI: https://helpdev.org
 Template: twentyfifteen
 Version: 1.0
 */
 @import url("../twentyfifteen/style.css");

 

El bloque de comentarios al comienzo es información que WordPress detecta e interpreta. Es ahí donde se está “exponiendo” el tema hijo y donde añadiremos futuras configuraciones del tema hijo.

Añade al final del archivo anterior alguna regla CSS para modificar la apariencia del sitio web. Por ejemplo, puedes cambiar el color de los enlaces y encabezado de los widgets con:

a, .widget-title {
color: red;
}

 

Ya solo queda activar el nuevo tema hijo en Apariencia > Temas. Aparece con el nombre indicado en la línea Theme Name del archivo style.css (“HelpDev demo” en este ejemplo).

Si al acceder al sitio web puedes ver los enlaces y los títulos de los widgets en color rojo, ya lo has conseguido. Has creado tu primer tema hijo en WordPress.

temas_hijos_1

Ahora puedes realizar ajustes a la apariencia de tu sitio web sin afectar al tema padre. También puedes actualizar el tema padre (algo que deberías hacer con frecuencia) y mantener la personalización en el tema hijo.

Incluir estilos del tema padre

En el ejemplo anterior se utiliza la directiva @import de CSS para heredar los estilos del tema padre. Esto no se considera una buena práctica.

La forma correcta de encolar hojas de estilos es a través del archivo functions.php, utilizando la acción wp_enqueue_scripts y usando wp_enqueue_style().

Para empezar, crea un nuevo archivo functions.php en el directorio del tema hijo.

temas_hijos_10

Para incluir los estilos del tema padre Incluye el siguiente código PHP en functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style',get_template_directory_uri() . '/style.css' );
}

 

Por último, no olvides quitar la directiva @import() del archivo style.css que incluimos en el primer ejemplo.

Ahora puedes refrescar el sitio y comprobar que la personalización de tu tema sigue funcionando.

En el siguiente código se muestra como asegurar que las hojas de estilo se cargan en el orden deseado (primero el padre y luego el hijo):

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

 

Modificar la salida HTML del tema padre

En ocasiones no es suficiente con alterar los estilos visuales de un tema para adaptarlo a nuestras necesidades. Hay veces que es inevitable alterar la estructura HTML.

Un tema hijo puede sobreescribir el funcionamiento de cualquier archivo del tema padre. Para ello, simplemente debes crear un archivo con el mismo nombre en el tema hijo, puedes copiarlo del tema padre. En nuestro ejemplo, copiamos el archivo footer.php del tema padre.

temas_hijos_6

Puedes pegar el siguiente código en el archivo footer.php de tu tema hijo:

  </div><!-- .site-content -->
    <footer id="colophon" class="site-footer" role="contentinfo">
      <div style="text-align:center;">
        <br/><br/>
        Este es el pie del tema hijo.
        <br/><br/><br/>
      </div>
    </footer><!-- .site-footer -->
  </div><!-- .site -->
  <?php wp_footer(); ?>
</body>
</html>

 

Ahora, cuando actualices el navegador, verás que en el pie se reflejan los cambios del tema hijo.

temas_hijos_9

El archivo functions.php del tema hijo se carga junto con el del tema padre. Así se pueden modificar funcionalidades del tema padre de una manera cómoda y segura


Quique Fdez. Guerra

I like to describe myself as a creative developer, focused on JavaScript on frontend and backend but also playing with Sass and Cordova or sometimes with .NET. I'm working at Plain Concepts and I'm founder of HelpDev.

HelpDev_

HelpDev_