jeudi 20 décembre 2018

Moodle créer un thème enfant (child theme)


Comment créer un thème enfant ou child theme pour Moodle. Il y a quelques années j'avais trouvé un très bon tuto sur internet pour comprendre comment créer un thème enfant. Du coup, je relance mes recherche et je tombe sur deux liens :
https://edwiser.org/blog/create-child-theme-moodle/
https://docs.moodle.org/dev/Creating_a_theme_based_on_boost

J'ai utilisé le second lien.
Donc, l'article qui suit en est une reprise en français, reprise pas traduction, j'essaye d'ajouter mes remarques si besoin !

La base


Déjà, donnez un nom à votre thème enfant, dans l'exemple suivant je l'ai appelé "labullefle" du nom du site !

Dans le dossier Thème de votre installation Moodle vous créez un dossier du nom de votre thème :

/votreinstallationmoodle/theme/labullefle

Pour un thème enfant, il faut 3 fichiers obligatoires :

  1. version.php
  2. config.php
  3. lang/en/theme_nomdutheme.php


Version.php


<?php
// This file is part of Moodle - http://moodle.org/
/**
* labullefle version.
*
* @package theme_labullefle
* @copyright 2018 TechNTic
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

// Cette ligne empche l'ouverture du fichier pas son url directe.
defined('MOODLE_INTERNAL') || die();

// La version du theme.
$plugin->version = '2016102100';

// La version attendu de Moodle pour le theme.
$plugin->requires = '2016070700';

// This is the component name of the plugin - it always starts with 'theme_'
// for themes and should be the same as the name of the folder.
$plugin->component = 'theme_labullefle';

// This is a list of plugins, this plugin depends on (and their versions).
$plugin->dependencies = [
'theme_boost' => '2016102100'
];



config.php


<?php
// This file is part of Moodle - http://moodle.org/
/**
* labullefle config.
*
* @package theme_labullefle
* @copyright 2018 TechNTic
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
// Cette ligne empeche l'ouverture du fichier pas son url directe.
defined('MOODLE_INTERNAL') || die();
// $THEME is defined before this page is included and we can define settings by adding properties to this global object.

// On declare le nom du theme qui doit etre le meme que le nom du dossier.
$THEME->name = 'labullefle';
// On déclare la feuille de style de notre theme, ne rien mettre si on utilise SCSS
// la feuille de style doit se trouver dans le dossier style de votre theme; On enumere les feuilles de style sans l'extension.
$THEME->sheets = array( 'course',
'extras',
'menu',
'responsive',
'custom');
// Pour configurer et appliquer du style à l'editeur de texte TinyMCE
// L'editeur de texte par defaut est "Atto"
// la feuille de style doit se trouver dans le dossier /styles/ du theme.
// Meme presentation que pour les style sheets
$THEME->editor_sheets = [];

// Le theme parent de notre theme enfant
// il es tpossible d'indiquer plusieurs themes parents
// ils seront traité en fonction de l'importance
$THEME->parents = ['boost'];

// Un dock est une maniere de mettre un bloc sur le coté de "l'ecran"
// Pour exemple bootstrapbase prend en charge les docks
// ce qu'est un dock là : www.youtube.com/watch?v=ZStUnMI_I-Q
$THEME->enable_dock = false;

// Ancienne configuration pour prendre en YUI JS
$THEME->yuicssmodules = array();

// La plupart des themes utilisent rendererfactory
$THEME->rendererfactory = 'theme_overridden_renderer_factory';

// Pour ajouter une liste de blocks requis pour le bon fonctionnement du theme
$THEME->requiredblocks = '';

// it forces a block region into the page when editing is enabled and it takes up too much room.
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;


lang/en/theme_nomdutheme.php


<?php
// This file is part of Moodle - http://moodle.org/
/**
* labullefle lang.
*
* @package theme_labullefle
* @copyright 2018 TechNTic
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

// Cette ligne empeche l'ouverture du fichier pas son url directe.
defined('MOODLE_INTERNAL') || die();

// La description du theme.
$string['choosereadme'] = 'Theme cree pour le site de La bulle FLE.';

// Le nom du plugin.
$string['pluginname'] = 'LabulleFLE';

// We need to include a lang string for each block region.
$string['region-side-pre'] = 'Right';


Voila, à ce point votre thème enfant est prêt à être utilisé sur votre site.

Pour aller plus loin 

Le favicon doit etre dans le dossier :
pix/favicon.ico

La photo d'ecran du theme qui apparait dans le selecteur de theme doit etre dans :
pix/screenshot.jpg

Le theme à besoin du fichier lib.php. Ce fichier est utile pour les API.
theme/lib.php
<?php
// This file is part of Moodle - http://moodle.org/
/**
* labullefle lib.
*
* @package theme_labullefle
* @copyright 2018 TechNTic
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
// Cette ligne empeche l'ouverture du fichier pas son url directe.
defined('MOODLE_INTERNAL') || die();
// We will add callbacks here as we add features to our theme.



Dupliquer les paramètres personnalisés

Il est déconseillé d'utiliser les paramètres du thème parent, il vaut mieux faire une copie du fichier ou des données des paramètres.

Nous allons créer les paramètres du thème parent dans le thème enfant.
Pour cela nous avons besoin d'un fichier settings.php. Attention, ceci est utile si vous souhaitez donner la main au webmaster pour qu'il fasse le relooking du site directement dans l'administration du site.

settings.php

<?php
// This file is part of Moodle - http://moodle.org/
/**
* labullefle version.
*
* @package theme_labullefle
* @copyright 2018 TechNTic
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

// Cette ligne empche l'ouverture du fichier pas son url directe.
defined('MOODLE_INTERNAL') || die();
// This is used for performance, we don't need to know about these settings on every page in Moodle, only when
// we are looking at the admin settings pages.
if ($ADMIN->fulltree) {

// Boost provides a nice setting page which splits settings onto separate tabs. We want to use it here.
$settings = new theme_boost_admin_settingspage_tabs('themesettinglabullefle', get_string('configtitle', 'theme_labullefle'));

// Each page is a tab - the first is the "General" tab.
$page = new admin_settingpage('theme_labullefle_general', get_string('generalsettings', 'theme_labullefle'));
// Replicate the preset setting from boost.
$name = 'theme_labullefle/preset';
$title = get_string('preset', 'theme_labullefle');
$description = get_string('preset_desc', 'theme_labullefle');
$default = 'default.scss';

// We list files in our own file area to add to the drop down. We will provide our own function to
// load all the presets from the correct paths.
$context = context_system::instance();
$fs = get_file_storage();
$files = $fs->get_area_files($context->id, 'theme_labullefle', 'preset', 0, 'itemid, filepath, filename', false);
$choices = [];
foreach ($files as $file) {
$choices[$file->get_filename()] = $file->get_filename();
}
// These are the built in presets from Boost.
$choices['default.scss'] = 'default.scss';
$choices['plain.scss'] = 'plain.scss';
$setting = new admin_setting_configselect($name, $title, $description, $default, $choices);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);
// Preset files setting.
$name = 'theme_labullefle/presetfiles';
$title = get_string('presetfiles','theme_labullefle');
$description = get_string('presetfiles_desc', 'theme_labullefle');
$setting = new admin_setting_configstoredfile($name, $title, $description, 'preset', 0,
array('maxfiles' => 20, 'accepted_types' => array('.scss')));
$page->add($setting);
// Variable $brand-color.
// We use an empty default value because the default colour should come from the preset.
$name = 'theme_labullefle/brandcolor';
$title = get_string('brandcolor', 'theme_labullefle');
$description = get_string('brandcolor_desc', 'theme_labullefle');
$setting = new admin_setting_configcolourpicker($name, $title, $description, '');
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);

// Must add the page after definiting all the settings!
$settings->add($page);
// Advanced settings.
$page = new admin_settingpage('theme_labullefle_advanced', get_string('advancedsettings', 'theme_labullefle'));
// Raw SCSS to include before the content.
$setting = new admin_setting_configtextarea('theme_labullefle/scsspre',
get_string('rawscsspre', 'theme_labullefle'), get_string('rawscsspre_desc', 'theme_labullefle'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);
// Raw SCSS to include after the content.
$setting = new admin_setting_configtextarea('theme_labullefle/scss', get_string('rawscss', 'theme_labullefle'),
get_string('rawscss_desc', 'theme_labullefle'), '', PARAM_RAW);
$setting->set_updatedcallback('theme_reset_all_caches');
$page->add($setting);
$settings->add($page);
}


config.php


On ajoute dans le config.php la fonction qui applique enregistre les parametres

// This is the function that returns the SCSS source for the main file in our theme. We override the boost version because
// we want to allow presets uploaded to our own theme file area to be selected in the preset list.
$THEME->scss = function($theme) {
return theme_labullefle_get_main_scss_content($theme);
};


lib.php

On ajoute la fonction qui va enregistrer les paramètres

// We will add callbacks here as we add features to our theme.
function theme_labullefle_get_main_scss_content($theme) {
global $CFG;
$scss = '';
$filename = !empty($theme->settings->preset) ? $theme->settings->preset : null;
$fs = get_file_storage();
$context = context_system::instance();
if ($filename == 'default.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
} else if ($filename == 'plain.scss') {
// We still load the default preset files directly from the boost theme. No sense in duplicating them.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/plain.scss');
} else if ($filename && ($presetfile = $fs->get_file($context->id, 'theme_labullefle', 'preset', 0, '/', $filename))) {
// This preset file was fetched from the file area for theme_labullefle and not theme_boost (see the line above).
$scss .= $presetfile->get_content();
} else {
// Safety fallback - maybe new installs etc.
$scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/default.scss');
}
return $scss;
}


Pour aller (encore) plus loin








Aucun commentaire:

Enregistrer un commentaire