Récemment, un de nos utilisateurs nous a demandé s’il existait un moyen pour eux d’ajouter un accordéon FAQ sur leur site WordPress. Il existe de nombreux plugins disponibles qui vous permettent d’ajouter une section de questions fréquemment posées ou de FAQ dans WordPress. Dans cet article, nous allons vous montrer comment ajouter un accordéon FAQ jQuery dans votre site WordPress.
Qu’est-ce que l’Accordéon ?
Dans la conception Web, l’accordéon est un terme utilisé pour un modèle de conception d’interface utilisateur qui comporte des onglets ou des blocs de contenu qui se réduisent ou se développent lors de l’interaction de l’utilisateur. Chaque onglet a un contenu en dessous d’eux qui se développe lorsque l’utilisateur clique sur l’élément de menu. En termes simples, c’est comme un menu qui se développe lorsque vous cliquez dessus. Nous avons utilisé un effet similaire sur notre page de configuration de blog WordPress gratuite. Ci-dessous, une capture d’écran d’un exemple d’accordéon. 
Didacticiel vidéo
Abonnez-vous à Themelocal
Si vous n’aimez pas la vidéo ou avez besoin de plus d’instructions, continuez à lire.
Ajout d’un accordéon jQuery FAQ
Avant de pouvoir ajouter un accordéon FAQ jQuery, vous devez vous assurer que vous disposez d’une section FAQ. Commencez par ajouter une section FAQ en suivant notre tutoriel sur la façon d’ajouter une section FAQ dans WordPress.
Continuons maintenant avec l’ajout de l’accordéon jQuery FAQ. WordPress est livré avec la bibliothèque jQuery mais il n’a pas de thèmes jquery. Nous chargerons cela à partir de Google CDN et mettrons ces scripts en file d’attente dans WordPress. Nous allons également créer un shortcode qui affiche nos questions fréquemment posées. Plus important encore, nous ferons tout cela en créant un plugin WordPress.
Créez un dossier sur votre bureau et nommez-le my-accordion. Ouvrez le Bloc-notes ou tout autre éditeur de texte de votre choix. Créer un fichier nommé my-accordion.php et collez ce code à l’intérieur:
<?php
/**
Plugin Name: Themelocal's FAQ Accordion
Description: A jQuery powered Accordion for FAQs based on a tutorial by Themelocal
Version: 1.0
Author: Themelocal
Author URI: https://www.wpbeginner.com
License: GPL2
*/
function accordion_shortcode() {
// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');
// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(
'posts_per_page' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
// Generating Output
$faq .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the HTML.
}
add_shortcode('faq_accordion', 'accordion_shortcode');
Après avoir enregistré vos modifications dans ce fichier, ouvrez un nouveau fichier vierge. Enregistrez-le sous accordion.js. Collez ensuite ce code à l’intérieur et enregistrez le fichier :
jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();
Nous avons maintenant notre plugin prêt à être téléchargé. Ouvrez votre client FTP et téléchargez le dossier my-accordion dans le répertoire /wp-contnt/plugins/ de votre site WordPress. Ensuite, vous devez activer le plugin en accédant à l’écran de votre plugin dans la zone d’administration de WordPress.
Ajouter une page FAQ avec Accordion
Pour afficher ces FAQ en accordéon, vous devez créer une nouvelle page. Aller à Pages » Ajouter un nouveau. Donnez un titre à votre page, par exemple FAQ et dans la zone d’édition de la page, entrez ce shortcode :
[faq_accordion]
Enregistrez et publiez votre page, puis prévisualisez-la. Vous verrez votre FAQ affichée dans un joli menu en accordéon.
Changer le style et les couleurs de votre accordéon
Pour les couleurs et le style, cette FAQ Accordion utilise les thèmes jQuery UI hébergés sur Google. Il s’agit essentiellement d’une feuille de style, et si vous préférez, vous pouvez la télécharger et la mettre sur votre propre site Web. Le site Web jQuery a un Thèmes d’interface utilisateur jQuery section avec quelques thèmes prêts à l’emploi. Comme vous pouvez le voir, nous avons utilisé le thème de l’humanité dans notre plugin. Vous pouvez le remplacer par l’un des thèmes disponibles tels que la douceur, le cupertino, etc. Vous pouvez également créer ou modifier ces thèmes sur Themeroller. 
Nous espérons que cet article vous a aidé à ajouter une jQuery FAQ Accordion sur votre site WordPress. Pour des commentaires et des questions, veuillez laisser un commentaire ci-dessous.
