Comment ajouter des filtres sur Divi : Guide complet pour améliorer la navigation sur votre site WordPress

Divi affiche une grille d’articles avec son module Blog, sans possibilité de les filtrer par catégorie. Deux façons de l’obtenir : un peu de code, ou une extension. La première est détaillée d’abord parce qu’elle ne dépend de rien.

Méthode 1 : sans extension, en CSS et JavaScript

Préparer le module Blog

Ajoutez un module Blog sur la page, en style Plein écran, et réglez les colonnes et les marges. Vérifiez surtout que vos articles sont correctement catégorisés : Divi ajoute automatiquement à chaque article une classe de la forme category-slug, et c’est sur elle que reposera tout le filtrage.

Ajouter le CSS

Dans les paramètres du module Blog, onglet Avancé, champ CSS personnalisé.

.et_pb_post {
  display: block;
}
.et_pb_post.hidden {
  display: none;
}
.et_pb_ajax_pagination_container {
  display: flex;
  flex-wrap: wrap;
}
.filter-button {
  background-color: #4d486c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s, transform 0.3s;
}
.filter-button:hover,
.filter-button:focus-visible {
  transform: translateY(-2px);
}
.et_pb_posts .et_pb_post {
  position: relative;
  width: 31%;
  padding: 20px;
  margin: 1%;
  box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 30%);
}
.et_pb_posts .et_pb_post .entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 50px;
  font-size: 26px;
}
@media (max-width: 981px) {
  .et_pb_posts .et_pb_post {
    width: 100%;
    margin: 3% 0px;
  }
}

La classe hidden est ce qui masque les articles hors filtre. Le reste met en forme les boutons et la grille.

Ajouter les boutons

Dans un module Code de Divi, au-dessus du module Blog.

<div class="filter-bar">
  <button class="filter-button" data-filter="all">Tous</button>
  <button class="filter-button" data-filter="category-web">Web</button>
  <button class="filter-button" data-filter="category-creation-site">Création site</button>
</div>

Les boutons se créent à la main, un par catégorie à proposer. La valeur de data-filter doit correspondre exactement à la classe posée par Divi, soit category- suivi du slug de la catégorie, visible dans Articles puis Catégories.

Ajouter le JavaScript

Dans un second module Code, après le module Blog.

<script>
jQuery(document).ready(function ($) {
  $(document).on('click', '.filter-button', function () {
    var filtre = $(this).data('filter');
    $('.et_pb_post').each(function () {
      var correspond = filtre === 'all' || $(this).hasClass(filtre);
      $(this).toggleClass('hidden', !correspond);
    });
  });
});
</script>

Deux différences avec la version qu’on trouve partout. L’écouteur est posé sur le document plutôt que sur les boutons : le module Blog de Divi recharge sa grille en AJAX à la pagination, et un écouteur attaché directement aux éléments cesse alors de fonctionner. Et le basculement de classe passe par toggleClass, plus court et moins sujet aux oublis.

Tester

Vérifiez le filtrage sur chaque bouton, puis passez à la page suivante de la pagination et refiltrez : c’est là que les implémentations approximatives cassent. Contrôlez enfin le rendu sur mobile, la grille passant à une colonne sous 981 pixels.

Méthode 2 : avec l’extension Divi Pixel

Le module Pixel Filterable Grid de Divi Pixel fournit la même fonction sans code : ajout du module, choix des catégories à afficher, réglage du style des filtres depuis l’interface de Divi.

L’arbitrage est classique. L’extension fait gagner du temps immédiatement, et ajoute une dépendance payante supplémentaire à maintenir, avec le risque qu’elle cesse d’être compatible à une montée de version. Le code de la première méthode ne dépend que de Divi et de jQuery, déjà présents.

Ce qu’il faut savoir avant de se lancer

Ce filtrage agit côté navigateur : il masque des articles déjà chargés, il ne va pas en chercher d’autres. Sur une grille de quelques dizaines d’articles, c’est sans conséquence. Au-delà, il faut passer par une requête AJAX vers le serveur, ce qui sort du cadre de cette méthode.

Pensez aussi à l’accessibilité : des boutons filtrants devraient signaler leur état actif, au minimum par une classe visuelle et un attribut aria-pressed. C’est le genre de détail que nous traitons systématiquement sur les projets de création et refonte de site WordPress.

Enfin, si votre site est destiné à quitter Divi, ce code partira avec le thème : il vit dans les modules de la page, pas dans un fichier. La question se pose surtout sur un site que vous prévoyez de refondre à moyen terme.