L'organisation du contenu avec un accordéon FAQ peut améliorer l'expérience utilisateur sur votre site WordPress. Cette fonctionnalité vous permet d'afficher des questions et des réponses dans un format compact, ce qui permet aux visiteurs de trouver plus facilement des informations rapidement.
De plus, l'utilisation de jQuery pour votre accordéon rend vos FAQ interactives et faciles à naviguer.
Chez WPBeginner, nous tenons un blog depuis plus de 16 ans et avons écrit des centaines d'articles, de guides et de tutoriels. Dans certains d'entre eux, vous remarquerez que nous avons utilisé des accordéons FAQ jQuery pour répondre aux questions courantes de nos lecteurs.
Cette approche nous a aidés à attirer plus de visiteurs, à améliorer notre classement dans les moteurs de recherche et même à générer des prospects. En résumé, nous savons à quel point un accordéon FAQ dynamique peut être précieux.
Dans cet article, nous vous montrerons comment ajouter facilement un accordéon FAQ jQuery dans WordPress, étape par étape.
Pourquoi utiliser un accordéon FAQ jQuery dans WordPress ?
En conception web, un accordéon est un outil pour organiser le contenu de manière soignée. Il ressemble à une liste où chaque élément se développe pour montrer plus de détails lorsque vous cliquez dessus, puis se réduit lorsque vous avez terminé. C'est un moyen simple de masquer ou d'afficher des informations supplémentaires sans encombrer la page.
Pendant ce temps, jQuery est une bibliothèque JavaScript qui simplifie l'ajout de fonctionnalités interactives à votre site Web. Par exemple, elle vous permet d'ajouter des éléments tels que des animations, des menus déroulants et des boutons cliquables, sans avoir à écrire de code complexe à partir de zéro.
Cela signifie qu'utiliser un accordéon FAQ jQuery dans WordPress peut rendre votre site plus organisé et convivial. Il vous permet d'afficher les questions fréquemment posées dans un format rétractable, économisant de l'espace et réduisant l'encombrement.
Ainsi, les visiteurs peuvent rapidement trouver les réponses dont ils ont besoin sans avoir à faire défiler de longs blocs de texte. Cela peut donner à votre site un aspect épuré et améliorer le référencement en rendant votre contenu plus structuré, ce que les moteurs de recherche favorisent.
Cela dit, examinons comment ajouter facilement un accordéon FAQ jQuery dans WordPress. Nous aborderons plusieurs méthodes dans ce tutoriel, mais vous pouvez utiliser les liens ci-dessous pour accéder à celle de votre choix :
- Méthode 1 : Ajouter un accordéon FAQ jQuery avec WPCode (Recommandé)
- Méthode 2 : Ajouter un accordéon FAQ jQuery avec un plugin gratuit (Facile)
- Méthode 3 : Ajouter un accordéon FAQ jQuery avec SeedProd
- Bonus : Ajouter un schéma FAQ dans WordPress
Méthode 1 : Ajouter un accordéon FAQ jQuery avec WPCode (Recommandé)
Si vous recherchez un moyen simple et fiable d'ajouter un accordéon FAQ jQuery, cette méthode est faite pour vous.
Pour cette approche, vous aurez besoin de WPCode, qui est le meilleur plugin de snippets de code WordPress du marché. C'est le moyen le plus simple et le plus sûr d'ajouter du code personnalisé à votre site Web. De plus, il est livré avec un snippet de code préfabriqué pour un accordéon FAQ, ce qui en fait un choix idéal.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus de détails, consultez notre tutoriel sur comment installer un plugin WordPress.
Remarque : WPCode dispose d'un plan gratuit, mais vous aurez besoin de la version premium pour débloquer la bibliothèque cloud de snippets de code.
Après l'activation, visitez la page Snippets de code » + Ajouter un snippet depuis le tableau de bord WordPress et utilisez le formulaire de recherche pour localiser le snippet « Accordéon FAQ ».
Une fois que vous avez fait cela, cliquez simplement sur le bouton « Utiliser l'extrait » en dessous.
Cela vous dirigera vers la page « Modifier l'extrait », où le code personnalisé pour un accordéon FAQ sera déjà ajouté dans la boîte « Aperçu du code ».
Ici, vous devez simplement taper les questions et réponses de votre accordéon dans le code. Une fois que vous avez fait cela, basculez l'interrupteur en haut sur « Actif » et cliquez sur le bouton « Mettre à jour ».
Ouvrez maintenant la page ou la publication où vous souhaitez ajouter la section d'accordéon FAQ dans l'éditeur de blocs.
Ici, cliquez sur le bouton « Ajouter un bloc » (+) pour ouvrir le menu des blocs et ajoutez le bloc « WPCode » à la page. Ouvrez maintenant le menu déroulant dans le bloc pour choisir l'extrait de code « Accordéon FAQ » que vous avez créé précédemment.
Une fois cela fait, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut pour enregistrer vos paramètres.
Visitez maintenant votre site WordPress pour voir l'accordéon FAQ en action.
Gardez à l'esprit que vous devrez répéter le processus pour créer un accordéon pour d'autres pages.
Méthode 2 : Ajouter un accordéon FAQ jQuery avec un plugin gratuit (Facile)
Si vous ne souhaitez utiliser aucun code personnalisé sur votre site Web, alors cette méthode est pour vous.
Tout d'abord, vous devrez installer et activer le plugin Advanced Accordion Gutenberg Block. Pour plus d'informations, consultez notre guide pour débutants sur comment installer un plugin WordPress.
Après l'activation, ouvrez la page ou l'article où vous souhaitez ajouter des FAQ et cliquez sur le bouton « Ajouter un bloc » (+) en haut. Une fois le menu des blocs apparu, localisez et ajoutez simplement le bloc « Accordéon séparé » à la page.
Ensuite, tapez votre première question et réponse dans le bloc accordéon.
Ensuite, vous pouvez ajouter un schéma de FAQ depuis le panneau de blocs en développant l'onglet du même nom et en activant le commutateur « Activer ».
Après cela, passez à la section « Styles » dans la colonne de droite. À partir de là, vous pouvez personnaliser la couleur du texte de l'accordéon, la couleur de fond, la couleur de l'icône, et bien plus encore.
Ensuite, vous pouvez répéter ce processus pour ajouter autant de FAQ que vous le souhaitez.
Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut de la page pour enregistrer vos paramètres.
Maintenant, visitez votre page FAQ pour voir l'accordéon jQuery en action.
Méthode 3 : Ajouter un accordéon FAQ jQuery avec SeedProd
Si vous souhaitez ajouter une section FAQ interactive à une page personnalisée, alors cette méthode est pour vous.
Pour ce faire, vous pouvez utiliser SeedProd. C'est le meilleur constructeur de pages WordPress qui est également livré avec un bloc accordéon spécial pour ajouter des sections de texte qui se développent et se réduisent sur vos pages.
Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour en savoir plus, consultez notre guide sur comment installer un plugin WordPress.
Remarque : SeedProd dispose d'un plan gratuit. Cependant, vous aurez besoin de la version pro pour débloquer le bloc « Accordéon ».
Après l'activation, rendez-vous sur la page SeedProd » Paramètres pour saisir votre clé de licence. Vous trouverez ces informations dans votre compte sur le site Web de SeedProd.
Après cela, visitez l'écran SeedProd » Pages de destination depuis la barre latérale d'administration de WordPress.
À partir de là, cliquez sur le bouton « Ajouter une nouvelle page de destination ».
Cela vous mènera à un nouvel écran où vous verrez une liste de modèles prédéfinis parmi lesquels choisir.
Une fois que vous avez fait un choix, vous verrez une invite vous demandant d'entrer un nom de page et une URL. Entrez les détails et cliquez sur le bouton « Enregistrer et commencer à modifier la page » pour continuer.
Le constructeur par glisser-déposer de SeedProd s'ouvrira maintenant sur votre écran. Ici, vous verrez une colonne de blocs à gauche avec un aperçu de la page à droite.
Vous pouvez maintenant ajouter n'importe quel élément à votre page, y compris une image, une vidéo, un bouton d'appel à l'action, un titre ou un bloc de texte. Ensuite, faites glisser et déposez le bloc « Accordéon » là où vous souhaitez ajouter vos FAQ.
Ensuite, cliquez à nouveau sur le bloc pour ouvrir ses paramètres dans la colonne de gauche. À partir de là, développez l'onglet ‘Accordion 1’ et commencez à saisir votre première FAQ.
Vous pouvez maintenant répéter le processus pour ajouter d'autres entrées.
Par défaut, le bloc n'ajoute que deux accordéons, mais vous pouvez cliquer sur le bouton ‘Ajouter un nouvel élément’ pour ajouter autant de FAQ que vous le souhaitez.
Vous pouvez même configurer la taille de la police et l'espacement entre chaque accordéon à l'aide des curseurs fournis.
Ensuite, passez à l'onglet ‘Avancé’ en haut.
À partir de là, vous pouvez modifier la couleur du texte, la couleur de l'en-tête, la couleur de l'arrière-plan et la couleur du séparateur de l'accordéon.
Une fois que vous avez terminé, cliquez simplement sur le bouton ‘Enregistrer’ puis sur ‘Publier’ en haut.
Vous pouvez maintenant visiter la page personnalisée nouvellement créée pour afficher votre accordéon FAQ jQuery.
Bonus : Ajouter un schéma FAQ dans WordPress
Une fois que vous avez ajouté ces accordéons FAQ jQuery, il est judicieux d'ajouter un schéma FAQ pour eux. Cela peut améliorer votre classement SEO et votre taux de clics organique en faisant apparaître vos questions fréquemment posées directement dans les résultats de recherche de Google.
Pour cela, nous recommandons All in One SEO, qui est le meilleur plugin SEO du marché. C'est une solution tout-en-un qui optimise votre site pour les moteurs de recherche et l'aide à mieux se classer en quelques clics.
Nous utilisons cet outil sur WPBeginner depuis quelques années, et depuis, nous avons constaté des améliorations notables dans nos classements de recherche. Pour plus de détails, consultez notre avis sur AIOSEO.
L'outil est doté d'une fonctionnalité intégrée de balisage de schéma qui peut aider les moteurs de recherche à mieux comprendre votre contenu. Après l'activation du plugin, ouvrez simplement votre page FAQ dans l'éditeur de blocs.
Ensuite, faites défiler vers le bas jusqu'à la section « Paramètres AIOSEO » et basculez vers l'onglet « Schéma ». À partir de là, cliquez sur le bouton « Générer le schéma ».
Cela ouvrira le « Catalogue de schémas », où vous devrez trouver l'option FAQ et cliquer sur le bouton « Ajouter le schéma » à côté.
Après cela, vous pouvez ajouter vos FAQ telles qu'elles apparaissent dans votre accordéon. Une fois que vous avez terminé, cliquez simplement sur le bouton « Ajouter le schéma » pour enregistrer vos paramètres.
Désormais, les moteurs de recherche indexeront ces questions et les afficheront sur les pages de résultats de recherche, améliorant ainsi votre classement.
Pour plus de détails, consultez notre tutoriel sur comment ajouter un schéma FAQ dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter un accordéon FAQ jQuery dans WordPress. Vous pourriez également aimer consulter notre guide sur comment afficher facilement du code sur votre site WordPress et nos meilleurs choix pour les meilleurs outils de développement WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Dennis Muthomi
La méthode 1 avec WPCode a été vraiment utile, c'est un excellent équilibre entre facilité et personnalisation.
En tant que développeur WordPress, j'ai déjà fait des choses similaires, mais votre guide étape par étape le rend accessible aux débutants aussi.
Une chose que j'ajouterai à ce que j'ai fait auparavant est d'utiliser des transitions CSS pour lisser les animations d'ouverture/fermeture de l'accordéon, cela le rendra encore meilleur. Ce sera une excellente ressource pour mes futurs projets.
Zac Smith
Bonjour, j'ai installé le plugin Quick and Easy FAQ, puis j'ai suivi cette vidéo. Je n'obtiens pas de FAQ en accordéon, mais la seule chose qui s'affiche est la première question et réponse de la FAQ... et la question est hyperliée.
Daniel
Super tutoriel !
Mon débogueur s'est plaint d'une variable indéfinie $faq.
Variable définie au début de la fonction accordion_shortcode() avec $faq = "";
De plus, ma version du plugin FAQ entre la valeur 'faq' au lieu de 'query' dans le champ post_type de la table postes.
Ligne 23 ajustée :
'post_type' => 'faq',
Johan Johnsson
C'est idiot que vous nous fassiez installer un plugin pour une page FAQ et suivre votre précédent tutoriel sur la façon de créer cette page FAQ, puis copier (essentiellement télécharger) le plugin que vous avez créé pour ce tutoriel. Nous téléchargeons donc essentiellement 2 plugins déjà terminés.
Je ne pense pas que les gens viennent ici pour télécharger 2 plugins, mais plutôt pour APPRENDRE à créer leur propre menu accordéon personnalisé. Je ne vois pas pourquoi je devrais suivre ce « guide pratique » alors que je peux simplement télécharger un autre plugin WP qui fait le même travail, sinon mieux.
Et le fait que ce plugin repose sur le plugin FAQ semble tout à fait inutile. Pourquoi n'avez-vous pas créé un plugin autonome et l'avez-vous rendu dynamique ? Ainsi, vous pouvez l'utiliser pour n'importe quel contenu sur n'importe quelle page.
Support WPBeginner
Salut Johan,
La plupart de nos utilisateurs sont des débutants qui auraient du mal à copier-coller du code. C'est pourquoi nous en avons fait un plugin afin que les utilisateurs puissent le télécharger et l'installer. Si vous souhaitez utiliser la méthode du code, le code est ici pour que vous puissiez l'étudier et l'utiliser dans votre thème ou un plugin spécifique au site. Faites-nous savoir si vous avez besoin d'aide pour cela.
Admin
Kim
Comment faire pour que lorsque je clique sur le titre, il se réduise ? Je vois qu'il se réduit lorsque vous cliquez sur une autre partie de l'accordéon, mais je cherche la fonction pour qu'il se réduise lorsque chaque titre est cliqué.
christina
Merci pour le tutoriel. Je suis très nouveau dans le codage et la conception de pages Web. J'ai suivi les instructions pour coller les codes dans mon bloc-notes sur mon Mac. Existe-t-il une autre façon d'enregistrer le fichier autre qu'en bloc-notes en tant que fichier php ou js dans le dossier ? De plus, pourriez-vous s'il vous plaît me dire étape par étape comment ouvrir un client FTP (qu'est-ce que c'est d'ailleurs ?) et comment télécharger mon dossier my-accordian dans /wp-contnt/plugins/directory sur le site Web WP. Merci beaucoup.
christina
lorsque j'enregistre le fichier textedit, il est enregistré sous my-accordion.php.rtf. Est-ce correct ?
Support WPBeginner
Non. Vous devez l'enregistrer sous my-accordion.php. Les programmes Windows ajoutent parfois cette extension à votre fichier texte. Essayez d'utiliser l'option Enregistrer sous.
Admin
Support WPBeginner
Sur Mac, vous avez un programme appelé TextEdit. Pour le FTP, consultez notre guide sur comment utiliser FTP pour télécharger des fichiers WordPress.
Admin
Nurul Amin
J'ai activé ce plugin avec succès, mais il ne fonctionne pas. Rien ne s'affiche sur ma page FAQ.
L'équipe de WPBeginner
Le code que vous avez partagé ne ressemble pas au code que nous avons partagé ci-dessus. Cependant, le code dans la capture d'écran contient des balises HTML qui ne devraient pas s'y trouver. Il devrait être comme ceci :
'posts_per_page' => '10',
Stefan 13
C'est assez bizarre. Vos commentaires m'ont laissé perplexe, car je voyais clairement le code juste là sur mon écran. J'ai alors réalisé que toutes ces balises de conversion de devises provenaient d'un autre de mes plugins Firefox, qui ajoute dynamiquement un menu contextuel aux nombres sur les pages Web – d'où l'apparence différente de la source.
Merci pour votre aide !
Stefan 13
Lorsque j'essaie d'activer le plugin dans WP 4.1, j'obtiens ce message d'erreur :
Le plugin n'a pas pu être activé car il a déclenché une erreur fatale.
Parse error: syntax error, unexpected '<' in /home2/laurepc3/public_html/shala/wp-content/plugins/my-accordion/my-accordion.php on line 20
Des idées pour m'aider avec ça ?
L'équipe de WPBeginner
Le code que vous avez collé contient un caractère inattendu 10,
Assurez-vous que posts_per_page est entre guillemets simples. Assurez-vous qu'il y a un signe égal avant le signe supérieur et assurez-vous qu'il y a une virgule à la fin de la ligne.
Invité
Je n'ai pas ça à la ligne 20. Ce que je peux voir à la ligne 20 dans le message ci-dessus et dans mon fichier est ceci :
‘posts_per_page’ => 10,
Capture d'écran jointe également.
Donc, le message ci-dessus affiche-t-il un contenu de fichier incorrect ?
Stefan 13
Le code dans mon fichier ne ressemble pas à ce que vous avez posté pour la ligne 20, mais c'est le même code que celui ci-dessus :
‘posts_per_page’ => 10,
‘orderby’ => ‘menu_order’,
Cela signifie-t-il que le code de l'article est obsolète ?
Merci de clarifier !
Capture d'écran ci-jointe :
Caroline
Merci pour ce tutoriel ! Cela m'aide beaucoup avec mon problème !
Je veux mettre des sujets comme ceci : Sujet « Événements » : une boîte accordéon et « Événements passés » : une autre boîte accordéon avec le sujet Événements passés. J'ai essayé le shortcode [faq_accordion + topic=”events”] mais rien ne s'est passé. Que puis-je faire ? Merci beaucoup !!!
raouf
bonjour .. merci pour ce tutoriel, il est utile. mais j'ai juste fait une modification simple pour faire un accordéon pour une catégorie spécifique. ça marche mais ça me montre l'éditeur classique de mon post et non l'éditeur visuel. pouvez-vous m'aider
Mahesh Waghmare
Merci…
Rana
Bonjour
Existe-t-il un moyen d'afficher uniquement le « titre de la catégorie, par exemple Sujet FAQ » et le sujet listé sous chacun.
Je ne veux pas tout le contenu, juste le titre de la catégorie et cliquer dessus montrerait le titre du sujet)
Raba
Chris
Quelle est la meilleure façon de faire fonctionner le CSS ? J'ai un thème enfant avec mon code CSS personnalisé. Dois-je faire quelque chose dans ce fichier car je ne vois aucun CSS de Google.
Support WPBeginner
Chris, le CSS de Google est mis en file d'attente et n'est récupéré que lorsque votre accordéon FAQ est affiché. Ouvrez la page contenant votre accordéon FAQ et faites un clic droit, puis sélectionnez Afficher la source. Sur la page d'affichage de la source, recherchez
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.csss'il est là, cela signifie que vous avez chargé avec succès le thème CSS.Admin
Chris S.
J'arrive à faire fonctionner correctement votre plugin avec le Gestionnaire de FAQ mais j'ai quelques questions. Il n'affiche que 10 des FAQ (ce que je suppose être un nombre par défaut). Si j'utilise le shortcode intégré qui accompagne le plugin Gestionnaire de FAQ, je peux afficher la liste complète.
Pour tout afficher : placez [faq limit="-1"] sur un post / une page
Avez-vous des suggestions sur la façon de gérer cela ?
De plus, le gestionnaire de FAQ permet de créer différentes listes par sujet. Y aurait-il un moyen simple de modifier votre plugin pour en tirer parti ?
Lister tout à partir d'une seule catégorie de sujet de FAQ : placez [faq faq_topic=”topic-slug”] sur un article / une page
Excellent travail par ailleurs !
Support WPBeginner
Pour afficher les FAQ avec des sujets, FAQ Manager utilise ces paramètres dans le shortcode :
[faq faq_topic="topic-slug"][faq limit=”-1″] s'explique assez bien. Il affichera toutes les FAQ.
Cependant, si vous souhaitez afficher plus de FAQ dans l'accordéon, vous devez modifier le paramètre de requête dans le plugin FAQ Accordion de WPBeginner, comme ceci :
1-click Use in WordPress
Admin
Chris S.
Super - merci pour votre aide !
Garrett
Cela ne fonctionne pas tout à fait comme prévu. Le plugin s'active avec succès et le shortcode est traité, mais voici à quoi ressemble la sortie...
J'ai choisi d'utiliser le plugin FAQ manager avec votre code afin de corriger le style hideux que le plugin génère.
Mais quand tout est dit et fait, voici à quoi ça ressemble. Des conseils ?
http://screencast.com/t/K2VfuBOptcn
Merci beaucoup d'avance !!
~Garrett
Atlanta, GA
Garrett
Il semble que la liste n'hérite d'aucune information de style de jquery-ui.css, bien que j'aie vérifié qu'un lien vers jquery-ui.css EST présent sur la page.
Ligne où jquery-ui.css est inclus :
Exploration des règles CSS :
Comment est-ce possible ?
Merci !
~Garrett
Support WPBeginner
Essayez de passer à un thème WordPress par défaut pour voir si cela fonctionne alors.
Admin
Richard Morrison
Cela a tout cassé suite à la dernière mise à jour de Wordpress. Je ne peux plus afficher l'accordéon. Le shortcode affiche maintenant uniquement le texte du gestionnaire de FAQ.
Piet
la ligne 20 de votre fichier my-accordion.php indique : ‘numberposts’
cette fonction est obsolète depuis... très longtemps.
puisque vous êtes dans le business de donner des tutoriels aux débutants, pouvez-vous au moins avoir les bonnes fonctions ?
évidemment, cela devrait être ‘posts_per_page’
Personnel éditorial
Article mis à jour.
Admin
Mary-Anne
J'apprécierais de l'aide pour cela. J'essaie d'installer sur un site réseau 3.5.2. L'administrateur réseau a le plugin listé et activé sur le réseau.
Cependant, il n'est pas listé sur les sous-sites.
A-t-il déjà été testé avec des sites réseau ? Cela semble exactement ce qu'il faut. Merci pour tous vos efforts avec WPBEGINNER.
Merci.
Personnel éditorial
Cela ressemble à une question de support qui doit être postée sur le forum du plugin.
Admin
birge
Bonjour,
J'ai fait mon-accordion.php et accordion.js, je les ai téléchargés et tout, mais je ne vois toujours pas le plugin dans la liste des plugins. Qu'est-ce qui s'est mal passé ?
Merci,
birge
Personnel éditorial
Êtes-vous sûr que l'emplacement du fichier du plugin est quelque chose comme ceci : /wp-content/plugins/accordion/my-accordion.php
Admin
birge
Exactement.
alin
I do just what you said but I can’t activate the plugin from plugins dashboard because I can’t se it
curdaneta
Vous avez oublié d'inclure le fichier script "accordion.js"...
Personnel éditorial
Nous avons partagé le code d'accordion.js là-dedans. Il est également inclus en utilisant enqueue script.
Admin
curdaneta
Désolé, mais je trouve le lien vers le fichier
Personnel éditorial
Il n'y a pas de lien vers le fichier. Nous avons partagé le code que vous devez coller dans un nouveau fichier que vous créerez appelé accordion.js
curdaneta
Désolé, c'est ma faute
Je n'ai pas lu attentivement. Maintenant, tout fonctionne comme prévu
curdaneta
curdaneta
Bonjour
Ça ne marche pas pour moi en utilisant le shortcode dans plusieurs paragraphes
Cordialement
curdaneta
Gaelyn
Merci. Je vois où cela sera très utile.
Drake
Merci pour l'article. Ce serait bien d'en avoir un similaire qui explique comment introduire des onglets jQuery dans les pages/articles.