Allez plus loin avec WordPress

Découvrez les hooks

Nous voulons maintenant changer l’affichage de différents éléments dans notre page d’archive d’outils et dans les pages de détail des outils. Pour cela, nous allons utiliser les hooks. Derrière ce mot qui peut paraître barbare, se cache un concept fondamental pour modifier des templates déjà en place. Découvrons ensemble les hooks :

Maintenant que nous avons vu ce qu’étaient les hooks, nous allons les appliquer sur notre projet.

Changez le comportement d’un article avec les filters

D’abord, regardons ensemble comment modifier le titre dans la page d’un outil et dans la page de la liste d’outils grâce aux hooks filters :

Nous avons vu concrètement comment se passe le changement de contenu lié à un hook filter. Nous allons utiliser 3 autres filters pour customiser notre archive d’outils et les pages de détail des outils.

Personnalisez le titre d’un article et de la page d’archive

Sur la page d’archive et sur la page de détail d’un outil, on observe au-dessus du titre de page un lien qui pointe vers la catégorie “Outils”. On souhaite garder le lien, mais changer le texte par “Tous les outils”, pour faire comprendre que ce lien va vers la liste de tous les outils :

Pour réaliser ce changement, nous allons utiliser le hook filterthe_categoryqui s’occupe de l’affichage des catégories.

Avec ce hook, nous allons récupérer le HTML du lien généré sous forme de texte. Puis nous allons simplement faire un remplacement de texte et retourner le résultat.

Voici le code à rédiger dans  functions.php   :

function the_category_filter($categories)
{
    return str_replace("Outils", "Tous les outils", $categories);
}

add_filter('the_category', 'the_category_filter');

Explication du code : ici, la variable $categories  contient le HTML sur lequel on utilise la fonction str_replace()  pour changer le texte  “Outils” en “Tous les outils”.

Complétez la zone de contenu de la page de détail d’un outil

Quand on regarde le détail d’un outil, on observe l’image à la une, puis le contenu Gutenberg. On souhaiterait ajouter le titre “Description”  juste avant le contenu et précédé d’un séparateur, pour bien signifier que le contenu présente une description de l’outil.

Ici, nous allons utiliser le hook filter the_content  , qui permet de modifier le contenu d’une page rédigée en back office. On peut ainsi ajouter des éléments avant le contenu du HTML personnalisé.

Voici le code à ajouter dans functions.php  :

function the_content_filter($content)
{
   if (is_single() && in_category('outils')) {
      return '<hr><h2>Description</h2>' . $content;
   }
   return $content;
}

add_filter('the_content', 'the_content_filter');

Dans ce code, on :

• récupère la variable $content  , qui contient tout le HTML de contenu de la page (généré par Gutenberg, dans notre cas) ;

• utilise en condition :

  • is_single()  , qui vérifie si la page courante est une page d’article, 

  • et in_category(“outils”)  , qui vérifie si l’article courant a bien la catégorie “Outils”.

Si l’on respecte bien ces conditions, on retourne la chaîne <hr><h2>Description</h2>  concaténée à $content  .

Il ne faut pas oublier que dans le cas où l’on n’entre pas dans la condition, il faut quand même retourner $content  (à la ligne 6), sinon les pages n'afficheront plus le contenu !

Ajoutez un bouton pour accéder au détail d’un outil

Dans la page de la liste des outils, le moyen d’aller sur la page de détail d’un outil est de cliquer sur le titre de l’outil.

Ce n’est pas très ergonomique, car le fait de cliquer dessus n’est pas forcément évident. On voudrait alors ajouter un bouton à la suite de l’excerpt qui inciterait à cliquer dessus pour voir le détail.

Pour cela, on va utiliser le hook filter the_excerpt  , qui fonctionne comme the_content  , mais sur l’excerpt utilisé sur les pages d’archive. Dans ce cas, on ajoutera au HTML de l’excerpt un bouton lien qui renverra sur la page de détail de l’outil.

Voici le code à ajouter dans functions.php  :

function the_excerpt_filter($content)
{
   if (is_archive()) {
               return $content."<div class='more-excerpt'><a href='".get_the_permalink()."'>En savoir plus sur l'outil</a></div>";
   }
   return $content;
}

add_filter('the_excerpt', 'the_excerpt_filter');

Ce cas de figure est très proche de ce que l’on a fait avec the_content  , à la différence près de la conditionis_archive(). Elle s’assure que l’on soit bien sur une page d’archive et que l’on concatène notre ajout de HTML après la variable $content  .

On observe une petite nouveauté avec l’utilisation deget_the_permalink()utilisé en lien href  . Cette fonction permet de générer le lien WordPress de la page de détail de l’article courant dans lequel on affiche l’excerpt.

Dans la chaîne HTML que j’ai ajoutée ici, j’ai mis la classe more-excerpt  que l’on ajoute dans notre fichier theme.css  :

.more-excerpt{
   text-align: center;
}
.more-excerpt a{
   display: inline-block;
   padding: 10px 25px;
   color: #313332;
   background-color: #F4CA52;
   text-decoration: none;
   border-radius: 10px;
}

(Bonus) Formatez la date en français

Vous aurez remarqué que dans la page qui liste les outils, ainsi que dans les pages de détail, il est fréquent que la date d’écriture de l’article ne soit pas correctement formatée. Enfin, elle est très souvent écrite au format anglais ! On peut être tenté de se dire qu’il doit exister un filtre  pour modifier cette date à notre façon… Vous auriez une idée de comment faire ?

Du coup, pour modifier le format de notre date, pas besoin de hook filter. Il suffit de se rendre dans le back office, dans la section “Réglages/Général”, et de paramétrer le “Format de date” !

Découvrez la liste des filters dans la documentation WordPress

WordPress a une page dédiée aux filters dans sa documentation – je vous encourage à y jeter un œil. On y trouve plus d’une centaine de hooks filter disponibles dans WordPress, permettant de faire énormément de choses facilement et rapidement. La documentation a l’avantage de catégoriser ces filters pour trouver plus facilement ce qui pourrait répondre à votre besoin.

Complétez le comportement d’une liste d’articles avec les actions

Nous allons voir maintenant comment utiliser les actions dans notre site BricoTips. Nous allons avoir 2 objectifs :

• afficher une bannière avec image et titre à la fin de la liste des outils ;

• ajouter un paragraphe de présentation en haut de la liste des articles.

Découvrez la liste des actions dans la documentation WordPress

Vous trouverez dans la documentation une page dédiée aux actions sur le site WordPress. On y trouve plus d’une centaine de hooks action disponibles dans WordPress et permettant de faire, comme avec les filters, énormément de choses. On y retrouve aussi une catégorisation des hooks pour mieux s’y retrouver.

À vous de jouer !

Pour enrichir un peu notre page de liste d’outils, nous souhaitons faire évoluer légèrement la pagination en bas de page. Pour le moment, cette pagination nous affiche très simplement le numéro des pages sous forme de lien. On souhaite ajouter avant ces liens le texte “Pages :” pour aider à comprendre que ce sont des liens vers des pages.

Vous allez donc utiliser un hook filter pour arriver à vos fins. Pour cela, je vous invite grandement à faire des recherches dans la documentation pour en trouver un qui corresponde à votre besoin.

Consignes :

• Trouvez un hook filter dans la documentation en lien avec la pagination.

• Mettez en place ce hook pour pouvoir modifier l’affichage de la pagination.

• Ajoutez la chaîne de caractères “Pages :” avant les liens de numéro de page.

Corrigé

Vous avez trouvé ? Suivez-moi dans la correction ci-dessous !

En résumé

• Dans WordPress, les hooks permettent d’ajouter et/ou de modifier des éléments à un moment précis du cycle de chargement d’une page.

• Il y a 2 types de hooks : les filters et les actions. On les déclare dans le fichier functions.php  .

• Les filters permettent de modifier l’affichage d’un bout de HTML généré par WordPress.

• Les actions permettent d'exécuter un code personnalisé à un moment du cycle de chargement, sans pour autant devoir retourner une valeur qui sera affichée dans la page.

Bravo, cette deuxième partie du cours touche à sa fin ! Avant de passer à la partie 3, validez vos connaissances grâce au quiz. Puis on découvrira ensemble comment débugger des sites WordPress.