Temas (XXI) Temas secundarios en WordPress

Vamos a terminar de hablar de los temas explicando lo que son los temas secundarios en wordpress y la forma de implementarlos en nuestro sistema.

Los temas secundarios tienen como función tomar un tema principal y heredarlo completamente con muy poco esfuerzo, mostrando el tema principal, pero ahora podremos añadir nuevas funcionalidades y nuevos estilos CSS que se superponen al estilo del tema padre.

Esto nos ofrece bastantes ventajas como:

  • Podemos optar por añadir funcionalidades desde cero a nuestro tema, pero tomando lo que nos guste del tema padre y ahorrar trabajo.
  • Las actualizaciones del tema padre no afectarán al tema secundario, de modo que no tendremos que realizar los cambios afectados de nuevo.
  • Al usar un tema secundario correctamente heredado podremos estar a salvo de la inyección de código entre sitios, ya que nuestro tema secundario estaría apartado del flujo de la inyección.

En contrapartida hay varios contras:

  • Si se hace un archivo nuevo para el tema secundario, como por ejemplo index.php las mejoras que tuviera el index.php del archivo principal se perderían a menos que se implementasen en el archivo del tema secundario.
  • Se aprecia cierta sobrecarga del CSS ya que se integra todo el CSS del tema principal y sobre este es donde incluimos el CSS secundario.

A pesar de estos contras los temas secundarios puede ser una magnífica solución para muchos proyectos. Además si creamos un tema base y sobre este se van realizando mejoras introduciendo las características específicas de cada proyecto en un tema secundario, siempre mantendremos nuestro tema principal limpio y con el código optimizado.

Requisitos básicos

A pesar de las ventajas de utilizar temas secundarios en WordPress, debemos de considerar los siguientes requisitos para poder desarrollar nuestro tema secundario:

  • La licencia permite la ampliación o modificación del tema
  • El tema principal no es un tema secundario

Como crear un tema secundario

Si nuestro tema principal cumple con los requisitos establecidos, crear un tema secundario es realmente sencillo. Tan solo tenemos que crear una carpeta con el nombre de nuestro tema secundario, dentro del directorio themes, y en él crear un archivo style.css donde le indicaremos a WP que este tema es un tema secundario.

Para hacerle saber a WP que se trata de un tema secundario, debemos de advertírselo en los comentarios de inicio del archivo style.css. Por ejemplo este sería el comentario de cabecera de un tema heredado de twentyfifteen:

/*
Theme Name: secundario de twentyfifteen
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyfifteen
Description: Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentyfifteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Podemos observar en la línea 6 hemos introducido;  Template: twentyfifteen, que le dice a WP que el tema padre es twentyfifteen. Sin está línea WP creerá que se trata de un tema independiente. Además es case sensitive, es decir que diferencia entre mayúsculas y minúsculas.

Pero con esto no es suficiente para traernos las funcionalidades del tema padre, aun nos queda una línea que hace que se importe. Esta línea se coloca a continuación de los comentarios de cabecera (los anteriores) en el archivo style.css.

/*Importar los estilos básicos*/
@import url('../twentyfifteen/style.css');

Su función es importar el archivo style.css del tema padre, por lo que debemos de poner la dirección relativa hasta él.

Con solo esto ya tendríamos un clon de nuestro tema principal, pero el hacer esto es para cambiar estilos y funcionalidades, creando nuestros archivos de plantilla por ejemplo o bien añadiendo CSS en nuestro tema secundario y convertir nuestro tema en algo totalmente diferente al padre.

Como sin duda ya habrás pensado, el desarrollo de temas personalizados para proyectos utilizando un tema padre y otro secundario es muy rápido y puede limpiarnos muchos dolores de cabeza, además de ahorrarnos muchísimo tiempo.