Twig, WordPress, Timber – Timber, une manière astucieuse d’utiliser Twig dans WordPress

by Posted on


Voilà une démarche qui tâche de réconcilier deux approches diamétralement opposées : à savoir l’approche MVC propre à Twig et le CMS WordPress. En substance, cela se présente sous la forme d’un plugin nommé Timber et développé par Jared Novack. L’objectif affiché du plugin est d’avoir à disposition au sein de WP, le célèbre moteur de template Twig, bien connu des adeptes de Symfony.

Les tutoriaux vidéos sont limpides, cela présente progressivement toutes les potentialité de Twig, une fois le plugin installé, de l’utilisation des “Advanced Custom Fields” aux fameux “Custom Post Type”.

Pour mener ce test à bien, l’installation à été faite sur le WP version Version 3.8.1 en anglais ainsi que deux plugins additionnelles

Plugins utilisés sur le WP version Version 3.8.1 en anglais

  • Catch IDs 1.1
  • Advanced Custom Fields 4.3.4

La promesse de Timber

Helps you create themes faster with sustainable code. With Timber, you write HTML using Mustache-like Templates

Pour en finir avec les boucles (loop)

Une des promesses évidentes, c’est de simplifier à l’extrême le code afin d’avoir une parfaite dichotomie entre le code et l’affichage, les IHM en gros les vues.

Nous allons modifier un des thèmes livrés par défaut avec WP, l’inusable twentytwelve dont nous allons modifier le code.
Une fois installé le plugin, la première chose à faire est de créer un répertoire views dans le répertoire du thème en l’occurrence : /wp-content/themes/twentytwelve/.

Ce plugin présente des avantages pédagogiques en effet, il est une bonne introduction à Twig ou même à Mustache pour ceux d’entre vous qui connaissent WP mais manque de pratique dans la maitrise des moteurs de templates.

Les premières vidéos vous montrent de manière très didactique comment se débrouiller avec Twig dans WP.

Modification apporté à index.php

 
          /* Insert tpl_timber_welcome.twig*/
          $content_twig = array();
          // $content_twig ['manchette'] = 'C\'est le chapeau d\'introcution à mon blog en français';
          // insert the id of the page in the get_post function
          $content_twig ['manchette'] = Timber::get_post();
          // Timber::render('tpl_timber_welcome.twig');
          Timber::render('tpl_timber_welcome.twig', $content_twig);

Le fichier tpl_timber_welcome.twig qui est appelé dans index.php pour afficher notre Advanced Custom Fields

      <!-- tpl_timber_welcome.twig -->
      <header class="entry-header">
        <h1 class="entry-title">Message written in tpl_timber_welcome.twig</h1><br>
        <b>{{manchette.post_title}}</b> <em>{{manchette.post_date}}</em>
        <blockquote>
            {{manchette.post_content}}
        </blockquote>
        <br/>
        <p>
        Suivez-moi sur Twitter  <a href="https://twitter.com/{{manchette.mon_compte_twitter}}" target-"_blank">({{manchette.mon_compte_twitter}})</a>
        </p>
      </header>

La commande pour afficher dans une vue notre custom post type crée avec le plugin Advanced Custom Fields 4.3.4 dans un groupe nommé Manchette Message Groupe
{{manchette.print_r}}

Gérer les post_type avec Twig dans WP

On va profiter d’un avantage indeniable de WP à savoir les post_type pour se faire, on à utiliser un plugin maison pour gérer des citations nommé bf_quotes_manager.

Les 5 citations que nous allons utiliser.

  1. « La politique est une guerre sans effusion de sang et la guerre une politique sanglante. » de Mao Tsé-Toung
  2. « La bonté est un amour gratuit. » de Henri Lacordaire
  3. « L’homme commence par être un tube digestif, ensuite un sexe, parfois un cerveau. » de José Artur
  4. « Si par nature, l’homme est une bête de sexe, j’ai toujours eu des animaux de compagnie. » de Mae West
  5. « Tous les gens sont pareils : crevant de peur à la pensée de la mort et obsédés par le sexe. » de Claude Mauriac

Les citations saisies dans l’interface du plugin
Twig, WordPress, Timber - Timber, une manière astucieuse d'utiliser Twig dans WordPress

Le rendu dans la vue archive-bf_quotes_manager.php à l’aide de timber-archives-quotes.twiget de tpl_timber-bf_quotes_manager.twig
Twig, WordPress, Timber - Timber, une manière astucieuse d'utiliser Twig dans WordPress

L’interface de debug offerte par Debug Bar combiné à la Timber Debug Bar, deux plugins indispensables et complémentaires
Twig, WordPress, Timber - Timber, une manière astucieuse d'utiliser Twig dans WordPress

Une vue de Timber Debug Bar
Twig, WordPress, Timber - Timber, une manière astucieuse d'utiliser Twig dans WordPress

Les extraits du code pour faire touner Twig avec notre post_type de citation bf_quotes_manager

archive-bf_quotes_manager.php

 
           $context = array(); 
           $args = array(
                   'post_type' => 'bf_quotes_manager'
               );
           $context['posts'] = Timber::get_posts($args);
           Timber::render('timber-archives-quotes.twig', $context);

timber-archives-quotes.twig

     <!-- timber-archives-quotes.twig -->
     {% for post in posts %}
         {% include "tpl_timber-bf_quotes_manager.twig" %}
     {% endfor %}

tpl_timber-bf_quotes_manager.twig

   <!-- tpl_timber-bf_quotes_manager.twig -->
   <article id="post-{{post.ID}}" class="post-{{post.ID}} page type-page status-publish hentry">
   		<header class="entry-header">
   												<h1 class="entry-title">{{post.title}}</h1>
   		</header>
   		<div class="entry-content">
 
   			{{post.get_field('bf_quotes_manager_main_text')}}
   			<br>
   			<b>{{post.get_field('bf_quotes_manager_main_author')}}</b>
 
   		</div><!-- .entry-content -->
   	</article>

Pour mémoire, pour avoir des temlplates qui rapatrient vos post_type, il suffit de créer deux nouveaux fichiers dans notre thème nommés de la manière suivante : single-{post_type}.php qui va prendre soin du chargement du post-type à l’unité et archive-{post_type}.php qui va prendre soin des archives, en gros de toutes les publication.

Conclusion : On peut considérer que Timber/Twig offre des avantages indéniables pour une personne ayant des notions plus abouties de programmation. C’est pour ceux qui ignorent encore Twig, c’est l’occasion de se familiariser à Twig utilisé notamment dans la framework symfony. En clair, il peut y avoir de gros avantage à combiner un développement WP classique et les avantages offerts par le moteur de template Twig.

En savoir plus

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts