Comment créer un plugin FAQ simple pour WordPress

Article écrit par:
  • WordPress
  • Mise à jour: février 09, 2017

Nous avons vu auparavant beaucoup de conseils et outils de blogging. Eh bien, aujourd’hui, nous allons apprendre à créer un bon outil pour votre blog: un plug-in de page de FAQ. Mais le plus important n’est pas seulement le plugin lui-même, mais ce que vous pouvez faire avec ce principe. Vous apprendrez à stocker tout type de données sur votre site WP et à l'intégrer à des bibliothèques externes (telles que jQuery UI) afin de créer des composants personnalisés pour votre site. Commençons!

L'idée, démo et téléchargement

demo

Notre objectif ici est de créer un plugin qui peut être utilisé pour beaucoup de choses, mais convient plutôt bien pour les pages de FAQ.

Mais à part cela, notre principale réalisation sera la compréhension de WordPress types de messages personnalisés, codes courts, interactions avec le plug-in externe JS / jQuery. Avec cette idée, vous pourriez créer beaucoup de choses basées sur d'autres plugins fous que vous pourriez trouver là-bas, ceci n'est que le point de départ pour vous, cher Padawan.

So ici vous pouvez trouver la démo de l'API jQuery pour le composant que nous allons utiliser - mais le truc vraiment cool est le code qui utilise pour générer ce composant (PHP).

Oh, et bien sûr vous pouvez trouver le fichiers plugin à télécharger ici ainsi vous pouvez simplement installer sur votre site WP.

Réchauffement - fichier de plug-in et type de message personnalisé

Tout d'abord, nous devons créer un type de publication personnalisé pour stocker nos données.

Les types de publication personnalisés sont une partie importante de la magie de WP. Ils vous permettent de créer un nouveau type de données (type publications, pages, pièces jointes, etc.) afin de pouvoir être appelé et manipulé à l'aide des fonctions de WP. Cela peut sembler simple pour les débutants, mais seuls les programmeurs PHP les plus anciens (est-ce toujours une chose?) Savent combien il était difficile de se connecter et de stocker des données dans votre base de données. Laissez seul créer dynamiquement de nouveaux types de données, ceci est subtil mais permet une grande flexibilité dans notre code.

Pour cela, nous avons besoin d’un plugin, mais vous connaissez probablement déjà ce concept. Les plugins sont comme des blocs Lego pour WordPress, ils ajoutent ou transforment la fonctionnalité actuelle en utilisant du code qui peut facilement être branché (duh!) Ou également débranché si vous le souhaitez.

Pour créer un plugin de manière à ce que WP le reconnaisse, vous avez besoin de choses 2:

  1. Créez un fichier dans votre wp-content / plugins /
  2. Ajoutez des métadonnées au début de ce fichier pour que WP puisse comprendre de quoi il s'agit

Gardez à l'esprit que le nom du fichier doit être unique. Ainsi, lorsque quelqu'un installera votre plugin (même vous-même), il n'y aura aucun conflit avec les plugins actuels. Dans le cas d’une meilleure organisation, nous allons ajouter un nouveau dossier avec le nom faq-whsr et à l’intérieur de celui-ci un fichier nommé faq-whsr.php.

Maintenant pour le metada, ajoutez quelque chose comme ceci au début de votre fichier de plugins (juste après <? Php):

meta_01

Ce qui signifie:

  • Nom du plugin: Le joli nom qui sera affiché dans votre interface wp-admin> plugins
  • Plugin URI: Si vous souhaitez ajouter un lien vers la page de votre plugin (docs, exemples, page de vente)
  • Description: Celui-ci est le petit paragraphe affiché dans votre interface wp-admin> plugins. Restez simple pour que les utilisateurs se souviennent à quoi ça sert
  • Author / Author URI: La personne / société qui a créé le plugin et un lien pour les crédits.
  • Licence: ainsi les utilisateurs sauront ce qu’ils peuvent / ne peuvent pas faire avec votre plugin

01-plugin créé

Ok, nous avons maintenant créé notre plugin, ajouté quelques métadonnées pertinentes. Dès que vous enregistrez votre fichier de plugin, vous devriez pouvoir le voir dans votre interface wp-admin

Actionnons-le et voyons ce qui se passe.

Attends rien? Eh bien, c'est une bonne chose, si quelque chose n'allait pas maintenant, vous verriez une erreur. Passons maintenant à la création de notre type de message personnalisé.

Dans notre cas, le CPT est un élément de la FAQ, mais vous pouvez créer des livres, des vidéos, des témoignages, etc. La chose importante à garder à l'esprit est la suivante: les noms de fonctions doivent être uniques. Répétez avec moi maintenant: les noms de fonctions doivent être uniques, les noms de fonctions doivent être uniques. Je l'ai? Bien, cela vous évitera bien des problèmes jusqu'à ce que nous puissions utiliser la POO (peut-être dans le prochain tutoriel).

La magie est faite avec ce code:

cpt

Et voici ce que signifient les parties pertinentes:

  • $ labels - est un tableau avec les libellés et le texte de différentes sections de votre zone wp-admin. Donc, WP saura comment appeler nos articles
  • prend en charge - celle-ci indique ce que vous pouvez voir dans wp-admin> FAQ> nouvel écran. Dans notre cas, nous aurons le titre, l'éditeur (la zone de contenu principale), l'auteur, les révisions et les champs personnalisés (au cas où vous les voudriez).
  • taxonomies - vous indiquez à WP quelles taxonomies sont autorisées (catégories, étiquettes ou taxonomies personnalisées)
  • register_post_type ('faq_whsr', $ args) - cela indique à WP “Hey, créez un nouveau type de publication personnalisé avec l'ID sous la forme faq_whsr en utilisant les arguments de $ args”.

admin-faq

Enregistrez-le et retenez votre souffle. Vous devriez maintenant voir une nouvelle section dans votre menu principal de wp-admin

Attendez, c'est ça? Ouais. Cet extrait crée l'ensemble de la fonctionnalité CPT. Si vous ne trouvez pas ça cool, attendez que ça refroidisse dans la section suivante.

Avant de quitter wp-admin, ajoutez des données factices (quelques FAQ avec au moins des catégories 2).

Front-End - interaction WP x jQuery

Maintenant, il est enfin temps de voir quelque chose et nous allons utiliser Elément Accordéon jQuery UI pour ça.

jQuery UI a à peu près les mêmes avantages que jQuery lui-même:

  • Beaucoup de développeurs y travaillent
  • Code multi-navigateur et compatible mobile
  • Bien documenté
  • Joue bien avec WP (WP lui-même les utilise)

La question est maintenant: comment l'appelons-nous?

Il existe des approches 2 pour cela:

  1. Les mauvaises balises <script> / <style> pures dans votre wp_head
  2. La belle wp_enqueue

Nous ne perdrons pas trop de temps avec la mauvaise approche aujourd’hui, mais la bonne en dit essentiellement à WP "Hé mon pote, nous aurons besoin de l'interface utilisateur de jQuery à un moment donné dans notre code, veuillez l'inclure dans la page". De cette façon, WP peut vérifier si quelqu'un d'autre l'a déjà inclus ou si une version différente de celle-ci a été incluse et éviter ainsi beaucoup de problèmes avec les bibliothèques dupliquées. Ok, comment traduire cette belle discussion en code?

Utilisation de la fonction de mise en file d'attente:

enqueue_02

Le Shortcode

Et maintenant nous revenons à l'admin wp. Nous avons les éléments de la FAQ, et nous avons la bibliothèque pour classer les éléments comme nous le souhaitons, que manque-t-il? Eh bien, nous devons appeler les articles!

Nous avons beaucoup d'options pour cela, mais le plus simple pour ce cas est de créer un shortcode. Le shortcode est quelque chose que vous ajoutez dans votre champ de contenu (pour les pages, les publications, les CPT, etc.) et WP recherchera une fonction à exécuter. Il existe des types de codes courts 2:

  1. [self-enclosing] - Comme les balises <hr /> ou <br /> ce genre de shortcode appelle simplement une fonction à un moment donné - ceci est notre type
  2. [wrapped] Content [/ wrapped] - Celui-ci ressemble aux balises <p> </ p> ou <div> </ div> et peut en fait transformer son contenu ou utiliser le contenu en tant qu'arguments.

Voyons comment cela fonctionne alors. Créez une nouvelle page dans votre wp-admin et ajoutez ce code ici:

[faq-whsr]

Enregistrez et visitez cette page et voyez ce qui se passe…

Je plaisante, ça ne fera rien, n'est-ce pas? Eh bien, c’est parce que nous n’avons pas encore créé de fonction.

Ajoutez ceci dans votre fichier de plugin:

shortcode_02

Maintenant, actualisez votre page et je vous promets que quelque chose de vraiment cool va se passer.

Cool hein? Maintenant, vous pouvez voir que cela fonctionne et que le ciel est la limite pour vous maintenant. Ce code ne fait que dire à WP qu'il existe un shortcode appelé [faq-whsr] et s'il le trouve, WP doit exécuter une fonction à cet endroit de la page.

Dans notre cas, nous aurons besoin de cette structure pour que le panneau de l'interface utilisateur de jQuery soit créé:

api_02

Et pour cela nous allons créer un WP Query, chargez notre FAQ et son contenu. Remplacez la fonction shortcode par celle-ci:

shortcode-basic_02

Ok, maintenant vos questions de la FAQ seront appelées. Ce que nous avons fait, c'est d'appeler wp_query pour appeler notre type de publication personnalisé, puis de le transférer dans le code de retour shortcode afin que WP les affiche toutes en respectant la structure souhaitée.

C'est bien mais il manque quelque chose, non? Qu'en est-il des options là-bas? Nous pouvons ajouter des options pour un shortcode. Voyons comment créer quelques arguments WP_Query dans notre shortcode:

shortcode-final_02

De cette façon, vous pouvez appeler des éléments en utilisant les arguments suivants (vous pouvez en combiner autant que vous le souhaitez):

  • cat - ID de catégorie (plusieurs ajoutés en tant que tableau) [faq-whsr cat = 1]
  • category_name - nom de la catégorie [faq-whsr category_name = ”food”]
  • order - ASC ou DESC (DESC est la valeur par défaut) [faq-whsr order = ”ASC”]
  • orderby - modifie les critères de commande des articles [faq-whsr orderby = ”title”]
  • posts_per_page - change le nombre d'éléments chargés [faq-whsr posts_per_page = 5]

Mais comme je l'ai dit, le ciel est la limite pour vous mon ami. Voici quelques options pour WP_Query que vous pouvez implémenter et utiliser:

  • Auteur
  • Catégorie (ajout d'options d'exclusion avec not_in)
  • Recherche (cool si vous voulez donner aux utilisateurs la possibilité de rechercher à travers eux)
  • Champ personnalisé (puisque les éléments de la FAQ en contiennent, vous pouvez les utiliser pour charger des éléments avec des champs et des valeurs personnalisés spécifiques)

Maintenant c'est ton tour

Ceci est juste un point de départ pour vous, comme vous pouvez le voir. Nous pouvons tous apprendre beaucoup d'autres choses intéressantes pour améliorer ce plugin simple, voici quelques suggestions pour vous permettre de creuser plus profondément:

  • Responsive design
  • Création de widget
  • Plugin activer / désactiver les hooks
  • Internationalisation
  • POO
  • Mise en file d'attente seulement si nécessaire (pour certaines pages)

N'oubliez pas de laisser vos pensées dans les commentaires! Et voici notre défi pour vous: est-il possible d'appliquer une option «d'élément par défaut» pour le shortcode (ainsi, lorsque la page sera chargée, un autre élément sera ouvert, ce n'est pas le premier)? Comment le ferais-tu?

A propos de Rochester Oliveira

Je suis un concepteur de sites Web et un entrepreneur de Itajubá (MG), Brésil. J'aime écrire sur des sujets obscurs et faire des trucs sympas.