Créer une FAQ Accordéon pour WordPress avec jQuery UI

Créer une section FAQ pour votre site Web WordPress est incroyablement simple. Nous allons utiliser WordPress Custom Post Types pour les questions et réponses. Nous utiliserons ensuite un accordéon jQuery UI pour créer un joli widget accordéon multi-navigateurs. Enfin, nous attribuerons un shortcode afin que nous puissions afficher notre FAQ sur n’importe quelle page ou publication..

Nous allons créer ceci:

Étape 1 Créer le répertoire et les fichiers

1. Créez un nouveau dossier dans votre dossier de thème appelé FAQ
2. À l'intérieur de 'FAQ'dossier, créez un nouveau fichier appelé faq.php
3. Créez un autre fichier appelé faq.js

Étape 2: incluez le fichier faq.php

Dans ton functions.php (situé dans le répertoire racine de votre thème) - incluez le faq.php fichier que vous avez créé en haut.

 / * functions.php * / include ('faq / faq.php');

Étape 3 Créer le type de publication personnalisé

1. Pour enregistrer le type de message personnalisé, nous allons nous connecter au init action. Nous utilisons une fonction anonyme comme second paramètre pour nous aider à tout garder encapsulé au même endroit. Cela aide à la lisibilité et la maintenabilité.
2. Installer étiquettes $ et $ args comme vu ci-dessous.
3. A la fin on appelle register_post_type ('FAQ', $ args)
4. Maintenant, si vous allez dans votre espace administrateur, vous verrez une nouvelle option dans le menu - FAQ (comme dans l'image ci-dessous)
5. Cliquez sur Ajouter une nouvelle question et entrez quelques questions et réponses afin que nous puissions travailler ultérieurement. Utilisez le Titre champ pour la question et le champ de contenu principal pour la réponse. Cela nous permet d’entrer tout type de contenu dans notre réponse (comme des images et vidéos) ainsi que du texte..

 / * Enregistrer le type de message personnalisé * / / * faq.php * / add_action ('init', function () $ labels = array ('name' => _x ('FAQ', 'nom général du type de message' '), 'singular_name' => _x ('Question', 'post type nom singulier'), 'add_new' => _x ('Ajouter une nouvelle question', 'Question'), 'add_new_item' => __ ('Ajouter une nouvelle question') , 'edit_item' => __ ('Edit Question'), 'new_item' => __ ('Nouvelle question'), 'all_items' => __ ('Toutes les questions FAQ'), 'view_item' => __ ('View Question '),' search_items '=> __ (' FAQ de la recherche '),' not_found '=> __ (' Aucune FAQ trouvée '),' not_found_in_trash '=> __ (' Aucune FAQ trouvée dans la corbeille '),' parent_item_colon ' => ", 'menu_name' => 'FAQ'); $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'show_in_menu '=> true,' query_var '=> true,' rewrite '=> true,' type_de capacité '=>' post ',' has_archive '=> true,' hiérarchique '=> false,' menu_position '=> null,' prend en charge '=> array (' titre ',' éditeur ',' attributs de page ')); register_post_type (' FAQ ', $ args););

Étape 4 Inclure jQuery, l'interface utilisateur jQuery et faq.js

1. Charger jQuery
2. Charger l'interface utilisateur jQuery
3. Chargez la feuille de style pour la bibliothèque de l'interface utilisateur jQuery
4. Chargez notre script personnalisé faq.js

 add_action ('wp_enqueue_scripts', 'wptuts_enqueue'); fonction wptuts_enqueue () wp_register_style ('wptuts-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/south-street/jquery-ui.css' ) wp_enqueue_style ('wptuts-jquery-ui-style'); wp_register_script ('wptuts-custom-js', get_template_directory_uri (). '/faq/faq.js', 'jquery-ui-accordéion', "true); wp_enqueue_script ('wptuts-custom-js');

Vous remarquerez que nous n'en avons utilisé qu'un wp_enqueue_script appel, car il est important que les fichiers JavaScript soient chargés dans l’ordre car ils sont dépendants les uns des autres. Réglage jquery-ui-accordéon comme une dépendance fait en sorte que cela se produise.

Étape 5 Configurer le Shortcode

Parce que nous voulons pouvoir mettre notre FAQ Accordéon sur n'importe quelle page / publication, nous allons générer un shortcode. Utiliser un shortcode signifie qu'il suffit de taper [FAQ] dans n'importe quel post / page de l'éditeur WordPress pour afficher notre FAQ.

 add_shortcode ('faq', function () return "Test de code court";);

Étape 6 Obtenez la FAQ Questions et réponses

Nous pouvons obtenir les données de notre type de message personnalisé en utilisant le get_posts () une fonction.

1. numéros - Ici, vous pouvez limiter le nombre de questions fréquemment posées.
2. commandé par et ordre - Nous permet de changer l'ordre des questions
3. Type de poste - Voici comment nous disons à WordPress de ne récupérer que notre type de message personnalisé

 add_shortcode ('faq', function () $ posts = get_posts (array ('numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq' )); // tableau d'objets renvoyés);

 / * exemple * / echo $ posts [0] -> post_content; // affichera la réponse de la première question de la FAQ.

Étape 7 Générez le balisage pour l'accordéon jQuery UI

Voici le balisage nécessaire pour l'accordéon jQuery UI:

  
 
La question ira ici
 
La réponse sera dans cette div.
 

 $ faq = '
'; // le conteneur, avant la boucle foreach ($ posts comme $ post) $ faq. = sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // termine en fermant le conteneur return $ faq;

 add_shortcode ('faq', function () $ posts = get_posts (array (// Obtient la FAQ Type de message personnalisé. 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq',)); $ 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. );

 (function () jQuery ("# ​​wptuts-accordéon"). accordion ();) ();