Cómo crear un Tema hijo (child theme) en Moodle

Modificar un tema en Moodle para agregar, por ejemplo, código personalizado es muy sencillo: solo basta con ir al archivo donde queremos ponerlo, guardas los cambios y ¡listo!.

El problema se presenta cuando actualizamos nuestro Moodle o el tema, ya que el código personalizado se pierde y debemos agregarlo manualmente nuevamente. Por lo que si tenemos muchos cambios, puede ser una pesadilla en cada actualización 😰.

Pero existe una solución a esto, y es implementando un Tema hijo en Moodle o Child theme (por su nombre en inglés), el cual permite que los cambios se mantengan en cada actualización.

Si quieres conocer como crear un Tema hijo en Moodle, sigue leyendo este artículo y no te pierdas ningún detalle.

¿Qué es un Tema hijo (Child theme) en Moodle?

Un tema hijo en Moodle, es un tema que depende de otro tema (padre o principal), y tiene por función mantener los cambios hechos en él, aunque el padre se actualice.

¿Qué utilidad tienen los temas hijos?

El mantener los cambios, ya que en cada actualización del tema, Moodle sobrescribe los archivos y con ello todas las modificaciones que hemos hecho.

Y si encima, el tema padre es un tema predeterminado que viene con Moodle, como Boost, en cada actualización de Moodle los cambios dirán adiós 👋.

Por ello, si queremos hacer cambios en el código del tema o agregar archivos adicionales, es recomendable usar un Tema hijo en Moodle, ya que, él copia las configuraciones de su tema padre, pero no se pierden la personalización del mismo en las actualizaciones.

Creando los archivos del Tema hijo en Moodle

Lo primero que debemos hacer es crear las carpetas y archivos que contendrá el Child theme.

Crea un carpeta o directorio en tu computadora y nómbrala como te gustaría que se llame el tema. El nombre no debe contener espacios, caracteres especiales (como acentos) o mayúsculas; si quieres que tenga más de una palabra, usa el carácter: _ en lugar del espacio en blanco.

Por ejemplo, si deseas que se llame: Super Hijo, el nombre de la carpeta seria: super_hijo

Luego, dentro de esta carpeta, crea dos nuevas carpetas, llamadas: lang y style

En la carpeta lang crea una carpeta llamada: en

Ahora pasaremos a crear los archivos que contendrá el tema, algunos estarán en la carpeta principal del tema y otros en las subcarpetas que hemos creado.

1. Creando el archivo config.php

Crea un nuevo archivo en el Bloc de notas y agrega este código:

<?php                                                         
defined('MOODLE_INTERNAL') || die();
$THEME->name = 'hijo';
$THEME->sheets = ['estilo'];
$THEME->editor_sheets = [];
$THEME->parents = ['boost'];
$THEME->enable_dock = false;
$THEME->yuicssmodules = array();
$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$THEME->requiredblocks = '';
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;
$THEME->hidefromselector = false;

De este código, cambia lo siguiente dependiendo de tu personalización:

• En $THEME->name = 'hijo'; cambia hijo por el nombre que tendrá tu tema, que debe ser igual al nombre de la carpeta del tema. Para el ejemplo de este post, el nombre de nuestro child theme será: hijo
• En $THEME->parents = ['boost']; cambia boost por el nombre del tema padre que usarás; al igual que antes, el nombre de la carpeta que contiene el tema padre es el que debes poner aquí.
  En este artículo, usaremos el tema boost.

Es importante respetar las comillas que contiene el nombre.

Guarda el archivo y nómbralo como: config.php

Si el bloc de notas agrega en el nombre alguna extensión adicional, como, por ejemplo: .txt bórrala y deja únicamente config.php

Este archivo debe estar en la carpeta principal del tema hijo.

2. Creando el archivo version.php

Al igual que antes, crea un nuevo archivo y agrega:

<?php
defined('MOODLE_INTERNAL') || die();
$plugin->version = '1.0';
$plugin->requires = '2018120300';
$plugin->component = 'theme_hijo';
$plugin->dependencies = [
    'theme_boost' => '2018120300'
];

Cambia lo siguiente dependiendo de tu personalización:

• $plugin->component = 'theme_hijo'; cambia hijo por el nombre de tu tema, que debe ser el mismo que el nombre de la carpeta que contiene el tema. No cambies la precedencia: theme_
  Por ejemplo, si el nombre de la carpeta del tema hijo es: super_hijo, la nomenclatura entre las comillas quedaría así: theme_super_hijo

Este archivo lo guardarás con el nombre: version.php

Este archivo debe estar en la carpeta principal del tema hijo.

3. Creando el archivo lib.php

Aunque este archivo no es estrictamente necesario que se cree inicialmente, es posible que en un futuro quieras agregar código a él, por lo que lo agregaremos.

Crea un archivo al cual nombrarás: lib.php y agrégale este código:

<?php                                                             
defined('MOODLE_INTERNAL') || die();

Aquí no es necesario modificar nada, solo lo dejarás listo para el futuro 🤓.

4. Creando el archivo de idiomas

Dirígete a la subcarpeta en, que como recordarás está dentro de la carpeta lang.

Crea un archivo y colócale este código:

<?php
defined('MOODLE_INTERNAL') || die();
$string['pluginname'] = 'Hijo';
$string['choosereadme'] = 'Tema hijo de tema Boost';

Cambia lo siguiente:

• $string['pluginname'] = 'Hijo'; sustituye Hijo por el nombre que le diste a tu tema. Aquí puedes usar mayúsculas o espacios si lo deseas, ya que es el nombre que usará el tema para diferenciarlo de los demás.
  Si el nombre del tema que usas, es, por ejemplo: Super hijo, el código completo de esta línea sería:  $string['pluginname'] = 'Super hijo';
• $string['choosereadme'] = 'Tema hijo de tema Boost'; cambia Tema hijo de tema Boost por la descripción que quieras darle a tu Child theme.
  Al ser una descripción puedes usar espacios y ser tan larga como desees.

Lo guardaremos y nombraremos con esta nomenclatura: theme_nombrecarpetadeltema.php donde nombrecarpetadeltema será el nombre de la carpeta (principal) que contiene el tema.

Por ejemplo, para este artículo, como el nombre del tema hijo es: hijo, el nombre del archivo seria: theme_hijo.php

Si el nombre del tema es, por ejemplo, Super hijo, el nombre del archivo quedaría como: theme_super_hijo.php

5. Creando el archivo estilo.css

Por último, crearemos un archivo llamado: estilo.css y lo guardaremos en la carpeta style.

Agrégale este código a estilo.css:

@charset "UTF-8";

Aquí pondrás el CSS que necesites para personalizar el tema, por lo que esta línea de código que se agrega es solo para inicializar el archivo.

Con esto finalizaría la creación de los archivos del tema hijo para Moodle.

La estructura de los directorios y archivos quedaría así:

Instalando el tema hijo en Moodle

Ahora que tenemos el tema hijo creado deberemos instalarlo en Moodle.

Para ello puedes usar este tutorial para hacerlo.

Es recomendable instalarlo manualmente como se muestra en ese tutorial, ya que, si lo instalamos como un plugin, nos dará error.

Cuando termines de instalarlo en tu Moodle, habilítalo como se muestra en la misma guía, yendo a: Administración del sitio > Apariencia > Temas > Selector de temas.

Si tenías CSS aplicado al tema padre, cuando actives el tema hijo este código no funcionará. Por lo que debes copiar ese código CSS al tema hijo, en el archivo estilo.css que creamos.

Luego de guardar el CSS en estilo.css, limpia la cache de Moodle en: Administración del sitio > Desarrollo > Purgar cachés, haciendo clic al botón: Purgar todas las cache.

Con esto ya tienes tu child theme funcionando 🤩 y también finalizamos este post, espero sea de ayuda. No te vayas sin antes dejar un comentario. Saludos.