Un accordéon est un élément de mise en page à bascule qui cache et révèle le contenu lorsqu'on clique dessus. Vous voyez un titre, vous cliquez dessus et le reste du contenu glisse vers le bas. Cliquez à nouveau, et le contenu se cache. C'est comme un menu déroulant, mais pour le contenu et non pour les menus.
Que se passe-t-il si vous implémentez correctement les accordéons ? Votre contenu devient plus facile à explorer, les utilisateurs restent concentrés, la navigation mobile s'améliore et les moteurs de recherche peuvent vous récompenser par une meilleure visibilité. Si vous faites tout correctement, les accordéons fonctionneront comme une table des matières qui répond aux questions avant même que les utilisateurs ne les posent.
Ce guide vous montrera comment mettre en place des accordéons dans WordPress à l'aide d'outils conviviaux qui rendent le processus simple et propre, sans qu'il soit nécessaire de coder.
Ajouter des accordéons dans WordPress
Il existe plusieurs façons d'ajouter des accordéons dans WordPress, mais toutes ne sont pas faciles à utiliser dans l'éditeur de blocs. Dans les sections suivantes, nous commencerons par une méthode de base utilisant un bloc intégré, puis nous passerons à une option plus flexible avec un plugin.
Méthode 1 : Utilisation du bloc de détails natifs
La manière la plus simple de créer un accordéon dans WordPress est d'utiliser la fonction intégrée Bloc de détails. Voyons comment cela fonctionne.
Étape 1 : Ajouter le bloc de détails
Ouvrez votre message ou votre page dans l'Éditeur de blocs. Cliquez sur l'icône plus (+), recherchez Détails et insérez le bloc.
Étape 2 : Ajouter le titre et le contenu
Saisissez le titre de votre accordéon dans l'espace réservé au "Résumé". Cliquez ensuite sur l'icône en forme de flèche située à côté pour développer la section. Une fois développée, une zone de contenu apparaît en dessous, où vous pouvez ajouter du texte, des images, des listes ou d'autres blocs.
Étape 3 : Ajouter des bascules supplémentaires
Pour ajouter d'autres éléments en accordéon, répétez le même processus en insérant de nouveaux blocs Détails. Pour une mise en page imbriquée, développez la zone de contenu d'un bloc Détails existant, cliquez sur l'icône plus (+) à l'intérieur de celui-ci et ajoutez un autre bloc Détails.
Cette méthode est parfaite pour les FAQ rapides ou les configurations minimales. N'oubliez pas qu'elle n'offre qu'un style de base et ne comprend pas d'options de conception avancées.
Méthode 2 : Utilisation du plugin Ultimate Blocks
Si vous souhaitez disposer de plus d'options de style et d'un meilleur contrôle sur votre accordéon, la fonction Blocs ultimes est un excellent choix. Il propose un bloc Content Toggle qui fonctionne parfaitement dans l'éditeur de blocs.
Étape 1 : Ajouter le plugin à votre site
Depuis votre tableau de bord WordPress, allez dans le menu Plugins et cliquez sur Ajouter un nouveau. Dans la barre de recherche, tapez Ultimate Blocks, puis cliquez sur Installer maintenant sur la fiche du plugin. Une fois l'installation terminée, activez le plugin pour que les nouveaux blocs soient disponibles dans l'éditeur.
Étape 2 : Insérer le bloc de basculement du contenu
Ouvrez la page ou l'article dans lequel vous souhaitez insérer l'accordéon. Cliquez sur l'icône plus (+), recherchez Content Toggle et ajoutez-le. Ce bloc crée une section extensible avec un titre et une zone de contenu.
Étape 3 : Ajouter le titre et le contenu
Saisissez le titre de votre accordéon dans le champ de l'étiquette, puis ajoutez votre contenu en dessous. Vous pouvez inclure n'importe quel type de bloc à l'intérieur de la bascule, comme du texte, des images, des boutons, des listes ou même un autre bloc Bascule de contenu à l'intérieur de la zone de contenu pour créer un accordéon imbriqué.
Pour ajouter d'autres sections à bascule, il suffit de cliquer sur l'icône (+) lorsque vous survolez les panneaux existants. Pour supprimer un panneau, procédez de la même manière, sauf qu'au lieu de cliquer sur l'icône (+), vous choisissez l'icône (x) dans le coin supérieur droit.
Étape 4 : Personnaliser l'accordéon
À partir du panneau de configuration du bloc situé à droite, vous pouvez contrôler le titre du panneau, ajuster l'état de la bascule, activer le schéma FAQ, ajouter une option de recherche intégrée pour votre accordéon, choisir une icône d'état, modifier les couleurs du texte ou de l'arrière-plan, et bien d'autres choses encore.
Si vous l'utilisez pour les FAQ, vous pouvez également activer le balisage FAQ Schema dans les paramètres pour aider votre contenu à se qualifier pour les rich snippets dans la recherche Google.
Conclusion
Si votre objectif est de rendre le contenu long plus facile à parcourir, les accordéons offrent une solution propre. Vous avez appris deux approches : le bloc Détails natif offre une configuration légère sans plugins supplémentaires et un chargement rapide. Le bloc Content Toggle d'Ultimate Blocks ajoute des contrôles de style avancés, des panneaux imbriqués et un schéma de FAQ intégré. Les deux méthodes améliorent l'engagement de l'utilisateur mobile et le potentiel de référencement. Choisissez l'approche qui correspond le mieux à votre flux de travail et à vos besoins en matière de contenu.
