Timber Twig : utiliser Twig pour développer un thème WordPress

Aujourd’hui, petite revue de Timber Twig, un plugin WordPress permettant l’utilisation du moteur de templates PHP Twig pour le développement de thèmes.

Twig

Twig est un moteur de template PHP. Un moteur de template permet de séparer la vue (le HTML) de la « mécanique » du site (le PHP). Il permet de travailler de manière plus claire, et séparément, le design d’un site et ses fonctionnalités.

Twig va nous permettre d’appeler des données du site et les afficher dans notre design en utilisant une syntaxe simplifiée. On évitera donc d’insérer du code PHP (fonctionnalités) dans un fichier HTML (affichage).

Pour aller plus loin sur la syntaxe simplifiée de Twig, voir cet article d’Openclassrooms.com

Comment ça marche ?

On installe le plugin Timber Twig. Il va relier nos classiques fichiers de thème WordPress PHP (single.php, index.php, page.php…) à une vue Twig. Les fichiers de vues Twig seront eux aussi dans notre dossier de thème et pourront être découpés en différentes parties pour simplifier la mise à jour.

Nos fichiers de thème WordPress en PHP sont donc toujours présents, mais ils sont dépouillés de leur code. Ils appellent désormais une vue Twig contenant le code HTML de la page et utilisant la syntaxe simplifiée pour afficher les données. Ils pourront également passer différentes variables à la vue Twig.

Ce sont donc maintenant les fichiers Twig que l’on viendra modifier pour faire des modifications de notre thème.

Par exemple, le code WordPress classique :

<img src=« <?php echo $url; ?> » alt=« Thumbnail for <?php echo $post->post_title; ?> » />

devient :

<img src=« {{post.thumbnail.src}} » alt=« Thumbnail for Timber » />

L’architecture du thème est très légèrement compliquée (ajout de deux dossiers) mais le développement et la mise à jour du code sont vraiment simplifiés.

En plus, si on décide d’utiliser Timber Twig, on n’est pas obligé de recoder entièrement notre thème (bien que ce serait la meilleure pratique). En effet, comme Timber est compatible avec le système « classique » de thème WordPress, on peux mélanger du code Twig et du PHP et utiliser Twig sur seulement une partie ou tout notre thème.

Enfin, Timber Twig est compatible et fonctionne très bien avec les plugins Advanced Custom Fields et Custom Post Type UI. Gros avantage vu à quel point ces deux plugins sont utiles et utilisés dans le développement de sites avec WordPress.

Conclusion

J’ai découvert Timber Twig récemment. De la même manière que l’on peux faire du code CSS sans utiliser de pré-processeur comme SASS ou LESS, il est beaucoup plus pratique de travailler avec Twig qu’avec le système de thème WordPress PHP standard seul.

Jumelé avec l’utilisation d’un pré-processeur CSS, on a une structure de travail vraiment propre de développement du code de notre thème, ce que ne permet pas WordPress par défaut. On a une séparation plus claire du design et des fonctionnalités, permettant notamment un travail plus efficace en équipe entre intégrateurs web et développeurs.