Comment ajouter une FAQ jQuery Accordion dans WordPress

Récemment, l'un de nos utilisateurs nous a demandé s'il était possible d'ajouter un accordéon FAQ sur son site WordPress. Il existe de nombreux plugins disponibles qui vous permettent d'ajouter une section de questions fréquemment posées ou FAQ dans WordPress. Dans cet article, nous allons vous montrer comment ajouter un accordéon jQuery FAQ dans votre site WordPress.

Qu'est-ce que l'accordéon??

Dans la conception Web, «accordéon» est un terme utilisé pour désigner un modèle de conception d'interface utilisateur comportant des onglets ou des blocs de contenu qui réduisent ou développent les interactions 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, cela ressemble à un menu qui s’agrandit 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

Si vous n'aimez pas la vidéo ou si vous avez besoin de plus d'instructions, continuez à lire..

Ajout d'une FAQ jQuery Accordion

Avant de pouvoir ajouter un accordéon jQuery FAQ, vous devez vous assurer de disposer d'une section FAQ. Commencez par ajouter une section FAQ en suivant notre tutoriel sur la procédure d’ajout d’une section FAQ dans WordPress..

Continuons maintenant avec l’ajout de l’accordéon jQuery FAQ. WordPress est fourni avec la bibliothèque jQuery, mais il n’a pas de thèmes jquery. Nous allons charger cela à partir de Google CDN et mettre ces scripts en file d'attente dans WordPress. Nous allons également créer un shortcode qui affiche nos questions fréquemment posées. Nous ferons surtout tout cela en créant un plugin WordPress.

Créez un dossier sur votre bureau et nommez-le my-accordéon. Ouvrez le Bloc-notes ou tout autre éditeur de texte de votre choix. Créez un fichier appelé mon-accordéon.php et collez ce code à l'intérieur:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'question',)); // Génération de sortie $ faq. = ''; // Ouvre le conteneur foreach ($ posts en tant que $ post) // Génère le balisage pour chaque question $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Ferme le conteneur return $ faq; // retourne le 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. Ensuite, collez ce code à l'intérieur et enregistrez le fichier:

 jQuery (document) .ready (function () jQuery ("# ​​accordion"). accordion ();) (); 

Maintenant, nous avons notre plugin prêt à télécharger. Ouvrez votre client FTP et chargez le dossier my-accordéon dans le répertoire / wp-contnt / plugins / de votre site Web WordPress. Ensuite, vous devez activer le plugin en allant sur l’écran de votre plugin dans la zone d’administration de WordPress..

Ajouter une page de FAQ avec Accordion

Pour afficher ces FAQ au format 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 page entrez ce shortcode:

[faq_accordion]

Enregistrez et publiez votre page et prévisualisez-la. Vous verrez votre FAQ affichée dans un joli menu accordéon.

Changer le style et les couleurs de votre accordéon

Pour les couleurs et le style de cette FAQ, Accordion utilise les thèmes de l'interface utilisateur jQuery hébergés sur Google. Il s’agit d’une feuille de style. Si vous préférez, vous pouvez la télécharger et la mettre sur votre propre site Web. Le site Web de jQuery comporte une section de thèmes de l'interface utilisateur jQuery avec quelques thèmes prêts à être utilisés. Comme vous pouvez le constater, nous avons utilisé le thème de l'humanité dans notre plugin. Vous pouvez le remplacer par n'importe lequel des thèmes disponibles tels que lissé, 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 FAQ FAQ jQuery sur votre site Web WordPress. Pour les commentaires et les questions s'il vous plaît laissez un commentaire ci-dessous.