Utiliser Twig pour les thèmes WordPress

Comment utiliser le moteur de rendu de chez SensioLab, Twig pour les thèmes WordPress ?

Par défaut, WordPress n’utilise aucun moteur de rendu. Pour les développeurs front ayant l’habitude d’en utiliser et plus particulièrement Twig, ils pourront se réjouir de savoir qu’il est possible de l’utiliser pour créer des thèmes WordPress.

Installation du plugin Timber

Cette compatibilité passe par l’installation d’un plugin nommé Timber. Pour l’installer allez dans Extensions -> Ajouter. Recherche Timber. Lancez l’installation puis activer le plugin.

Utilisation

Timber ne permet pas une substitution totale de PHP au profit de Twig. C’est pourquoi il va tout de même falloir créer les fichiers de templates de WordPress avec PHP. Voir l’article intitulé les fichiers de templates de WordPress pour de plus de détails.

Les fichiers PHP seront placés à la racine du thème, quant aux fichiers Twig, ils seront dans un nouveau sous-dossier nommé views.

Les fichiers Twig et PHP peuvent avoir des noms différents. Mais dans cet exemple les noms seront les mêmes. Dans chaque fichier PHP (sauf fonctions.php) ajouter uniquement le code source suivant:

[php]$context = array();
$context[‘message’] = ‘Hello Timber!’;
Timber::render(‘header.twig’, $context);

[/php]Ces lignes de code vont permettre au plugin Timber de transpiler les fichiers Twig en PHP et ce, en fonction des noms des fichiers renseignés à la troisième ligne.

Exemple avec le fichier d’en-tête fichier header.php contenant le code source ci-dessus. Créez également le fichier /views/header.twig qui contiendra tout le code (HTML, Twig, JS…). Le fichier header.twig sera transpilé (converti) à la volée par Timber et le résultat de cette transpilation sera placé dans le fichier header.php. De ce fait, WordPress pourra charger le fichier header.php en toute quiétude.

Le fichier Twig devrait ressembler à ceci:

[html]{# welcome.twig #}
<div class= »welcome »>
<h3>{{message}}</h3>
</div>

[/html]