Temas nieto – Cómo adaptar temas hijo (creados a partir de frameworks)

Una de las cosas que más me gusta de WordPress es la gran cantidad de temas disponibles. Puedes literalmente tener una web completamente nueva en pocos minutos, simplemente cambiando tu tema actual por otro. Y no sólo eso, todos los temas pueden ser adaptados, de una forma u otra, a tus necesidades específicas.

Todos los temas WordPress vienen (o deberían venir) con una página de Settings que permite la configuración de algunos aspectos del tema como, por ejemplo, especificar fragmentos de CSS utilizado o incluir código JavaScript. Si tienes que adaptar un tema, empieza por mirar si te basta con los Settings que te ofrece y úsalos. Para aquellas situaciones en las que necesitas una adaptación más específica que la que puedes conseguir con las opciones del tema, es muy probable que no te quede otra opción que modificar su código fuente para conseguir los resultados deseados. La mejor forma de lidiar con estos casos son los temas hijos. Como ya os expliqué en esta entrada:

Los temas hijo son temas que heredan la funcionalidad de otro tema, llamado tema padre. Son una forma fácil de modificar o añadir funcionalidad al tema padre sin tener que manipularlo directamente. La mejor forma de comprender cómo crear un tema hijo y, así, modificar al padre, es a través de un pequeño ejemplo.

Pero a veces ni los temas hijos son suficientes sinó que hay que recurrir a «temas nieto». En este post, os quiero explicar un problema que nos encontramos hace unos días durante la migración a WordPress de una web. El cliente quería utilizar una plantilla basada en Genesis. Para los que no lo sepáis, Genesis es un framework (hay otros, como Thesis) que simplifica la creación de nuevos temas. Siempre que hay que usar un tema basado en Genesis (por ejemplo, Jane), primero hay que instalar Genesis y después el tema que quieras utilizar, que no es más que un tema hijo que extiende Genesis. En nuestro caso, el cliente requería modificaciones profundas al tema con lo que tuvimos que arremangarnos y adaptar su código fuente. ¿El problema? No se puede crear un tema hijo de un tema hijo, ¡no hay manera fácil de crear temas nieto!

Así que ¿qué pasa cuando lo que hay que adaptar es un tema hijo? No hay más remedio que modificar el código fuente. La cuestión es como hacerlo de la mejor manera posible y evitando futuros problemas (derivados de actualizaciones del tema). La mejor recomendación que puedo dar es minimizar el acoplamiento entre los cambios que hagas y el código original del tema.

En nuestro caso, tuvimos que modificar los archivos style.css (había que añadir algunas líneas nuevas) y functions.php (para eliminar algunos «hooks» y añadir otros). Estos son los pasos que seguimos para minimizar el acoplamiento en lo posible:

1. Crear dos nuevas carpetas dentro de la carpeta raiz del tema Jane: jane/original y jane/customizations.
2. Poner dentro de la carpeta original los archivos a modificar. En este ejemplo, jane/original/style.css y jane/original/functions.php.
3. Crear los mismo archivos dentro de la carpeta customizations: jane/customizations/style.css y jane/customizations/functions.php.
4. Crear los mismos archivos en la raiz de la plantilla.
5. Asegurarse que los archivos en el paso 4 incluyen el contenido de los pasos 2 y 3.
6. Realizar las adaptaciones en los archivos del paso 3 y guardarlos también en algún lugar seguro por si una actualización futura del tema los borrase.

Resumiendo, la estructura final del directorio es la siguiente:

• jane/
  • style.css
  • functions.php
  • ...
  • original/
    • style.css
    • functions.php
  • customizations/
    • style.css
    • functions.php

Y como os debéis estar preguntando como eran los archivos del paso 4 una vez adaptados (paso 5), aquí los tenéis:

• style.css:

  /*
     Theme Name: jane
     Description: A chic and simple premium WordPress Theme.
     Author: Lindsey Riel
     Author URI: http://www.prettydarncute.com/
     Version: 2.0.0
     Tags: black, white, photography, clean, simple, plain
     Template: genesis
     Template Version: 2.0.0
  */
  @import url(original/style.css);
  @import url(customizations/style.css);

• functions.php:

  <?php
  require_once( 'original/functions.php' );
  require_once( 'customizations/functions.php' );
  ?>

Como podéis ver, nuestras modificaciones quedan separadas de la versión original con lo que nuestro «tema nieto» es más fácil de mantener y, en el caso de qué el tema Jane sea actualizado, seguir funcionando sin problema simplemente repitiendo el proceso aquí descrito. Tened en cuenta que no todos los archivos del tema se pueden modificar con este procedimiento, la adaptación de algunos archivos require añadir código «inline».

Espero que esto os ayude. Y ¡explicadnos vuestra experiencia!

Imagen destacada de Alexander Dummer en Unsplash