Comment créer une page de FAQ avec WordPress et des types de publication personnalisés

Dans le monde Web, une page de FAQ est créée spécifiquement pour les téléspectateurs / clients et contient des questions générales et leurs réponses respectives sur un produit ou un service particulier. Ce tutoriel détaille le processus de création d'une section FAQ dédiée dans le backend WordPress avec des types de publication personnalisés, ainsi que la façon de pimenter un peu la page réelle en utilisant jQuery et CSS..

Pour atteindre notre objectif, nous avons besoin d’un type de message FAQ WordPress personnalisé et dédié. De cette manière, nous pouvons utiliser le titre et le contenu de ces articles pour afficher la FAQ de manière innovante et conviviale..

---

Étape 1: Installation de WordPress

Pour commencer à créer la page FAQ, nous devons bien sûr d'abord installer WordPress sur notre hôte local. L'installation de WordPress est un jeu d'enfant. cependant, si vous débutez dans ce domaine, voici un guide qui détaille le processus.

Le modèle TwentyTen est le thème par défaut fourni avec WordPress..

Une fois que WordPress est prêt à fonctionner, nous devrions ensuite créer notre thème personnalisé, qui implémentera la fonctionnalité FAQ. Il existe différentes méthodes pour créer un thème personnalisé. Certains préfèrent créer un nouveau modèle blanc vierge, tandis que d'autres préfèrent créer des thèmes enfants du nouveau modèle TwentyTen. J'utilise le thème de Starker, d'Elliot Jay Stocks depuis longtemps maintenant; nous allons l'utiliser pour créer le nouveau thème de notre système de FAQ.

Téléchargez la dernière version du thème vierge de Starker et déplacez le dossier dans «wp-content / themes», situé dans le dossier d'installation de WordPress. Assurez-vous également de le renommer en FAQ. Ensuite, connectez-vous au panneau d'administration principal de WordPress, cliquez sur "Apparence / thèmes". Vous constaterez que le thème par défaut "TwentyTen" est activé, tandis que le nouveau thème, "Starkers", est répertorié en dessous. Activer le thème Starkers.

Lors de l'activation, prévisualisez le site pour vérifier que tout fonctionne correctement. Si tout se passe comme prévu, le site devrait ressembler un peu à l'image suivante:

---

Étape 2: Implémentation de la FAQ Custom Post

Pour mettre en œuvre le système de FAQ, nous allons créer un type d'article personnalisé uniquement à cette fin. Cela nous permettra de gérer toutes les FAQ en un seul endroit, surtout si la base de questions de la FAQ augmente avec le temps..

Pour implémenter une publication personnalisée, éditez le functions.php fichier situé dans le dossier de thème de la FAQ. Il contiendra un bon morceau de code, alors ne soyez pas effrayé et confus. Faites défiler vers le bas et ajoutez ce qui suit pour ajouter un nouveau message personnalisé. Nous commençons par créer une fonction personnalisée associée à l’initialisation (init) action.

 // AJOUT DE FAQ SUR LES TYPES DE POSTES PERSONNALISÉS add_action ('init', 'my_custom_init');

Cette fonction personnalisée contiendra toutes les métadonnées de la publication personnalisée et enregistrera également la publication personnalisée dans la base de données WordPress. Maintenant, dans la fonction, nous allons d’abord définir les étiquettes qui seront utilisées dans les panneaux d’administration d’arrière-plan. Par libellés, j'entends le texte qui va s'afficher dans l'interface utilisateur pour l'ajout, l'édition et la recherche de la FAQ dans le panneau d'administration..

 $ labels = array ('name' => _x ('FAQs', 'nom général du type de message'), 'nom_s singulier' => _x ('FAQ', 'nom singulier du type de message'), 'add_new' => _x ( 'Ajouter un nouveau', 'FAQ'), 'add_new_item' => __ ('Ajouter un nouveau FAQ'), 'edit_item' => __ ('Modifier la FAQ'), 'new_item' => __ ('Nouvelle FAQ'), 'view_item' => __ ('View FAQ'), 'search_items' => __ ('Search FAQs'), 'not_found' => __ ('Aucune FAQ trouvée'), 'not_found_in_trash' => __ ('Aucune FAQ trouvé dans la corbeille '),' parent_item_colon '=> ");

Après avoir défini les étiquettes, nous définissons ensuite les arguments tableau pour le register_post_type méthode. Ces arguments contiennent toutes les informations importantes qui définiront les composants de notre publication FAQ. Par exemple, aura-t-il une boîte à balises? un extrait de boîte? Nous passons le tableau d'étiquettes défini ci-dessus comme argument, ainsi.

 $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'type_fonction '=>' post ',' hierarchical '=> false,' menu_position '=> 5,' supports '=> array (' title ',' editor ',' thumbnail ',' custom-fields '));

Maintenant que les arguments sont définis, nous pouvons enregistrer le type de publication personnalisé à l'aide de la commande register_post_type méthode. Vous pouvez en apprendre plus sur cette méthode en consultant sa documentation dans le Codex WordPress.

 function my_custom_init () $ labels = array ('nom' => _x ('FAQs', 'nom général de type de message'), 'nom_s singulier' => _x ('FAQ', 'nom unique de type de message'), 'add_new '=> _x (' Ajouter un nouveau ',' FAQ '),' add_new_item '=> __ (' Ajouter un nouveau FAQ '),' edit_item '=> __ (' Modifier la FAQ '),' new_item '=> __ (' New FAQ '),' view_item '=> __ (' View FAQ '),' search_items '=> __ (' Rechercher dans les FAQ '),' not_found '=> __ (' Aucune FAQ trouvée '),' not_found_in_trash '=> __ ('Pas de FAQ trouvée dans la corbeille'), 'parent_item_colon' => "); $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' = > true, 'query_var' => true, 'rewrite' => true, 'capacite_type' => 'post', 'hierarchical' => false, 'menu_position' => 5, 'prend en charge' => array ('title' , 'éditeur', 'vignette', 'champs personnalisés')); register_post_type ('faq', $ args);

Consultez le panneau d’administration pour déterminer si le type de publication FAQ a bien été ajouté. J'espère que vous verrez l'onglet FAQ dans la barre latérale.

Messages factices aux FAQ

Continuez maintenant et ajoutez quelques FAQ de démonstration, car nous avons besoin de quelques données pour créer et tester le modèle. Le titre de chaque article de FAQ devrait être la question, et le contenu sera la réponse..

---

Étape 3: Codage du modèle

Jusqu'à présent, nous avons créé des publications personnalisées de FAQ et inséré un ensemble d'exemples de données. Nous allons maintenant coder le modèle pour afficher les FAQ, en conséquence. La logique principale que j'ai utilisée pour organiser le modèle est la suivante: utilisez l'identifiant unique de la FAQ pour lier la question aux réponses. Nous avons donc deux parties dans le modèle: la section des questions, énumérant tous les titres de la FAQ; et la section de réponse, qui affiche le contenu de chacune des FAQ.

Trouvez le header.php fichier, ouvrez-le, supprimez le div avec un identifiant de "accès" en bas, ainsi que le paragraphe qui contient la description du blog. Maintenant, ajoutez le code suivant.

Après avoir récupéré nos données de publication de FAQ, nous devons définir l’architecture de l’affichage des questions. Nous le ferons de la manière suivante. Tout le contenu est emballé dans un div avec un identifiant de "contenu".

 
  
FAQ
 
 
  
">
  
 
  
Pas trouvé
 
Désolé, aucune FAQ n'a encore été créée.
 

La partie la plus importante ici est où nous assignons le lien hypertexte avec une valeur de '#answer' et ajoutons le post ?? identifiant à cela. Nous pouvons utiliser cela pour accéder aux réponses, lorsque vous cliquez dessus.

Après avoir affiché toutes les questions, nous "rembobinons" nos publications pour revenir au début..

Maintenant, nous allons structurer la façon dont les réponses vont apparaître, juste en dessous des questions.

 body background-color: #bcbcbc;  .clear clear: les deux;  h1, h2, h3, h4, h5, h6 couleur: # 424242; font-family: Georgia, Arial, Helvetica, sans serif; text-shadow: #fff 1px 1px 0px;  h1 a color: # 424242; taille de la police: 50px; position: relative; en haut: 11px; poids de police: normal; z-index: 100;  h3 font-size: 20px; poids de police: gras; marge inférieure: 20 px;  h4 font-size: 14px; poids de police: gras; marge inférieure: 10px;  a color: # 3299bb; texte-décoration: aucun; -moz-transition: tous les 0.2s en douceur; -webkit-transition: tous les 0.2s sont faciles à installer; -o-transition: tous les 0.2s s'installent facilement; transition: tous les 0.2s s'installent facilement;  # page-wrap width: 750px; position: relative; marge: 0px auto 20px auto; rembourrage en haut: 50px;  #content background-color: # e9e9e9; remplissage: 64px 35px 22px; taille de police: 14px; font-family: Arial, Helvetica, sans serif; -webkit-box-shadow: rgba (0,0,0,1) 0px 0px 4px; -moz-box-shadow: rgba (0,0,0,1) 0px 0px 4px; box-shadow: rgba (0,0,0,1) 0px 0px 4px;  #content p text-align: justifier; taille de police: 12px; hauteur de ligne: 18px; marge inférieure: 10px;  #questions margin-bottom: 50px;  #questions li margin-bottom: 20px; couleur: # 3299bb; type de liste: disque; list-style-position: à l'intérieur;  #questions ul li a font-weight: bold;  #questions ul li a: hover color: # 00befd;  #questions ul li a: active color: # e78c03;  #answers ul li margin-bottom: 30px; clarifier les deux;  #footer padding-top: 5px; text-align: center;  #footer p color: # 424242;  #footer a color: # 424242; poids de police: gras; 

 .current-faq background-color: # 424242; couleur: # e9e9e9; rembourrage: 30px 30px 23px;  .current-faq h4 color: # e9e9e9; poids de police: gras; taille de police: 22px; text-shadow: # 000 1px 1px 0px;  .top-button border-top: 1px solid # 96d1f8; arrière-plan: # 2289a8; arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# 3299bb), à (# 2289a8)); arrière-plan: -moz-linear-gradient (haut, # 3299bb, # 2289a8); rembourrage: 4px 8px; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; bord-haut-gauche-rayon: 6px; -webkit-box-shadow: rgba (0,0,0,1) -1px -1px 0; -moz-box-shadow: rgba (0,0,0,1) -1px -1px 0; box-shadow: rgba (0,0,0,1) -1px -1px 0; text-shadow: rgba (0,0,0, .4) -1px -1px 0; couleur: #ffffff; taille de police: 11px; famille de polices: Georgia, serif; texte-décoration: aucun; alignement vertical: milieu; poids de police: gras; Flotter à droite; à droite: -30px; position: relative;  .top-button: hover border-top-color: # 0b93bd; arrière-plan: # 0b93bd; couleur: #ffffff;  .top-button: actif border-top-color: # e78c03; arrière-plan: # e78c03; 

 $ (document) .ready (fonction () $ ("div # questions ul a"). cliquez sur (fonction () var sélectionné = $ (cela) .attr ('href'); sélectionné + = '"' + selected + '"'; / * - Suppression de la classe Current et du bouton du haut des FAQ précédentes en cours --- * / $ ('. bouton du haut'). remove (); $ ('. current-faq'). removeClass (); $ .scrollTo (selected, 400, function () $ (sélectionné) .addClass ('current-faq', 400, function () $ (this) .append ('TOP');); ); return false;);

 $ ('. top-button'). live ('clic', fonction () $ (this) .remove (); $ ('. current-faq'). removeClass ('current-faq', 400, fonction () $ .scrollTo ('0px', 800);); return false;));