Utilisation de WordPress pour créer un système de FAQ avec des types de publication personnalisés

J'ai récemment travaillé avec une de mes clientes, qui travaille comme consultante professionnelle dans son domaine d'activité. Elle m'a demandé si je pouvais mettre en place un système de questions-réponses, ou une page de FAQ, pour être exact. J'ai dit: "Bien sûr, nous pouvons simplement créer une page et y coller les questions et les réponses avec un style différent", mais elle a dit qu'elle créerait différentes pages et classerait les questions et réponses, et qu'elle souhaitait être plus organisée une approche différente.

À cette fin, je vais vous montrer comment j'ai traité ses demandes avec quelques lignes de code simples, en utilisant des types d'article personnalisés, des taxonomies et des codes courts..

Le type de message personnalisé et la taxonomie

De quoi avons-nous besoin pour construire un système de FAQ?

Nous avons besoin de champs pour les questions et réponses.
Nous avons besoin de catégories pour classer et séparer différents types de questions et leurs réponses.
Dans notre cas, nous avons besoin d’un shortcode pour intégrer ces groupes de questions ou toutes les questions dans une page ou un message..

Commençons par créer le type de message personnalisé.

Étape 1: Création du type de publication personnalisé

Naturellement, nous allons commencer par configurer un type de publication personnalisé pour nos articles de la FAQ. Nous allons créer un nouveau type de message personnalisé à l'aide de l'outil register_post_type () fonction, mais si vous voulez une interface graphique pour créer votre type de publication, vous pouvez la générer à l'aide de l'outil Générateur de type de publication de GenerateWP, comme je l'ai fait dans cet exemple:

 _x ('FAQs', 'Nom général du type de message', 'tuts_faq'), 'nom_s singulier' => _x ('FAQ', 'Nom singulier du type de message', 'tuts_faq'), 'nom_du_menu' => __ ('FAQ ',' tuts_faq '),' parent_item_colon '=> __ (' Article parent: ',' tuts_faq '),' all_items '=> __ (' Tous les éléments ',' tuts_faq '),' view_item '=> __ (' Afficher l'élément ',' tuts_faq '),' add_new_item '=> __ (' Ajouter un nouvel élément de FAQ ',' tuts_faq '),' add_new '=> __ (' Ajouter un nouveau ',' tuts_faq '),' edit_item '=> __ ('Edit Item', 'tuts_faq'), 'update_item' => __ ('Update Item', 'tuts_faq'), 'search_items' => __ ('Elément recherché', 'tuts_faq'), 'not_found' = > __ ('Introuvable', 'tuts_faq'), 'not_found_in_trash' => __ ('Introuvable', 'tuts_faq'),); $ args = array (// utilise les étiquettes ci-dessus 'labels' => $ labels, // nous n’aurons besoin que du titre, de l’éditeur visuel et des champs d’extrait de notre type de message 'supports' => array ('title' , 'editor', 'extrait',), // nous allons créer cette taxonomie dans la section suivante, mais nous devons lier notre type de publication à celui-ci 'taxonomies' => array ('tuts_faq_tax'), / / le rend public afin que nous puissions le voir dans le panneau d'administration et le montrer dans le front-end 'public' => true, // affichera l'élément de menu sous l'élément Pages 'menu_position' => 20, // affichera les archives, si vous n'avez pas besoin du shortcode 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // accrocher l'action 'init' add_action ('init', 'tuts_faq_cpt', 0); ?>

Pointe: Si votre projet implique davantage de types de messages personnalisés pouvant être plus complexes que ce type de message FAQ simple, je peux vous suggérer un outil intéressant appelé SuperCPT qui vous permet de créer de nouveaux types de messages avec un code encore plus simple. J'ai aussi écrit un tutoriel sur SuperCPT, vous pouvez le vérifier ici.

Étape 2: Création de la taxonomie personnalisée

Afin de séparer différents types de questions (comme les questions de mon client sur la fausse couche et la dépression post-partum), nous aurons besoin d'un système de catégories. Comme beaucoup d’entre vous le savent déjà, WordPress fournit cette fonctionnalité avec des taxonomies personnalisées..

La fonction essentielle ici est register_taxonomy () mais encore une fois, vous pouvez utiliser l'outil Taxonomy Generator de GenerateWP si vous avez besoin d'une interface graphique..

Voici le code:

 _x ('Catégories de FAQ', 'Nom général de la taxonomie', 'tuts_faq'), 'nom_du_sulaire' => _x ('Catégorie de FAQ', 'Nom singulier de la taxonomie', 'tuts_faq'), 'nom_du_menu' => __ ('FAQ Catégories ',' tuts_faq '),' all_items '=> __ (' Tous les chats de FAQ ',' tuts_faq '),' parent_item '=> __ (' Parent FAQ Cat ',' tuts_faq '),' parent_item_colon '=> __ ('Parent FAQ Cat:', 'tuts_faq'), 'new_item_name' => __ ('Nouveau chat FAQ', 'tuts_faq'), 'add_new_item' => __ ('Ajouter un nouveau chat FAQ', 'tuts_faq'), 'edit_item' => __ ('Edit FAQ Cat', 'tuts_faq'), 'update_item' => __ ('Update FAQ Cat', 'tuts_faq'), 'separ_items_with_commas' => __ ('Séparer les éléments avec des virgules', 'tuts_faq'), 'search_items' => __ ('Eléments de recherche', 'tuts_faq'), 'add_or_remove_items' => __ ('Ajouter ou supprimer des éléments', 'tuts_faq'), 'Choose_from_most_used' => __ ('Choisir parmi les éléments les plus utilisés ',' tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// utilise les étiquettes ci-dessus 'étiquettes' => $ étiquettes, // la taxonomie doit être hiérarchique afin que nous puissions l'afficher comme une section de catégorie 'hierarchical' => true, // encore une fois, rendre la taxonomie publique ( comme le type de message) 'public' => true,); // le contenu du tableau ci-dessous spécifie les types de publication auxquels la taxonomie doit être liée à register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // accrocher l'action 'init' add_action ('init', 'tuts_faq_tax', 0); ?>

C'est tout! Vous avez maintenant un type d'article FAQ avec une taxonomie appelée "Catégories de FAQ" liées les unes aux autres! Vérifiez votre panneau d'administration et vous verrez le menu "Catégories de FAQ" sous "FAQ"..

Tout comme les catégories de messages ordinaires, vous pouvez les ajouter, les modifier ou les supprimer dans la page "Catégories de FAQ", ou vous pouvez ajouter de nouvelles catégories tout en rédigeant un nouvel élément de FAQ..

Étape 3: Création du `[FAQ]` Petit code

Voici la partie amusante: la construction du shortcode. (Si vous avez lu mes précédents articles, vous savez que je suis un énorme fan des codes courts de WordPress.) Nous allons fondamentalement rendre les questions de la FAQ incorporables dans des posts et des pages..

Voici ce qui va se passer:

requête dans notre nouveau type de message personnalisé,
filtrer ses catégories avec un paramètre shortcode,
afficher les questions et les réponses sous forme de titres et de contenu,
afficher un extrait de la réponse avec un lien "Plus…", contrôlé par un autre paramètre de shortcode.

Commençons par construire le shortcode. Comme le code ci-dessus, je vais inclure quelques commentaires utiles:

", // contenu complet ou attribut extrait - par défaut, le contenu complet 'extrait' => 'false',), $ atts)); $ output ="; // définit les arguments de la requête $ query_args = array (// affiche toutes les publications correspondant à cette requête 'posts_per_page' => -1, // affiche le type de publication personnalisé 'tuts_faq' 'post_type' => 'tuts_faq', // affiche la messages correspondant au slug de la catégorie FAQ spécifiée avec l'attribut du shortcode 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ category,) , // indique à WordPress qu'il n'est pas nécessaire de compter le nombre total de lignes - cette petite astuce réduit la charge de la base de données si vous n'avez pas besoin de la pagination 'no_found_rows' => true,); // récupère les publications avec nos arguments de requête $ faq_posts = get_posts ($ query_args); $ output. = ''; // gère notre boucle personnalisée poureach ($ faq_posts en tant que $ post) setup_postdata ($ post); $ faq_item_title = get_the_title ($ post-> ID); $ faq_item_permalink = get_permalink ($ post-> ID); $ faq_item_content = get_the_content (); if ($ extrait == 'true') $ faq_item_content = get_the_excerpt (). '' __ ('Plus…', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; return $ output;  add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

C'est tout! Nous disposons maintenant d’un shortcode pratique pour intégrer nos questions et réponses. Vous pouvez l'appeler avec les noms de classe tuts-faq, tuts-faq-item, tuts-faq-item-title, et tuts-faq-item-content. Bien, cela devrait aller même si vous n'incluez pas de style supplémentaire.

Étape 4: Résumer le code

Étant donné que ces bouts de code ne concernent pas seulement le style du front-end mais introduisent de nouvelles fonctionnalités, il s'agit d'un territoire de plug-in. C'est pourquoi nous devons enregistrer le code en tant que plugin. Et pendant que nous y sommes, nous devrions également effacer les règles de réécriture lors de l'activation et de la désactivation..

Voici le code complet:

[FAQ] Version: 1.0 Auteur: Barış Ünver URI de l'auteur: http://hub.tutsplus.com/authors/baris-unver Licence: Domaine public * / if (! Function_exists ('tuts_faq_cpt')) // enregistre une fonction de type de message personnalisé tuts_faq_cpt () // ce sont les libellés de l'interface d'administration, modifiez-les à votre guise $ labels = array ('name' => _x ('FAQs', 'Nom général du type de message', 'tuts_faq'), 'nom_s singulier' => _x ('FAQ', 'Nom singulier du type de message', 'tuts_faq'), 'nom_du_menu' => __ ('FAQ', 'tuts_faq'), 'parent_item_colon' => __ ('Elément parent:', ' tuts_faq '),' all_items '=> __ (' Tous les éléments ',' tuts_faq '),' view_item '=> __ (' View Item ',' tuts_faq '),' add_new_item '=> __ (' Add New FAQ Item ',' tuts_faq '),' add_new '=> __ (' Ajouter nouveau ',' tuts_faq '),' edit_item '=> __ (' Edit Item ',' tuts_faq '),' update_item '=> __ (' Mise à jour Élément ',' tuts_faq '),' search_items '=> __ (' Elément recherché ',' tuts_faq '),' not_found '=> __ (' Introuvable ',' tuts_faq '),' not_found_in_trash '=> __ (' Introuvable dans la corbeille ',' tuts_faq '),); $ args = array (// utilise les étiquettes ci-dessus 'labels' => $ labels, // nous n’aurons besoin que du titre, de l’éditeur visuel et des champs d’extrait de notre type de message 'supports' => array ('title' , 'editor', 'extrait',), // nous allons créer cette taxonomie dans la section suivante, mais nous devons lier notre type de publication à celui-ci 'taxonomies' => array ('tuts_faq_tax'), / / le rend public afin que nous puissions le voir dans le panneau d'administration et le montrer dans le front-end 'public' => true, // affichera l'élément de menu sous l'élément Pages 'menu_position' => 20, // affichera les archives, si vous n'avez pas besoin du shortcode 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // accrocher l'action 'init' add_action ('init', 'tuts_faq_cpt', 0);  if (! function_exists ('tuts_faq_tax')) // enregistre une fonction de taxonomie personnalisée tuts_faq_tax () // encore une fois, libellés du panneau d'administration $ labels = array ('nom' => _x ('Catégories de FAQ', 'Catégories de taxonomie', ' Nom général ',' tuts_faq '),' singular_name '=> _x (' Catégorie de FAQ ',' Nom singulier de taxonomie ',' tuts_faq '),' menu_name '=> __ (' Catégories de FAQ ',' tuts_faq '),' all_items '=> __ (' Tous les chats de la FAQ ',' tuts_faq '),' parent_item '=> __ (' FAQ du parent ',' tuts_faq '),' parent_item_colon '=> __ (' FAQ du parent Cat: ',' tuts_faq '),' new_item_name '=> __ (' Nouveau chat de FAQ ',' tuts_faq '),' add_new_item '=> __ (' Ajouter un nouveau chat de FAQ ',' tuts_faq '),' edit_item '=> __ (' Edit FAQ Cat ',' tuts_faq '),' update_item '=> __ (' Update FAQ Cat ',' tuts_faq '),' separat_items_with_commas '=> __ (' Eléments séparés par des virgules ',' tuts_faq '),' search_items '= > __ ('Search Items', 'tuts_faq'), 'add_or_remove_items' => __ ('Ajouter ou supprimer des éléments', 'tuts_faq'), 'Choose_from_most_used' => __ ('Choisissez parmi les éléments les plus utilisés', 'tuts_faq '),' not_found '=> __ (' Introuvable ',' tuts_faq '),); $ args = array (// utilise les étiquettes ci-dessus 'étiquettes' => $ étiquettes, // la taxonomie doit être hiérarchique afin que nous puissions l'afficher comme une section de catégorie 'hierarchical' => true, // encore une fois, rendre la taxonomie publique ( comme le type de message) 'public' => true,); // le contenu du tableau ci-dessous spécifie les types de publication auxquels la taxonomie doit être liée à register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // accrocher l'action 'init' add_action ('init', 'tuts_faq_tax', 0);  if (! function_exists ('tuts_faq_shortcode')) function tuts_faq_shortcode ($ atts) extract (shortcode_atts (array (// attribut de catégorie slug - par défaut, vide) 'catégorie' => ", // contenu complet ou attribut extrait - par défaut to full content 'extrait' => 'false',), $ atts)); $ output = "; // définit les arguments de la requête $ query_args = array (// affiche toutes les publications correspondant à cette requête 'posts_per_page' => -1, // affiche le type de publication personnalisé 'tuts_faq' 'post_type' => 'tuts_faq', // affiche la messages correspondant au slug de la catégorie FAQ spécifiée avec l'attribut du shortcode 'tax_query' => array (array ('taxonomy' => 'tuts_faq_tax', 'field' => 'slug', 'terms' => $ category,) , // indique à WordPress qu'il n'est pas nécessaire de compter le nombre total de lignes - cette petite astuce réduit la charge de la base de données si vous n'avez pas besoin de la pagination 'no_found_rows' => true,); // récupère les publications avec nos arguments de requête $ faq_posts = get_posts ($ query_args); $ output. = ''; // gère notre boucle personnalisée poureach ($ faq_posts en tant que $ post) setup_postdata ($ post); $ faq_item_title = get_the_title ($ post-> ID); $ faq_item_permalink = get_permalink ($ post-> ID); $ faq_item_content = get_the_content (); if ($ extrait == 'true') $ faq_item_content = get_the_excerpt (). '' __ ('Plus…', 'tuts_faq'). ''; $ output. = ''; $ output. = ''. $ faq_item_title. '
'; $ output. = ''. $ faq_item_content. '
'; $ output. = '
';  wp_reset_postdata (); $ output. = '
'; return $ output;  add_shortcode ('faq', 'tuts_faq_shortcode');  fonction tuts_faq_activate () tuts_faq_cpt (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'tuts_faq_activate'); fonction tuts_faq_deactivate () flush_rewrite_rules ();  register_deactivation_hook (__FILE__, 'tuts_faq_deactivate'); ?>

Marge d'amélioration

Mon client était satisfait des résultats lorsque je lui ai montré comment l'utiliser. Mais ici, nous pouvons étendre le code avec plus de fonctionnalités, comme…

Effet accordéon: Si vous souhaitez rendre vos sections de FAQ plus attrayantes avec certains effets de basculement, vous pouvez utiliser des plugins jQuery formidables. Si vous souhaitez utiliser l'interface utilisateur de jQuery, Shane Osbourne propose un didacticiel exceptionnel qui explique comment le faire..
Pagination: Si vous avez beaucoup de questions et de réponses pour une catégorie et que vous ne souhaitez pas afficher tous les éléments à la fois, vous pouvez limiter le nombre de publications en modifiant le posts_per_page paramètre dans la requête personnalisée de notre shortcode, et ajoutez le code requis pour les liens de pagination sous la ligne avec le wp_reset_postdata (); code. N'oubliez pas de retirer le 'no_found_rows' => true, ligne, bien que - la pagination ne fonctionnera pas si vous ne supprimez pas cette!
Question aléatoire: Supposons que vous souhaitiez afficher une question et une réponse aléatoires sur la page d'accueil et que vous souhaitiez qu'elle modifie chaque actualisation de la page. Tout ce que vous avez à faire est de vous diriger vers la requête personnalisée, de modifier le posts_per_page paramètre de -1 à 1 et ajouter une autre ligne avec le code 'orderby' => 'random', et vous êtes prêt à partir!

Conclusion

Voici comment créer un système de FAQ simple dans WordPress en utilisant des types de publication personnalisés, des taxonomies personnalisées et des codes courts. J'espère que vous avez apprécié ce tutoriel et que vous pourrez l'utiliser dans votre prochain projet. N'oubliez pas de partager l'article, si vous l'avez aimé!

Avez-vous des idées pour améliorer ce système de FAQ? Partagez vos commentaires ci-dessous!

Code