Le guide ultime pour créer un plugin WordPress

Le deactivate() , qui est appelée lorsque le plugin est désactivé, récupère la page en utilisant le get_option() , supprime la page correspondante de la base de données à l'aide de wp_delete_post() et supprime l'ID enregistré du tableau des options à l'aide de delete_option() .

Si nous activons notre plugin et accédons aux pages, nous devrions voir une page intitulée «Saved» avec un shortcode.

Si nous désactivions le plugin, cette page serait supprimée.

Puisque nous avons utilisé true comme argument dans notre wp_delete_post() méthode, cette page n'ira pas dans la corbeille, mais sera supprimée complètement.

Créez une page de paramètres de plugin.

Nous pouvons créer notre page de paramètres dans le admin / class-toptal-save-admin.php fichier, et la première chose à faire dans ce fichier est de supprimer ou de commenter l'appel à wp_enqueue_style() à l'intérieur du enqueue_styles() fonction et appel à wp_enqueue_script() à l'intérieur du enqueue_scripts() si nous n’ajouterons pas de CSS / JS à l’écran d’administration.

Cependant, si nous allons ajouter du style, je vous recommande de charger ces fichiers uniquement dans la page des paramètres de notre plugin, plutôt que sur toutes les pages d'administration de WordPress. Nous pouvons le faire en plaçant le code suivant directement au-dessus des lignes que nous aurions commentées:

Si vous vous demandez où ai-je obtenu cela ‘tools_page_toptal-save’ une pièce de.

Eh bien, voici le truc, je sais que je vais créer une page de paramètres avec un slug toptal-save, et je sais aussi que je vais l'ajouter aux outils ( tools.php ) écran. Donc, en mettant ces deux ensemble, nous pouvons dire que la valeur de la variable $hook va être ‘tools_page_toptal-save’ - une concaténation des deux valeurs.

Si nous ne sommes pas dans la page des paramètres de notre plugin, nous utilisons return pour terminer immédiatement l'exécution de la fonction dans laquelle nous nous trouvons.

Puisque je n'ajouterai aucun style personnalisé à mon écran d'administration - parce que je veux que l'écran de mon plugin ressemble à l'écran natif de WordPress - je n'ajouterai pas ce code.

Maintenant, nous pouvons procéder à la création de notre page de paramètres.

Nous allons commencer par ajouter une méthode simple à ApeeScape_Save_Admin classe qui appellera le add_submenu_page() fonction.

C’est une poignée d’arguments que nous transmettons au add_submenu_page() fonction. Voici ce que chacun d'eux signifie.

• Limace parent: Le nom du slug pour le menu parent (ou le nom de fichier d'une page d'administration WordPress standard). Vous pouvez voir la liste complète des slugs parents Ici .

• Titre de la page: Le texte à afficher dans les balises de titre de la page lorsque le menu est sélectionné.

• Titre du menu: Le texte à utiliser pour le titre du menu.

• Aptitude: La capacité requise par l'utilisateur pour que ce menu lui soit affiché. Nous avons utilisé «manage_options» qui permet d'accéder aux options du panneau d'administration. Vous pouvez en savoir plus sur les rôles et les capacités sur Ici .

• Limace de menu: Le nom du slug pour faire référence à ce menu.

• Fonction appelable: La fonction à appeler pour afficher le contenu de cette page. Puisque nous avons défini le nom de notre fonction appelable, nous devons la créer, mais avant de le faire, nous avons utilisé $this pour référencer une instance d'une classe à partir d'elle-même. Voici ce que la documentation PHP en dit:

La pseudo-variable $ this est disponible lorsqu'une méthode est appelée à partir d'un contexte d'objet. $ ceci est une référence à l'objet appelant (généralement l'objet auquel appartient la méthode, mais éventuellement un autre objet, si la méthode est appelée statiquement depuis le contexte d'un objet secondaire).

Ensuite, nous ajouterons une autre méthode à la classe:

Cette fonction appelable inclut notre modèle qui va afficher notre page de paramètres. Vous pouvez voir que nous référençons un fichier situé dans le admin / partiels appelé toptal-save-admin-display.php .

Désormais, si vous accédez à Outils, vous ne verrez pas cet écran. Pourquoi? Parce que nous n’avons pas accroché notre register_admin_page() méthode à la admin_menu crochet.

Nous pouvons le faire en ouvrant notre inclut / class-toptal-save.php fichier et en ajoutant ce morceau de code dans le define_admin_hooks() méthode, juste en dessous où le $plugin_admin = new ApeeScape_Save_Admin( $this->get_plugin_name(), $this->get_version() ); une partie est.

Ne vous inquiétez pas des appels à add_action() car c'est quelque chose que nous allons couvrir plus tard.

Pour le moment, ouvrez simplement la page Outils et vous pourrez voir la page d’ApeeScape Save. Si nous l’ouvrons, cela fonctionne, mais nous voyons un écran vide car il n’y a rien dessus.

Nous progressons, mais bon, nous devons afficher certains paramètres ici, alors faisons-le.

Nous allons commencer à créer les champs, et c'est quelque chose que nous allons faire avec l'aide de API de paramètres WordPress .

Si vous ne le connaissez pas, cela nous permet de créer des champs de formulaire que nous pouvons utiliser pour enregistrer nos données.

À l'intérieur du register_settings() fonction, nous pouvons ajouter et configurer tous les champs. Vous pouvez trouver l'implémentation complète de la fonction Ici . Nous avons utilisé ce qui suit dans la fonction ci-dessus:

• register_setting() : Enregistre un paramètre et son rappel de désinfection.
• add_settings_section() : Ajoute une nouvelle section à une page de paramètres.
• add_settings_field() : Ajoute un nouveau champ à une section d'une page de paramètres.

Chaque fois que nous utilisions l'une de ces trois fonctions, un rappel de nettoyage était fourni. Cela permet aux données d'être nettoyées et, s'il s'agit d'un champ, d'afficher l'élément HTML approprié (case à cocher, radio, entrée, etc.).

De plus, nous avons transmis un tableau de données à ces rappels, tels que label_for, description ou default si nécessaire.

Maintenant, nous pouvons créer ces rappels de nettoyage. Vous pouvez trouver le code de ces rappels Ici .

Tout va bien, cependant, nous devons accrocher les champs dans admin_init crochet et montrez-leur.

Nous utiliserons add_action qui est un crochet que le cœur de WordPress démarre à des points spécifiques lors de l'exécution, ou lorsqu'un événement spécifique se produit. admin_init est déclenché avant tout autre hook lorsqu'un utilisateur accède à la zone d'administration.

Tout d'abord, nous devons ajouter une action dans inclut / class-toptal-save.php fichier.

Ensuite, dans admin / partials / topal-save-admin-display.php , nous devons fournir une vue pour la zone d'administration de notre plugin:

Le settings_fields() La fonction est utilisée pour afficher les champs nonce, action et option_page pour une page de paramètres.

Il est suivi de do_settings_sections() qui imprime toutes les sections de paramètres ajoutées à une page de paramètres particulière.

Enfin, un bouton d'envoi est ajouté à l'aide du texte fourni et des classes appropriées à l'aide de submit_button() fonction.

Maintenant, si nous jetons un œil à notre page, cela ressemblera à ceci:

C'est tout ce que nous avons à faire dans notre zone d'administration. Commençons à travailler sur la partie publique de notre plugin.

Créez la fonctionnalité du plugin.

Voici la partie intéressante. Nous devons créer plusieurs fonctions pour séparer nos fonctionnalités:

• Une fonction qui affichera le bouton «Enregistrer l'élément». Cela doit vérifier si l'utilisateur actuel a déjà enregistré cet élément ou non, en fonction de cela, nous afficherons un texte et une couleur différents.
• Une fonction qui enregistrera / désenregistrera un élément (AJAX).
• Une fonction qui affichera tous les éléments enregistrés.
• Une fonction qui générera nos shortcodes.

Commençons donc par afficher le bouton. Nous ferons tout cela en public / class-toptal-save-public.php .

Ce faisant, nous devrons créer des fonctions d'assistance supplémentaires pour prendre en charge certaines choses telles que:

• Créer un nom de cookie unique pour le site Web
• Créer un cookie
• Obtenir la valeur du cookie
• Obtenir l'état de l'adhésion à partir des paramètres

Le code de ces fonctions d'assistance peut être trouvé Ici .

Le get_unique_cookie_name() Cette fonction nous aidera à générer un nom de cookie unique à partir de l'URL du site Web, du nom du site Web et de notre suffixe personnalisé. Ceci afin que le nom du cookie généré ne soit pas en conflit lorsqu'il est utilisé dans plusieurs sites WordPress sous le même domaine.

Le toptal_set_cookie() et toptal_get_cookie() fonctions créeront et obtiendront respectivement la valeur de nos cookies.

Le get_user_status() La fonction obtiendra le statut de la case à cocher de notre adhésion dans les paramètres (renvoyant 1 lorsqu'elle est cochée, 0 sinon).

Maintenant, la partie juteuse, créant la fonction qui sera chargée d'afficher le bouton de sauvegarde. L'implémentation de notre show_save_button() fonction peut être trouvée Ici . Et nous avons utilisé quelques nouvelles fonctions de l'API WordPress ici:

• get_queried_object_id() : Récupère l'ID de l'objet actuellement interrogé.
• is_user_logged_in() : Vérifie si le visiteur actuel est un utilisateur connecté.
• get_user_meta() : Récupère le champ de métadonnées utilisateur pour un utilisateur.
• wp_create_nonce() : Crée un jeton cryptographique lié à une action, un utilisateur, une session utilisateur et une fenêtre de temps spécifiques.

Maintenant, créons une fonction qui ajoutera notre bouton à la fin du contenu. Ici, nous avons deux exigences clés.

1. Assurez-vous que le bouton n'apparaît que sur le (s) type (s) de publication sélectionné (s) dans les paramètres.
2. Assurez-vous que la case à cocher pour ajouter le bouton est cochée.

Maintenant, nous devons accrocher cette fonction au the_content crochet.

Pourquoi? Parce que the_content est utilisé pour filtrer le contenu du message après qu'il est extrait de la base de données et avant qu'il ne soit imprimé à l'écran.

Avec cela, nous pouvons ajouter notre bouton d'enregistrement n'importe où dans le contenu. On peut faire ça en inclut / class-toptal-save.php dans define_public_hooks() méthode, comme ceci:

Maintenant, si vous accédez aux paramètres du plug-in, vérifiez les articles et les pages, et ajoutez le bouton, nous verrons sur n'importe quel article de blog que le bouton est affiché.

À partir de là, nous devrions continuer et styliser ce bouton.

On peut faire ça en public / css / toptal-save-public.css . Trouvez le fichier CSS mis à jour Ici .

Maintenant, créons une fonction qui enregistrera réellement l'élément.

Nous allons le faire dans notre classe publique, et nous allons le faire avec AJAX. Le code est Ici .

Accrochez cette fonction à WordPress AJAX.

Vous pouvez en savoir plus sur AJAX dans les plugins Ici .

Avant de terminer cette partie, nous devons faire deux autres choses.

1. Localisez un script.
2. Créez notre appel AJAX dans public / js / toptal-save-public.js

La localisation d'un script se fera via le wp_localize_script() fonction à l'intérieur de notre public/class-toptal-save-public.php fichier.

En outre, pendant que nous y sommes, nous veillerons également à mettre en œuvre l'affichage des fichiers CSS et JS en fonction de l'état de notre case à cocher 'utiliser notre style'.

Maintenant, nous pouvons poursuivre notre appel AJAX.

Notre script frontal recherchera les éléments avec la classe «toptal-save-button».

Un gestionnaire de clics sera enregistré sur tous les éléments correspondants, ce qui effectuera l'appel d'API et mettra à jour l'interface utilisateur en conséquence.

Vous pouvez trouver le code Ici et le CSS nécessaire Ici .

J'ai également ajouté une fonction qui gérera la notification lorsque l'élément est ajouté.

Voici comment tout cela fonctionne.

Ensuite, nous devons créer un shortcode que les utilisateurs peuvent insérer où ils le souhaitent.

On peut faire ça en public / class-toptal-save-public.php :

Nous devons également l'enregistrer, car la fonction en elle-même ne fera rien.

Dans inclut / class-toptal-save.php ajoutez ce code après cette ligne où nous avons ajouté notre bouton.

Maintenant, cela ne fonctionnera pas car nous n'avons pas encore chargé le add_shortcode() méthode dans notre classe de chargeur.

Ici est le code complet du inclut / class-toptal-save-loader.php fichier.

J'ai ajouté une nouvelle variable protégée appelée shortcodes, puis dans la méthode constructeur de la classe, je l'ai transformée en tableau.

À la ligne 104, j’ai ajouté une fonction qui sera responsable de la création de nos codes courts; vous pouvez voir que c'est à peu près la même chose que la fonction au-dessus (add_filter()), sauf que j'ai changé le 'filtre' en 'shortcode' et 'filters' en 'shortcodes'.

Aussi, dans le run() méthode, j'en ai ajouté une autre foreach qui passera par notre tableau de codes courts et les enregistrera avec WordPress.

C'était facile.

N'oubliez pas qu'au début, nous utilisions un shortcode [toptal-saved], alors créons une méthode qui affichera tous nos éléments enregistrés.

Trouvez le code complet de cette méthode Ici .

Maintenant, comme toujours, nous devons enregistrer le shortcode dans inclut / class-toptal-save.php :

Nous avons encore deux choses à faire ici.

1. Donnez du style à notre page d'éléments enregistrés.
2. Assurez-vous que lorsqu'un utilisateur supprime un élément enregistré, il disparaît de la page des éléments enregistrés.

Pour la première tâche, vous pouvez trouver le code CSS nécessaire Ici .

Pour le second, cela implique un peu de scripting frontal.

Le code JavaScript complet pour cela peut être trouvé Ici .

Comme vous le verrez à la ligne 52, j'ai recherché le div avec une classe 'toptal-saved-item'.

Ensuite, aux lignes 70-75, nous vérifions si cette div parent a une classe toptal-saved-item.

Si c'est le cas, nous masquons notre élément avec fadeOut puis, une fois l'animation terminée, nous supprimons complètement l'élément de l'écran.

Maintenant, passons à la partie la plus difficile: le rendre modulaire.

Rendez le plugin modulaire.

La définition de base d'un plugin modulaire est:

Le code extensible ou modulaire est un code qui peut être modifié, interagi avec, ajouté ou manipulé - le tout sans jamais modifier la base de code de base.

Maintenant, en ce qui concerne ce plugin, je voudrais m'assurer que les utilisateurs peuvent modifier le HTML à l'intérieur de l'élément enregistré sur la page des éléments enregistrés.

Nous allons donc devoir apporter quelques modifications à notre register_saved_shortcode() méthode:

• Changer html_to_return à inner_html_to_return partout où nous voulons que les utilisateurs puissent changer le HTML. Assurez-vous que la première déclaration de notre inner_html_to_return variable a «=» sans point qui la précède.
• Utilisez le apply_filters() méthode pour enregistrer notre filtre.

Avec ces deux changements, vous devriez vous retrouver avec quelque chose comme cette .

Désormais, si les utilisateurs souhaitent interagir avec notre code, ils peuvent ajouter quelque chose comme ceci dans leur functions.php fichier: