Foto de Alexander Dummer en Unsplash

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 customizationsjane/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

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

  1. Avatar de Teresa
    Teresa

    Gracias, precisamente estaba buscando cómo hacer un tema nieto…
    pero no entiendo lo siguiente (quizá sea un error)
    @import url(original/style.css); -> @import url(../original/style.css);
    @import url(customizations/style.css); -> aquí sería @import(../jane/style.css) ¿?

    1. Avatar de David Aguilera

      No exactamente. En general, cuando creamos un tema hijo, lo que hacemos es crear un nuevo directorio (por ejemplo, «mi-jane-modificado») y hacemos que el «style.css» del tema hijo contenga, básicamente, dos cosas: (1) la meta-información donde especificamos el nombre, el tema en el que se basa, etc. y (2) el @import hacia el style del tema padre «@import(../jane/style.css)».

      En nuestro ejemplo, sin embargo, no estamos creando un tema hijo al uso. El problema que nos encontramos aquí es que el tema que queremos usar como tema padre «jane» es ya un tema hijo (su tema padre es el framework «genesis»). Es por ello que no podemos crear un tema hijo «mi-jane-modificado» (hijo de «jane», nieto de «genesis»).

      La solución que proponemos consiste en editar directamente el tema «jane», intentando no modificar directamente los ficheros por defecto. Creamos dos subdirectorios «original» y «customizations» y guardamos una copia de los ficheros originales en el subdirectorio «original».

      ¡Espero haberte resuelto las dudas!

  2. Avatar de marta
    marta

    Hola David! Muchas gracias por tu post, muy interesante esto de los temas nieto, nunca lo había oído. Quería preguntarte si este método podría funcionar si quiero cambiar un archivo que se encuentra en una sub sub carpeta de la raíz del tema padre (tema-padre > carpeta > sub-carpeta > archivo.php)
    Muchas gracias!

    1. Avatar de David Aguilera

      Hola Marta,

      No, en principio no se puede, ya que las plantillas que se pueden sobrescribir en un tema hijo únicamente permiten estar hasta un subdirectorio (y eso suponiendo que sea un fichero plantilla; si son ficheros con funciones, no creo que se pueda a no ser que el tema padre esté preparado explícitamente para ello).

      Un saludo,
      David

  3. Avatar de Joel
    Joel

    This makes no sense. I tested this and when you update the theme it overwrites all your changes like normal, the «original» and «customization» folders are deleted along with all your other changes to the Jane child theme. (in my case I’m using the «church» child theme of «omega.» Your post might make sense if you weren’t modifying the child theme but instead were creating a new theme and you symlinked the Jane files into the new theme’s «original» folder and you put your modifications in «customization» folder. If you aren’t making modifications to the child theme you want to keep updated–could you explain what you are doing and why specifically it is useful? I understand what coupling is but I don’t understand why it would be useful here. If you aren’t modifying the child theme that you want to keep up to date you are just making a new theme while keeping Jane theme files in an «original» folder and adding your changes in a «customization» folder. In this situation getting updates from the Jane theme would entail copying the updated theme files from the actual Jane theme folder to your «original» folder. This is inefficient which is why I thought symlinks might make this post make sense but I never saw you mention it so I am extremely confused.

    1. Avatar de David Aguilera

      Yes, you’re right: when the theme is updated, those folders are completely removed. I should have mentioned this explicitly in my post, but the idea of isolating your customizations was simply to make it simpler for you to create a backup of those, so that you could restore them after an update. Symlinks sound like a good idea too (even though your grand-child theme might not be symlinking all the files in its parent after an update).

      An alternative solution might be to create a customizations plugin that adds the extra CSS you’re interested in and defines extra page templates as needed.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.