Créer une page de FAQ en utilisant deux boucles

Les pages de FAQ sont assez courantes sur les sites Web, en particulier les sites de commerce électronique ou les sites proposant des produits ou des services pour lesquels les clients potentiels sont susceptibles de s'interroger. La création d'une page de FAQ peut permettre de gagner du temps et de l'argent en fournissant des réponses sans que les clients aient à envoyer de courrier électronique ou de téléphoner au propriétaire du site, et peut contribuer à augmenter les ventes..

Mais une simple page d'archive répertoriant toutes les questions avec leurs réponses ci-dessous risque d'être trop compliquée. Après tout, les visiteurs ne peuvent pas voir toutes les questions et peuvent hésiter à faire défiler de nombreuses questions qui ne les intéressent pas, surtout si les réponses sont longues ou si elles sont nombreuses..

La réponse simple consiste à diviser la page en deux parties: les questions en haut et les réponses en bas, avec une possibilité pour les visiteurs de cliquer sur chaque question pour accéder aux réponses. Heureusement, cela est très simple à faire dans WordPress en ajoutant simplement une seconde boucle à votre page d'archive.

Dans ce tutoriel, je vais vous montrer comment faire cela en quatre étapes:

1. Créez un thème qui sera un thème enfant de vingt-quatre ans
2. Enregistrez un type de FAQ et ajoutez-y des données
3. Créer un modèle d'archive pour le type d'article FAQ, basé sur le modèle d'index du thème parent
4. Ajoutez deux boucles au modèle: une pour les questions et une pour les réponses, avec un lien de l'une à l'autre

Ce dont vous aurez besoin

Pour compléter ce tutoriel, vous aurez besoin de:

• une installation de développement de WordPress
• un thème de travail (vous pouvez travailler avec votre propre thème ou vous pouvez utiliser un thème parent comme je l'ai fait)
• un éditeur de code

1. Créer le thème

Comme ce didacticiel implique la création d’un modèle d’archive, vous devrez l’ajouter à un thème. Je crée un nouveau thème qui est un enfant de vingt-quatre ans, mais vous souhaiterez peut-être ajouter le fichier de modèle à votre thème existant (et les fonctions de mon fichier de fonctions à votre fichier de fonctions existant).

Pour créer mon thème enfant, je crée un fichier appelé style.css et ajoutez ce qui suit:

/ * Nom du thème: WPTutsPlus Création d'une archive de FAQ à l'aide de deux boucles URI du thème: Deux boucles Code: http://rachelmccollin.co.uk/wptutsplus-faq-archive-two-loops/ Description: Thème prenant en charge le didacticiel WPTutsPlus sur la création d'une archive faq personnalisée. Thème enfant pour le thème Vingt Quatorze. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: vingt-quatre ans Version: 1.0 * / @import url ("… /twentyfourteen/style.css");

J'ai maintenant un thème enfant qui travaille.

2. Enregistrement du type de message

L'étape suivante consiste à créer le type de message FAQ. Créez un fichier appelé functions.php dans votre dossier de thème et ajoutez le code suivant. Si vous travaillez avec un thème existant qui contient déjà un fichier de fonctions, ajoutez simplement le code correspondant:

 array ('name' => 'FAQs', 'singular_name' => 'FAQ'), 'has_archive' => true, 'public' => true, 'hierarchical' => true, 'prend en charge' => array (' titre ',' éditeur ',' extrait ',' champs personnalisés ',' miniature ',' attributs de page '),' exclude_from_search '=> true,' type de capacité '=>' post ',' rewrite '=> tableau ('slug' => 'faqs'),));  add_action ('init', 'wptp_create_faq_post_type'); ?>

Cela crée un nouveau type de message appelé 'FAQ', en utilisant le register_post_type () une fonction. Notez que j'ai utilisé le 'récrire' argument pour changer le slug quand le visiteur est sur la page d'archive, donc au lieu de l'url de cette page se terminant par /FAQ/ ça finira par / faqs /.

La prochaine étape consiste à créer des données pour ma FAQ. Vous pouvez le voir dans le tableau de bord de la FAQ ci-dessous:

3. Création du fichier de modèle d'archive

Vous devez maintenant créer le fichier de modèle qui affichera votre FAQ. Créez un nouveau fichier dans votre dossier de thème appelé archive-faq.php. Comme mon thème est un thème enfant de vingt-quatre ans, je vais ajouter le code wrapper à mon fichier de modèle à partir de ce thème. index.php fichier, comme indiqué ci-dessous. Si vous utilisez votre propre thème, ajoutez votre propre code wrapper. Il s’agit essentiellement de tout le code, à l’exception de la boucle, que vous n’ajoutez pas encore car vous allez créer deux boucles personnalisées à l’étape suivante..

 
 
 
 
 
  
 
Cela vous donne le fichier de base auquel vous allez ajouter vos boucles.
4. Créer deux boucles pour la FAQ
Votre fichier de modèle comprendra deux boucles: l'une énumérant les titres de chaque FAQ dans un lien vers sa réponse, qui sera sortie par la deuxième boucle. Vous pouvez le faire en répétant et en modifiant la boucle standard WordPress mais vous devez utiliser rewind_posts () après la première boucle pour que WordPress revienne au début pour la deuxième boucle.
La première boucle: titres et liens de FAQ
Tout d’abord, créez la boucle pour afficher les titres de chaque FAQ. Ajouter ce qui suit sous l'ouverture 
 étiquette:
 
Foire aux questions - cliquez pour obtenir des réponses
 
  
> "title =""rel =" signet ">
  
Cela fait ce qui suit:
 
affiche un titre dans un 
 élément
 
commence la boucle
 
dans une liste non ordonnée, affiche le titre si chaque FAQ dans un élément de la liste, en utilisant le titre() 
 
enveloppe chaque titre dans un lien vers #poster-, qui sera l'ID pour chaque poste dans votre deuxième boucle
 
termine la boucle
 
Remarque: dans l'exemple ci-dessus, je n'ai pas vérifié si ma requête contient des publications, mais vous pouvez vouloir envelopper le tout dans une vérification. if (have_posts ()) afin que votre modèle d'archive ne génère pas d'en-tête avec rien en dessous.
La deuxième boucle: titres et réponses à la FAQ
La deuxième boucle affichera à nouveau les titres (après tout, vos visiteurs voudront savoir à quelle question répond à chaque fois) avec les réponses, en utilisant le titre() et le contenu().
Sous votre première boucle, ajoutez ce qui suit:
   
> 
"title =""rel =" signet ">
 
  
 
 
Cela commence par rembobiner la boucle puis lance une autre boucle pour afficher:
 
Un élément d'article pour joindre chaque FAQ
 
Le titre de la FAQ dans un 
 élément, avec #poster- comme ID, ce qui garantit que le lien dans la première boucle fonctionne.
 
Le contenu de la FAQ.
 
Votre fichier de modèle d'archive est maintenant complet. Enregistrez votre travail et testez-le. Vous devriez avoir une page à yoursite.com/faqs qui ressemble un peu à ça:
Résumé
C'est ainsi que vous créez une page de FAQ avec vos questions et réponses séparées en deux boucles. L'intérêt de cette technique réside dans le fait que vous utilisez simplement la boucle standard WordPress et que vous ne personnalisez pas cette boucle, vous n'avez pas à créer de requête personnalisée..
Ressources utiles
 
La hiérarchie des modèles qui guide le fonctionnement des modèles d'archive
 
La boucle
 
La fonction register_post_type ()
 



		
			
	   
	




Code