Découvrez la démarche d'éco-conception et de réalisation de notre site internet

Développement

Timber sur WordPress : une approche MVC/Twig ?

Publié le 2 juil. 2024 - 7 minutes de lecture

Timber sur WordPress permet une approche MVC en utilisant Twig pour séparer la logique et le rendu, améliorant ainsi la lisibilité et la gestion des templates.

De nombreux développeurs web évitent WordPress en raison de l'absence de langage de templating et d'architecture MVC. Timber, créé par Jared Novack, offre une solution en intégrant Twig, un moteur de templates, à WordPress pour séparer la logique (PHP) du rendu (HTML). Timber, compatible avec des outils comme ACF et Bedrock, simplifie le code et le rend plus lisible et maintenable. Lancé en 2013, Timber continue d'évoluer, facilitant le travail des développeurs avec une architecture MVC.

Jeremy Bouhour, Responsable Technique

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.

Illustration d'une personne qui utilise Timber.
Illustration d'une personne qui utilise Timber.

Ce qu'on peut reprocher à WordPress

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.

On réalise votre site web !

CONTACTEZ-NOUS
Illustration de deux personnes entrain d'assembler un site avec architecture MVC.
Illustration de deux personnes entrain d'assembler un site avec architecture MVC.

Timber, qu'est-ce que c'est ?

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.

Illustration de deux personnes qui partagent du code Timber.
Illustration de deux personnes qui partagent du code Timber.

Twig, qu'est-ce que c'est ?

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.

Illustration d'une personne gérant des templates Timber.
Illustration d'une personne gérant des templates Timber.

Pourquoi utiliser Timber et l'écriture Twig avec WordPress ?

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.

Comment mettre en place Timber dans WordPress ?

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 !

Comment fonctionne Wordpress ?

Pour importer une template sur WordPress, accédez à votre tableau de bord, allez dans "Apparence" puis "Thèmes", cliquez sur "Ajouter" et "Téléverser un thème". Choisissez le fichier ZIP de la template, puis cliquez sur "Installer maintenant" et "Activer" pour terminer.

Twig offre une syntaxe concise et claire, supporte l'héritage et assure la sécurité automatique des variables. Ces caractéristiques le rendent plus efficace et sécurisé que PHP en tant que moteur de gabarit.

WordPress utilise plusieurs frameworks populaires pour la création de thèmes, notamment Genesis. Genesis est largement reconnu pour ses fonctionnalités robustes et sa flexibilité. D'autres frameworks peuvent être considérés, mais Genesis reste une option privilégiée par de nombreux développeurs.

Je développe des sites et des business !

Photo de Maxime Lacheré

Sorti de la tête de

Maxime Lacheré

Dans la même thématique...

Pourquoi utiliser PrestaShop 8 pour votre site e-commerce ?

7 oct. 2024

Project IDX : le futur du développement web chez Google ?

23 sept. 2024

Blade et Laravel : mieux comprendre le moteur de template

20 août 2024