Construire une site #Wordpress avec Timber et #Twig

30 January 2017

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 :

$context = Timber::get_context();
$post = Timber::query_post();
$context['post'] = $post;
$context['comment_form'] = TimberHelper::get_comment_form();

if ( post_password_required( $post->ID ) ) {
    Timber::render( 'single-password.twig', $context );
} else {
    Timber::render( array( 'single-' . $post->ID . '.twig', 'single-' . $post->post_type . '.twig', 'single.twig' ), $context );
}

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 :

{% extends "base.twig" %}

{% block content %}
    <div class="content-wrapper">
        <article class="post-type-{{post.post_type}}" id="post-{{post.ID}}">
            <section class="article-content">
                <h1 class="article-h1">{{post.title}}</h1>
                <div class="article-body">
                    {{post.content}}
                </div>
            </section>
        </article>
    </div><!-- /content-wrapper -->
{% 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 !


Un header image en fullscreen

26 January 2017

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…

html, body, #page {
  height: 100%;
}

.full-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url([...]);
  background-size: cover;
  background-position: center;
}

Et le tour est joué !


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

21 January 2017

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 .gitignore, 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.

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 !


Du text-overflow: ellipsis et un élément à width: 100%.

25 November 2016

J’étais en train de bricoler une div avec une largeur à 100% et un texte-overflow ellipsis.

Cela ne fonctionne pas en l’état :

.ma_div {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
}

Pourquoi ? Je ne sais pas trop, mais avec quelques règles en plus on peut avoir le résultat que l’on attend, a savoir une div “fluide” et un texte avec “…” pour ce qui dépasse :

.ma_div {
  display: table;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  table-layout: fixed;
  text-overflow: ellipsis;
}

Menu responsive avec foundation

7 October 2016

Depuis la version 6 du framework SASS/CSS Foundation, le composant qui sert à créer le menu principal du site, à savoir la “top bar” n’est plus un menu responsif “out of the box”.

C’est à vous d’en construire un avec les composants, comme l’explique la documentation.

Voici une structure html qui devrait couvrir la majorité des besoins. N’ont pas que c’est bien compliqué à réaliser, mais j’en ai marre de la refaire encore et toujours.

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
    <div class="top-bar-left">
        <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-parent-link="true">
            <li>
                <a href="#">Lien</a>
                <ul class="menu vertical">
                    <li>
                        <a href="">Lien</a>
                        <ul class="menu vertical">
                            <li>
                                <a href="">Lien</a>
                            </li>
                            <li>
                                <a href="">Lien</a>
                            </li>
                            <li>
                                <a href="">Lien</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Lien</a>
                    </li>
                    <li>
                        <a href="">Lien</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
        </ul>
    </div>
</div>

Afficher la requête SQL de WP_Query

23 September 2016

Toujours pratique pour débugger :

<?php
$args = array(...);
$customPosts = new WP_Query($args);
echo "Last SQL-Query: {$customPosts->request}";

Sass-convert memo

12 September 2016

Petit mémo pour la commande sass-convert qui permet de convertir un fichier CSS existant en fichier .scss (ou .sass, il suffit d’adapter le paramètre –to)

Convertir tout un répertoire de fichier css

sass-convert --from css --to scss --trace -R .

Convertir un fichier

sass-convert --from css --to scss --trace perso.css > perso.scss

Utiliser Google Map pour suggérer des adresses

25 January 2015

Lorsqu’on nous demande “d’autocompleter” un champ adresse, il vient immédiatement la question: avec quelle base de donnée ?

Eh bien, avec celle de Google ?

Une petite astuce que j’ai découvert il y a peu, on peut utiliser l’API de Google map pour créer facilement une autocomplétion d’adresse.

Un peu de JavaScript qui va bien:

// Inclure l'API de Google map, il y a un paramètre de pour spécifier qu'on veut la librairie des places.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript">
  $(function () {
     var input = (document.getElementById('test'));
     var autocomplete = new google.maps.places.Autocomplete(input);
  });
</script>

Et le html qui va avec:

<input name="Test" type="text" value="" id="test"/>

Et voilà, pas besoin de se casser plus la tête.

Pour ceux qui veulent tester:

https://gist.github.com/phenix-factory/f4d82164f8aee13fb6ec#file-gmap_adresse_autocomplete-html