Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Moodle: creare un tema basato su Boost

Moodle. Impariamo a creare un tema basato su Boost per la learning platform Moodle. Struttura di un tema per la personalizzazione del frontend e analisi dei file.
Moodle. Impariamo a creare un tema basato su Boost per la learning platform Moodle. Struttura di un tema per la personalizzazione del frontend e analisi dei file.
Link copiato negli appunti

Cos'è un tema? Un tema in Moodle è un tipo di plugin che può essere sviluppato. I temi sono responsabili dell'impostazione della struttura di ciascuna pagina e della possibilità di personalizzare l'output di qualsiasi pagina in Moodle.

Il nostro tema avrà bisogno innanzitutto di un nome. Sarebbe buona cosa trovare un nome adatto e che non sia già stato utilizzato da qualcun altro questo in ogni caso eviterà possibili confusioni. Nel nostro caso chiameremo, con poca fantasia, il tema "test".

Per prima cosa creiamo la cartella per il nuovo tema sotto la cartella "/ theme /" nella directory principale di Moodle e la chiamiamo test. Ora abbiamo bisogno di aggiungere alcuni file plugin standard al nostro tema. Il primo è version.php che avrà questa struttura:

Ogni file dovrebbe avere licenza GPL e copyright nell'intestazione - lo saltiamo in questo percorso ma in un lavoro reale dovrebbe esserci

Questa linea protegge il file dall'accesso diretto da un URL.

defined('MOODLE_INTERNAL') || die();

Questa è la versione del plugin.

$plugin->version = '2019012500';

Questa è la versione di Moodle richiesta da questo plugin.

$plugin->requires = '2016070700';

Questo è il nome del componente del plugin - inizia sempre con "tema_". Per tutti i temi e dovrebbe essere uguale al nome della cartella.

$plugin->component = 'theme_test';

Questa è una lista di plugin e si indica dipendenza e versione.

$plugin->dependencies = [
    'theme_boost' => '2019012500'
];

Abbiamo anche bisogno di un file per la traduzione delle etichette in modo che tutte le nostre stringhe possano essere tradotte in diverse lingue. Il nome di questo file è il nome del componente del nostro plugin e si trova nella cartella lang /en/ per il nostro plugin. La struttura del file è abbastanza semplice dato che si tratta di un array associativo con i relativi valori, questo è un frammento della prima riga del file di boost

defined('MOODLE_INTERNAL') || die();
$string['advancedsettings'] = 'Advanced settings';

Il contenuto della prima riga già lo conosciamo, mentre la seconda riga è specifica del nostro lavoro, qui andremo a impostare nei vari file le traduzioni. Ovviamente il file completo contiene un numero decisamente superiore di chiavi che per comodità abbiamo omesso.

I temi hanno alcuni altri file standard che devono essere definiti. Uno fra questi è un file favicon da mostrare nella barra degli indirizzi. Andrà inserito nella cartella pix e il suo nome sarà favicon.ico

Come già avviene in altri CMS come ad esempio WordPress è necessario anche avere uno screenshot di esempio da visualizzare nel selettore di temi per facilitare il riconoscimento e la scelta; anche questo sarà nella cartella pix e si chiamerà screenshot.jpg

Inoltre i temi richiedono un file lib.php. Questo file contiene i callback utilizzati dalle varie API in Moodle. Inizialmente esso può essere vuoto, ma man mano che integriamo funzionalità al nostro tema è necessario aggiungere alcune funzioni.

La configurazione del tema va inserita nel file config.php. Questo è uno dei file più importanti del nostro tema. Una volta aggiunto saremo pronti a testare il tema per la prima volta.

Il contenuto del file sarà questo:

defined('MOODLE_INTERNAL') || die();

La prima impostazione di cui abbiamo bisogno è il nome del tema. Questa dovrebbe essere l'ultima parte del nome del componente e coincidere con il nome della
directory

$THEME->sheets = [];

Questa impostazione elenca i fogli di stile che vogliamo includere nel nostro tema.

$THEME->editor_sheets = [];

Questa è un'impostazione che può essere utilizzata per fornire alcuni stili al contenuto nell'editor di testo TinyMCE.

$THEME->parents = ['boost'];

Questa è un passaggio chiave. Stiamo dichiarando che vogliamo ereditare dal theme_boost sfruttandolo come punto di partenza per SCSS, Bootstrap e tema. Volendo si potrebbe aggiungere più di un genitore tenendo in considerazione l'ordine di importanza e di override

$THEME-> parents = ['boost'];

Un dock è un modo per rimuovere i blocchi dalla pagina e inserirli in un'area fluttuante persistente sul lato della pagina. Boost non supporta un dock, quindi non lo useremo

$THEME->enable_dock = false;

Molti temi useranno rendererfactory in quanto questo è quello che consente al tema di sovrascrivere qualsiasi altro renderer.

$THEME->rendererfactory = 'theme_overridden_renderer_factory';

Questa è una lista di blocchi che devono esistere su tutte le pagine affinch´ questo tema funzioni correttamente.

$THEME->requiredblocks = '';

Questa è una funzione che dice alla libreria dei blocchi di non utilizzare il blocco "Aggiungi un blocco"

$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;

Come si può osservare, quello che abbiamo creato è a tutti gli effetti un tema figlio. Adesso possiamo effettivamente installare e testare il nostro nuovo tema.

Per provarlo dobbiamo accedere come amministratore per installare il nuovo plug-in e quindi scegliere il nuovo tema dal selettore di temi. In questo momento il nostro tema è identico a Boost.

Dato che abbiamo adottato una configurazione minima, ereditiamo quasi tutto dal tema principale, inclusi stili e modelli.


Ti consigliamo anche