Timber sur WordPress : une approche MVC/Twig ?

De nombreux développeurs web sont parfois réticents à utiliser WordPress pour la création de site de leurs clients. Si la plateforme est très facile à prendre en main, un des problèmes souvent remontés est l'absence d'un réel langage de templating. Utiliser Timber sur WordPress est alors une solution intéressante pour écrire en Twig, et ne plus mélanger HTML et PHP.

Avant de parler de Timber, voyons un peu les failles de WordPress, qui ont incité un développeur web à créer Timber.

L'absence de langage de templating

Ce qu’on peut reprocher à WordPress, c'est par exemple l'absence de moteur de templates spécifique. En effet, ce système de gestion de contenu utilise majoritairement du langage PHP. Et si PHP a d'abord été conçu comme un langage de templates capable d'être combiné à du HTML, aujourd'hui, il s'apparente plutôt à un langage unique et à part, difficile à combiner.

Pour remédier à cette situation, certains développeurs utilisent Timber, un plugin qui permet de créer des templates plus facilement en combinant PHP et Twig. Cela permet de mieux structurer les thèmes WordPress en séparant la logique de la présentation.

Au fil de ses développements, PHP a pu supporter la programmation impérative, objet, et fonctionnelle, ne permettant plus, comme le propose un langage de templating, de dissocier la logique (fonctionnel) de la représentation (le rendu). Les professionnels du développement web peuvent trouver cette limitation problématique lorsqu'ils travaillent sur des projets de grande envergure nécessitant une séparation claire entre la logique d'application et la couche de présentation.

L'absence d'architecture MVC

Un autre exemple de reproche à WordPress, c'est l'absence de réelle architecture MVC (Modèle Vue Controller).

L'architecture MVC est une architecture de codage particulièrement appréciée des concepteurs de sites Internet ou d'application, car elle est entièrement dédiée aux interfaces graphiques, et notamment à tout ce qui peut se faire sur le web.

Concrètement, le code d'un site se découpe en 3 parties :

• Le modèle (Model), qui contient les données à afficher ;
• La vue (View), qui contient la présentation de l'interface graphique ;
• Le contrôleur (Controller), qui contient la logique concernant les actions effectuées par l'utilisateur.

Contrairement à d'autres frameworks ou CMS qui disposent d'une architecture MVC, comme PrestaShop avec Smarty, Symfony avec Twig, ou encore Laravel avec Blade, WordPress n'est pas conçu en MVC.

Précisons néanmoins qu'il est tout à fait possible de coder des plugins et des thèmes en MVC à l'intérieur de WordPress, mais dans l'ensemble, ce CMS a une conception propre à lui-même, et les débats font toujours rage à ce sujet.

D'ailleurs, malgré ce qu'on peut voir sur le web, et les avis qui divergent, on peut partir du principe que, dès qu'on trouve de la logique dans une vue, alors on n'est plus en MVC. Et c'est le cas avec WordPress.

Timber est un projet open source créé par un développeur nommé Jared Novack (Upstatement) et qui prend la forme d'un plugin ou d'une librairie. Son objectif est alors de proposer une solution astucieuse pour combiner le CMS de WordPress et l'approche MVC de Twig. Concrètement, Timber est donc le plugin qui permet d'avoir le moteur de template Twig dans WordPress.

Pour la petite histoire, en 2012, Jared Novack, qui faisait principalement du développement Javascript avec un langage de templating JS appelé Handlebars, part à la découverte de Wordpress. Il se rend alors à la conférence "WordCamp Providence", un rassemblement majeur de la communauté Wordpress, afin de voir ce qui se faisait et d'être à l'affût des évolutions en cours.

Là-bas, il aime ce qu'il voit et entend, mais la propreté du code de templating de son Handlebars lui manque. Il espère à ce moment-là que quelqu'un proposera une évolution en ce sens, avant qu'il ne réalise qu'il pouvait être cette personne. Il se lance donc corps et âme dans cette aventure. Il teste d'abord différents moteurs de templates comme Smarty, puis Mustache, avant de finalement découvrir le langage de templates appelé Twig. Son choix se portera sur ce dernier pour la conception de Timber.

Les premières versions de Timber sortent en 2013, et la version 1.0.0 stable voit le jour en 2016. Le plugin Timber permet donc la séparation de la logique et du rendu avec la mise en place d'une architecture MVC, et d'afficher son rendu via le langage Twig dans Wordpress. Et ça, c'est fou pour tous les développeurs !

Bon à savoir : Timber s'allie parfaitement avec ACF (Advanced Custom Fields), un plugin majeur dans l'écosystème Wordpress, permettant la création de champs personnalisés. Il fonctionne aussi très bien avec Bedrock, un projet open source qui permet une structure de fichiers améliorée pour Wordpress.

Twig est un moteur de templates intégré, par défaut, au framework Symfony. Développé en PHP, ce moteur de gabarit permet de nombreuses choses, avec pour objectif premier de séparer la vue de la représentation du site (HTML et PHP). Autrement dit, il permet de travailler séparément sur les fonctionnalités d'un site et sur son design.

Twig offre alors une écriture concise et claire, et supporte de nombreuses fonctionnalités, telles que la notion d'héritage. En plus de cela, il sécurise par défaut les variables, et dispose également d'extensions comprenant de nombreux filtres et autres fonctions et macros.

Pour les professionnels du développement web, Twig représente une solution puissante et flexible, qui permet de simplifier la gestion des templates tout en assurant une sécurité accrue. Grâce à Twig, les développeurs peuvent améliorer la qualité de leur code en dissociant clairement la logique de la présentation, ce qui est souvent reproché à d'autres systèmes de gestion de contenu comme WordPress qui n'intègrent pas de moteur de templates spécifique.

Avec Twig, vous pouvez utiliser des fichiers .twig pour gérer vos templates, ce qui permet de maintenir une structure de code propre et organisée. Par exemple, vous pouvez facilement intégrer des éléments comme des titres ({{ title }}) et des images ({{ post.image.src }}) directement dans vos templates sans mélanger la logique PHP et HTML. Cette séparation est particulièrement utile pour des tâches telles que la gestion des posts ({{ post.title }}) et la création de thèmes personnalisés.

Les fonctionnalités de WordPress sont, avouons-le, très performantes. On peut alors se demander quelle est l'utilité d'utiliser Timber avec ce puissant CMS. Chez Lemon Interactive, nous recensons 3 avantages à l'utilisation de Timber :

• L'écriture Twig est plus lisible et plus légère que le PHP ;
• Le template (HTML) et le code PHP (algorithme) sont séparés ;
• L'écriture de certaines fonctions, comme la boucle, est simplifiée.

Pour résumer, Timber et Twig simplifient et allègent le code au sein de WordPress, et facilitent le travail des développeurs web. Et même si l'architecture du thème est un petit peu plus complexe, puisqu'on ajoute 2 dossiers, la mise à jour et le développement du code restent beaucoup plus simples à aborder.

Par ailleurs, même si ce n'est pas la pratique conseillée par Lemon Interactive, il n'est pas nécessaire de tout recoder quand on passe à Timber Twig. En effet, grâce à la compatibilité de Timber avec la version classique du système de thème de WordPress, il est possible de mélanger du PHP et du code Twig, et d'utiliser Twig sur tout ou partie du thème.

L'installation de Timber dans WordPress est plutôt simple, et ne nécessite pas forcément d'agir sur un WordPress vierge. Deux solutions sont alors possibles : installer Twig avec Composer, ou installer le plugin Timber Twig via WordPress.

Un lien va alors être établi entre les fichiers de thème classique de WordPress (PHP) et une vue Twig. Les fichiers Twig sont alors présents dans le dossier de thème, et si les fichiers de thème WordPress en PHP sont également toujours là, ils sont en revanche dépouillés de la totalité de leur code.

Si vous doutez de vos compétences pour l'installation du plugin Timber dans WordPress, n'hésitez pas à confier votre site web à une agence web spécialisée, telle que Lemon Interactive.

Timber est actuellement en version 1.21.1 avec un tout récent support PHP 8.0 & 8.1. Mais il est aussi toujours en développement à l'heure actuelle. L'équipe de développeurs de Lemon Interactive est d'ailleurs à l'affût de la sortie de cette V2, qui contiendra bon nombre d'améliorations ! Vous en avez marre de jongler entre le HTML et le PHP ? Timber ne pourra que vous plaire !