Le module Divi "Navigation dans les posts"

Le module Navigation dans les posts (Post Navigation) ajoute des liens vers le contenu précédent et suivant, pour que le lecteur enchaîne les articles ou les projets. Il se place surtout dans le modèle d’article du Theme Builder, afin d’apparaître sur tous vos articles. Une option limite la navigation à la catégorie de l’article en cours, utile si votre blog couvre des sujets éloignés.

Nom anglais : Post Navigation.

Le module Divi « Navigation dans les posts » permet de créer des liens de navigation « Précédent » et « Suivant » dans un article, une page, ou un projet, en se basant sur l’ordre des dates de publications.

Par défaut, les liens affichent le titre des articles précédent et suivant, avec une flèche. Il est possible de changer ce titre pour y écrire ce que vous voulez.

Voici une vidéo qui montre 3 exemples d’utilisation de ce module, avec articles, pages et projets, et explique ensuite les paramètres offerts par le module.

Le module Divi 4 « Navigation dans les posts » permet de créer des liens vers les posts suivant et précédent du post actuellement affiché. C'est quelque chose qui s'inclut dans un article existant, une page ou un projet, et qui va permettre de naviguer. Il se base sur les dates de publication. Si j'ai publié dans l'ordre un article « Comprendre la grille de mise en page des sites web », puis un article « Divi : navigation dans les posts », puis « Mise à jour de la formation Découvrir Divi », alors lorsque je suis sur celui du milieu, il va me proposer d'aller dans le précédent et dans le suivant qui ont été publiés.

Je vais vous montrer trois exemples d'utilisation de ce module avec des articles, des pages et des projets. Ensuite on analysera ensemble les paramètres offerts par ce module. Premier exemple, utilisé en bas d'un article de votre site. Si je me rends dans la liste des articles du site, que je trie par date, on voit qu'il y en a un qui s'appelle « Mise à jour de la formation Découvrir Divi », ensuite « Divi : navigation dans les posts », ensuite « Comprendre la grille de mise en page des sites web », etc. Donc ça, c'est l'ordre de publication de mes articles.

Lorsque je suis dans celui-là, « Divi : navigation dans les posts », ça va me proposer d'aller vers « Mise à jour de la formation » et « Comprendre la grille de mise en page ». Là, je suis ici sur « Comprendre la grille de mise en page ». Les suivants sont « Mise à jour de la formation » ensuite, et retenez bien l'ordre pour comparer, on a « Divi : navigation dans les posts », « Comprendre la grille » et « Créer un diaporama d'images ».

Donc ici on est dans l'article « Divi : navigation dans les posts », il propose le lien au suivant et au précédent. Et si je vais dans « Comprendre la grille de mise en page », le suivant et le précédent proposés sont « Créer un diaporama » et « Divi : navigation dans les posts ». C'est bien l'ordre qu'on retrouve ici.

Deuxième exemple, dans les pages. Ici j'ai des pages que j'ai affichées par dates, de la plus ancienne à la plus récente : « Coaching WordPress » et « Images size » sont les plus récentes publiées. Si je me rends donc sur « Coaching WordPress », ici ce module « Navigation dans les posts » me propose d'aller dans « Images size » et dans la page plus ancienne publiée, avec précédent et suivant.

Troisième exemple, avec les projets de Divi. C'est quelque chose que j'ai renommé en « Programmation référence » dans cet exemple, mais ce sont les projets de Divi. Ici on va prendre « Comme public », qui est précédé de « Comme interne » et suivi de « Villas de luxe ». Quand je me rends dans « Comme public », à l'endroit où j'ai décidé de mettre ce module, on voit qu'on nous propose précédent et suivant, « Comme interne » et « Villas de luxe ».

Donc, simplement, ça permet de rajouter une navigation suivant et précédent. En quoi c'est utile ? Parce que si on veut réduire le taux de rebond sur notre site, c'est-à-dire le nombre de personnes qui viennent voir une page et qui s'en vont, une fois qu'ils ont vu notre contenu il faut leur proposer autre chose. C'est pour ça que vous voyez souvent des articles relatifs quand vous naviguez sur les sites web. On va sur un article, on le lit, et puis une fois qu'on a fini de le lire, si on ne propose pas d'autre navigation, le visiteur va s'en aller.

Il y a différents types de contenus supplémentaires qu'on peut proposer. Par exemple, ici on a les articles les plus lus, plus bas on va avoir des articles relatifs, ce qui peut être par exemple des articles dans la même catégorie. Et cette navigation dans les posts consiste à ajouter simplement des liens suivant et précédent.

Voyons maintenant l'implémentation et les paramètres de ce module. Lorsque j'ajoute un nouveau module « Navigation dans les posts », on voit qu'immédiatement il me met « Précédent » et « Suivant » avec une petite flèche et le titre de l'article. Il me propose des champs qui s'appellent « Lien précédent » et « Lien suivant ». Lorsque je clique sur l'aide, on me dit que ça définit le texte personnalisé.

Si j'écris par exemple « tata » dans le lien précédent et « toto » dans le lien suivant, vous allez me dire que ça ne sert pas à grand-chose. Mais vous pouvez utiliser la variable %title pour inclure le titre du post. Ça va nous permettre de faire ceci : « Précédent » suivi de %title, et là ça nous met « Précédent » avec le titre.

On pourrait mettre « Lire l'article précédent », mais voyez bien : avec l'apostrophe, ça ne marche pas. Donc ça, c'est un cas typique de bug de Divi, parce qu'on devrait pouvoir utiliser une apostrophe ici. Lorsque quelque chose comme ça vous arrive, il faut leur signaler le bug pour voir s'ils peuvent le corriger à l'avenir. À chaque fois que vous rencontrez un bug, vous vous rendez dans votre compte Elegant Themes, là où vous avez acheté Divi, vous cliquez sur « Support », « Nous contacter », et vous leur faites part du bug.

Maintenant, je vous ai montré ça pour l'exemple, mais on voit qu'il n'y a pas grand intérêt à écrire plus, parce que ça va prendre beaucoup trop de place. On est bien avec le titre tout court, c'est-à-dire que par défaut on l'avait déjà. Enfin bref, vous pouvez écrire tout ce que vous voulez ici, mais c'est pour renommer les liens.

Ensuite, la deuxième chose importante : « Naviguer dans la catégorie actuelle ». Lorsqu'on clique sur l'aide, il nous explique que les liens suivant et précédent qui vont s'afficher ici vont être dans le même terme de taxonomie que le post actuel. C'est-à-dire que si cet article est dans la catégorie Santé et que je coche cela, ça va me mettre les articles suivant et précédent seulement de la catégorie Santé, toujours en utilisant les dates. Au lieu de prendre simplement le suivant et le précédent, ça va restreindre la sélection à la catégorie actuelle.

Ensuite, il nous propose un nom de taxonomie personnalisé, à laisser vierge. Si vous utilisez ce module sur un projet ou un post, ça, c'est vraiment si vous programmez dans WordPress ou que vous utilisez des CPT, des custom post types. Donc ça, c'est si vous avez programmé les choses en plus des posts et des projets, ou si vous avez programmé vos propres catégories : vous mettez son code, son slug informatique, ici. Pour la plupart d'entre vous, vous pouvez le passer.

Ensuite on a « Masquer le lien vers le post précédent ». En fait, c'est une erreur de traduction de Divi : ici c'est « Afficher le lien vers le post précédent ». Donc ici il faut que je décoche « Naviguer dans la catégorie actuelle » pour me retrouver avec mon suivant et précédent normal. Si je coche « Masquer le lien vers le post précédent », hop, vous voyez qu'il a disparu. Si je décoche les deux, le module ne sert plus à rien, parce que plus rien ne s'affiche. Donc ça, c'est simplement si vous voulez choisir d'afficher seulement l'article suivant ou seulement l'article précédent.

Ensuite on a des options classiques de Divi, comme la couleur de fond, puis « Mise en page » et « Admin » comme d'habitude. Dans les styles, on va pouvoir styler les liens de texte : changer la police, le mettre en gras, le mettre en italique, changer la couleur des liens, changer la taille du texte, l'espacement, la hauteur de ligne, etc., comme d'habitude. Ensuite on a le dimensionnement : si vous mettez la largeur petite, on n'aura plus assez de place, c'est comme tous les modules Divi.

Ensuite on a l'espacement, qui va être utile si on veut faire une petite bordure par exemple. Si ici je dis bordure de 1 pixel, que je veux une bordure un peu plus claire, vous voyez que les textes sont collés aux bordures. Donc on va se retrouver dans l'espacement, et ici on va lui dire marge interne 5 en haut et en bas, et 5 à gauche et à droite par exemple, voire 12, pour que ce soit plus joli.

Et voilà. Donc ça, c'est l'espacement ; pour la bordure, on l'a vu, et c'est terminé. Ensuite on a les ombres si vous voulez, et puis le reste, c'est comme les modules Divi habituels. Dans « Avancé », on n'a rien de spécifique, c'est comme tous les autres modules Divi. Voilà, c'est tout pour ce module Divi 4 « Navigation dans les posts ».