var Phenix = function () {

Troll du Web depuis 1996

Une commande #bash findrm pour ce faciliter la mémoire

La commande find est extrêmement pratique. Surtout quand on la met en musique avec la commande rm pour faire le ménage dans certain dossier.

Cependant, je trouve la syntaxe assez complexe, et j’en ai marre de faire une recherche Google à chaque fois. Du coup, hop, une petite fonction bash à mettre dans le fichier .bashrc :

  1. # Trouver et supprimer certains fichiers
  2. findrm () {
  3. find . -name "$1" -exec rm -vf {} \;
  4. }

Besoin de supprimer tout ces fichier .DS_Store qu’un vilain utilisateur de Mac à mis dans un dossier ? findrm ".DS_Store" !

J’ai activé le mode verbose (-v quoi) de la commande rm pour avoir un détail de ce qui se passe.
Attention quand même à bien faire un backup avant, car cette fonction ne va pas vous demander votre avis avant de supprimer les éléments !

Edit :

On me signale que c’est plus optimisé d’utiliser xarg ! Merci tofulm.

  1. # Trouver et supprimer certains fichiers
  2. findrm () {
  3. find . -name "$1" | xargs rm -vf
  4. }

Un moteur de recherche dans les catégories #Wordpress

Avoir un petit moteur de recherche pour les articles d’une catégorie Wordpress est en fait assez simple, pas besoin de ce lancer dans une chasse aux plugins.

Cela ne demande qu’un petit formulaire à mettre dans le template de catégorie.
Si vous n’avez pas envie de l’avoir dans toutes les catégories, vous pouvez simplement créer un template category-(slug ou ID).php.

  1. <form action="./" method="get">
  2. <input name="search" type="text" value="<?php echo $_GET['search']; ?>" placeholder="Recherche" />
  3. <input type="submit" value="Recherche"/>
  4. </form>

Et ensuite une petite WP_Query qui va faire tout le boulot :

  1. <?php
  2. $args = array(
  3. 's' => ($_GET['search']) ?: null, // Un opérateur Elvis, parce que c'est cool !
  4. 'cat' => $cat // L'ID de la catégory
  5. );
  6. $query = new WP_Query( $args );
  7.  
  8. while ( $query->have_posts() ) : $query->the_post();
  9. get_template_part( 'content', 'single' ); // A vous d'avoir un template pour afficher tout ça hein !
  10. endwhile;
  11. wp_reset_postdata();

Rien de sorcier donc, et surtout pas de faille de sécurité plugin usine à gaz d’installer pour faire ce formulaire.

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é !