var Phenix = function () {

Troll du Web depuis 1996

Construire une site #Wordpress avec Timber et #Twig

Twig est un système de templating PHP. Il permet de créer des squelettes de page qui seront ensuite transformés en page HTML.

Timber permet d’utiliser Twig avec Wordpress.

Je n’ai jamais apprécié, la façon dont sont créés le thème Wordpress, utiliser PHP comme système de templating est une idée très moyenne par rapport à la lisibilité qu’apport un système de template. Ne seraissent que parce que PHP encourage les développeurs de thème à faire « à leur sauce ».
Un système de template a tendance forcer une méthodologie et donc faciliter le travail entre plusieurs développeurs.
Il ne faudra pas rentrer dans la tête du développeur initial pour modifier le thème. Ou apprendre un des nombreux frameworks de templating Wordpress.

Il y a d’autre défaut au système de base de Wordpress, mais ce n’est pas l’objet de cet article.

Installer Timber et mettre en place les bases :

Copier le dossier wp-content/plugins/timber-library/timber-starter-theme dans le dossier thème de Wordpress.

Renommer le dossier pour qu’il colle avec votre thème et éditer style.css pour adapter les valeurs, cela correspond à notre nouveau thème.

Tout le sale boulot de ce système est fait, la majorité des fichiers templates Wordpress sont déjà remplit avec les codes twig qui vont bien :

On trouve par exemple ce code dans single.php :

  1. $context = Timber::get_context();
  2. $post = Timber::query_post();
  3. $context['post'] = $post;
  4. $context['comment_form'] = TimberHelper::get_comment_form();
  5.  
  6. if ( post_password_required( $post->ID ) ) {
  7.         Timber::render( 'single-password.twig', $context );
  8. } else {
  9.         Timber::render( array( 'single-' . $post->ID . '.twig', 'single-' . $post->post_type . '.twig', 'single.twig' ), $context );
  10. }

Il appelle par défaut le fichier single.twig, sauf s’il trouve un fichier spécifique single-ID_or_type.twig.

A partir de là, on travaillera principalement avec le sous-dossier templates qui contient les fichiers .twig.

Template :

Le template principal se nomme base.twig et contient le squelette principal du site. Ce squelette sera alors étendu par les autres squelettes. Par exemple dans page.twig :

  1. {% extends "base.twig" %}
  2.  
  3. {% block content %}
  4.         <div class="content-wrapper">
  5.                 <article class="post-type-{{post.post_type}}" id="post-{{post.ID}}">
  6.                         <section class="article-content">
  7.                                 <h1 class="article-h1">{{post.title}}</h1>
  8.                                 <div class="article-body">
  9.                                         {{post.content}}
  10.                                 </div>
  11.                         </section>
  12.                 </article>
  13.         </div><!-- /content-wrapper -->
  14. {% endblock %}

On étend base.twig en surchargeant le block content.

La documentation de timber et au besoin, documentation de Twig, contiennent tout ce qu’il faut savoir.
Plus vraiment d’excuse donc pour développer sans moteur de template !


Ajouter un nouveau type d’auteur à #SPIP

Dans le fichier config/mes_options.php :

  1. <?php
  2. $GLOBALS['liste_des_statuts']['inscrit'] = 'inscrit';
  3.  
  4. // Placer la corbeille à la fin du tableau
  5. $backup_corbeille = $GLOBALS['liste_des_statuts']['texte_statut_poubelle'];
  6. unset($GLOBALS['liste_des_statuts']['texte_statut_poubelle']);
  7. $GLOBALS['liste_des_statuts']['texte_statut_poubelle'] = $backup_corbeille;

La clé du tableau $GLOBALS[’liste_des_statuts’] sert également de chaîne de langue pour traduire le statut.
La valeur sera quand à elle enregistrée dans la base de donnée comme statut d’auteur.

Il y a aussi la constante AUTEURS_MIN_REDAC qui détermine si le statut fait partie des des visiteurs ou non.

  1. <?php
  2. define('AUTEURS_MIN_REDAC', "0minirezo,1comite,5poubelle");

Un header image en fullscreen

Je déteste cette mode : une grande image qui prend tout l’écran. Si vous avez de la chance, vous avez un titre et un menu. Basta.

Mais ce n’est pas le propos. Il se trouve qu’il y a des gens qui souhaite avoir cela, et comme ils payent pour...

Voici une technique assez simple. Il faut garder une chose à l’esprit quand on fait cela : tous les containers parent doivent avoir height : 100% ;.
Rien de folichons ici, mais comme j’oublie régulièrement comment faire...

  1. html, body, #page {
  2.   height: 100%;
  3. }
  4.  
  5. .full-image {
  6.   position: relative;
  7.   width: 100%;
  8.   height: 100%;
  9.   background-image: url([...]);
  10.   background-size: cover;
  11.   background-position: center;
  12. }

Et le tour est joué !


Pourquoi le WYSIWYG est si compliqué ?

Une petite vidéo qui a été envoyée sur la liste de SPIP. Un bon résumé de pourquoi tout le monde peste contre les éditeurs WYSIWYG. Que ce soit les développeurs ou les éditeurs de contenu.

Du coup, je la garde ici car j’aurai envie de la revoir ou de la partagée.

La vidéo explique en détail le bordel que c’est à gérer, et surtout pourquoi cela ne fonctionnera sans doute jamais correctement :

Merci à Ybbet pour la découverte :)


Supprimer complètement un fichier d’un dépôt git

Cela arrive de temps en temps, sur une application qu’on connait mal ou qu’on a pas conçue : on fait un dépôt git, le git ignore, et on oublie un fichier de configuration avec des password dedans.

Et bien sur, manque de pot, vous avez déjà tout envoyer dans un dépôt public Github. Vraiment, c’est pas votre journée...

Bref, il existe une petite astuce pour supprimer un fichier de tout les commits du dépôt. C’est un peu lent, car il va réécrire chaque commit que vous avez fait sur le projet.

  1. git filter-branch --tree-filter 'rm filename' HEAD

Après il faut utiliser git push -f pour réécrire le dépôt en ligne. Généralement, on évite cette opération, mais dans le cas d’un fichier avec des codes d’accès, c’est un moindre mal.
Et bien entendu, cela ne vous dispense pas de changer le password en question !

Voir en ligne : Permanently remove files and folders from Git repo