Le guide ultime pour créer un plugin WordPress

Les plugins sont une partie essentielle des sites Web WordPress qui nécessitent des fonctionnalités spécifiques.

Alors que le référentiel WordPress officiel propose plus de 45 000 plugins parmi lesquels vous pouvez choisir, beaucoup de ces plugins ratent la cible.

Ce n'est pas parce qu'un plugin est dans le référentiel qu'il n'entravera pas ses performances ou ne compromettra pas sa sécurité.

Alors que peux-tu faire? Eh bien, vous pouvez créer le vôtre.

Construire un excellent plugin WordPress commence par une planification minutieuse.

Que vous en construisiez un à partir de zéro ou que vous vous basiez sur un passe-partout, il est absolument essentiel de suivre les meilleures pratiques bien documentées.

Dans ce didacticiel, vous apprendrez à créer correctement un plugin WordPress simple.

Si vous souhaitez revoir le code source final au fur et à mesure de votre lecture, vous pouvez le trouver ici.

Commencez avec un plan.

Tout d'abord, énumérons les fonctionnalités de notre plugin et décrivons exactement ce qu'il doit faire.

Le plugin que nous construisons permettra aux visiteurs du site d'enregistrer du contenu pour le lire plus tard.

Pour les utilisateurs enregistrés, nous stockerons la liste dans la base de données, et pour les utilisateurs anonymes, nous enregistrerons la liste à l'aide de cookies.

Vous trouverez ci-dessous un aperçu des caractéristiques et fonctionnalités que notre plugin fournira.

Écran des paramètres

• La possibilité pour les administrateurs d'ajouter le bouton "Enregistrer l'élément" à la fin du contenu.
• La possibilité de choisir le type de messages où nous voulons ajouter ce bouton.
• Offrez aux utilisateurs la possibilité de décider s'ils souhaitent utiliser notre style prédéfini ou non
• Fournissez une option pour activer la fonctionnalité uniquement pour les utilisateurs connectés.
• Fournissez une option pour modifier les messages qui apparaissent sur la partie du plugin faisant face au visiteur.

Sauvegarder le contenu

• Si l'utilisateur est connecté, enregistrez le contenu dans un champ utilisateur personnalisé
• Si l'utilisateur n'est pas connecté, enregistrez le contenu dans les cookies

messages

Les messages ci-dessous apparaîtront à l'écran en réponse à l'interaction d'un visiteur avec le plug-in ou sous forme d'étiquettes sur des éléments actionnables :

• "Enregistrer l'élément."
• "Désenregistrer l'élément."
• "Enregistré. Voir les éléments enregistrés. »
• "Vous n'avez aucun élément enregistré."

Écran enregistré

C'est là que les visiteurs voient la liste des messages qu'ils ont enregistrés.

• Afficher une liste des éléments enregistrés
• Créer une page enregistrée à l'activation du plugin
• Supprimer la page enregistrée lors de la désactivation du plugin

Petit code

Avec un shortcode, la page enregistrée peut être rendue partout où elle est ajoutée.

Utilisez un passe-partout.

C'est le meilleur passe-partout que j'ai trouvé. Il est bien structuré, orienté objet et efficace. Il suit toutes les meilleures pratiques. Et c'est rapide et léger.

Vous pouvez utiliser cette page pour générer une base de code de plugin basée sur ce WordPress Plugin Boilerplate :

Vous devriez obtenir un fichier .zip .

Extrayez-le et placez-le dans votre dossier d'installation WordPress : wp-content/plugins/ .

Si vous ouvrez votre tableau de bord WordPress et accédez aux plugins, vous verrez que votre plugin y est répertorié. Ne l'activez pas tout de suite.

Gérer l'activation et la désactivation.

Il est important que notre plugin gère correctement l'activation et la désactivation.

Lorsque notre plugin est activé, nous créons une page nommée "Enregistré", qui contiendra les éléments enregistrés de l'utilisateur.

Lors de la création de cette page, nous ajouterons un shortcode pour nos éléments enregistrés dans le contenu de cette page.

À la fin, nous enregistrerons la page ; obtenir son identifiant ; et stockez-le dans la base de données, afin que nous puissions y accéder ultérieurement lors de la désactivation du plugin.

Lorsque notre plugin est désactivé, nous obtiendrons l'ID de page "Enregistré" de la base de données, puis supprimerons la page "Enregistré", supprimant toute trace du plugin lui-même.

Nous pouvons faire tout cela dans includes/class-toptal-save-activator.php et includes/class-toptal-save-deactivator.php .

Commençons par le processus d'activation :

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

La activate() est appelée lorsque le plugin est activé.

Il crée une nouvelle page à l'aide de la fonction wp_insert_post() et enregistre l'ID de la page dans la base de données à l'aide add_option() .

Passons maintenant à la désactivation du plugin.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

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

Si nous activons notre plugin et allons sur des pages, nous devrions voir une page appelée "Saved" avec un shortcode.

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

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

Créez une page de paramètres de plug-in.

Nous pouvons créer notre page de paramètres dans le fichier admin/class-toptal-save-admin.php , et la première chose que nous devons faire dans ce fichier est de supprimer ou de commenter l'appel à wp_enqueue_style() dans la fonction enqueue_styles() et appelez wp_enqueue_script() dans la fonction enqueue_scripts() si nous n'ajoutons aucun 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 :

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Si vous vous demandez d'où ai-je obtenu cette 'tools_page_toptal-save' .

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 à l'écran Tools ( tools.php ). 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 notre page de paramètres de plugin, nous utilisons return pour terminer immédiatement l'exécution de la fonction dans laquelle nous nous trouvons.

Étant donné que je n'ajouterai aucun style personnalisé à mon écran d'administration - parce que je veux que l'écran de mon plugin ressemble à l'écran WordPress natif - 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 à la classe Toptal_Save_Admin qui appellera la fonction add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

C'est une poignée d'arguments que nous passons à la fonction add_submenu_page() . Voici ce que chacun d'eux signifie.

• Slug 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 limaces 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.

• Capacité : 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 ici.

• Slug 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 cela, 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 depuis un contexte d'objet. $this 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 à partir du contexte d'un objet secondaire).

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

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

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

Maintenant, si vous allez dans Outils, vous ne verrez pas cet écran. Pourquoi? Parce que nous n'avons pas accroché notre méthode register_admin_page() au crochet admin_menu .

Nous pouvons le faire en ouvrant notre fichier includes/class-toptal-save.php et en ajoutant ce morceau de code à l'intérieur de la méthode define_admin_hooks() , juste en dessous où le $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); partie est.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

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

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

Nous faisons des progrès, 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 l'API WordPress Settings.

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

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

Dans la fonction register_settings() , nous pouvons ajouter et configurer tous les champs. Vous pouvez trouver l'implémentation complète de la fonction ici. Nous avons utilisé les éléments suivants dans la fonction ci-dessus :

• register_setting() : enregistre un paramètre et son rappel de nettoyage.
• 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 de nettoyer les donné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 désinfection. Vous pouvez trouver le code de ces rappels ici.

Tout va bien, cependant, nous devons connecter les champs au crochet admin_init , puis les afficher.

Nous utiliserons add_action qui est un crochet que le noyau 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 crochet lorsqu'un utilisateur accède à la zone d'administration.

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

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

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

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

La fonction settings_fields() 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 la fonction submit_button() .

Maintenant, si nous jetons un coup d'œil à notre page, elle 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 plug-in.

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/annulera l'enregistrement d'un élément (AJAX).
• Une fonction qui affichera tous les éléments enregistrés.
• Une fonction qui va générer nos shortcodes.

Alors commençons par montrer le bouton. Nous ferons tout cela dans 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éation d'un nom de cookie unique pour le site Web
• Création d'un cookie
• Obtenir la valeur du cookie
• Obtenir le statut d'adhésion à partir des paramètres

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

La fonction get_unique_cookie_name() 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é n'entre pas en conflit lorsqu'il est utilisé dans plusieurs sites WordPress sous le même domaine.

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

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

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

• get_queried_object_id() : Récupère l'ID de l'objet interrogé en cours.
• 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'est affiché 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.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Maintenant, nous devons accrocher cette fonction au crochet the_content .

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

Avec cela, nous pouvons ajouter notre bouton de sauvegarde n'importe où dans le contenu. Nous pouvons le faire dans includes/class-toptal-save.php dans la méthode define_public_hooks() , comme ceci :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Maintenant, si vous allez dans les paramètres du plug-in, vérifiez les articles et les pages, ainsi que 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.

Nous pouvons le faire dans 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.

Accrochons cette fonction à WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

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

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

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

La localisation d'un script se fera via la fonction wp_localize_script() dans notre fichier public/class-toptal-save-public.php .

De plus, pendant que nous y sommes, nous veillerons également à implémenter l'affichage des fichiers CSS et JS en fonction de l'état de notre case à cocher "utiliser notre style".

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Maintenant, nous pouvons procéder à notre appel AJAX.

Notre script frontal recherchera des éléments avec la classe "toptal-save-button".

Un gestionnaire de clics sera enregistré pour tous les éléments correspondants, 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 pourront insérer où ils le souhaitent.

Nous pouvons le faire dans public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

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

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

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

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

Voici le code complet du fichier includes/class-toptal-save-loader.php .

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.

A la ligne 104, j'ai ajouté une fonction qui se chargera de la création de nos shortcodes ; vous pouvez voir que c'est à peu près la même chose que la fonction ci-dessus ( add_filter() ), sauf que j'ai changé le "filtre" en "shortcode" et les "filtres" en "shortcodes".

De plus, dans la méthode run() , j'ai ajouté un autre foreach qui passera par notre tableau de shortcodes et les enregistrera avec WordPress.

C'était facile.

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

Retrouvez le code complet de cette méthode ici.

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

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Nous avons encore deux choses à faire ici.

1. Donnez du style à notre page d'articles 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 script frontal.

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

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

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

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

Passons maintenant à la partie la plus difficile - la rendre modulaire.

Rendre 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 m'assurerais que les utilisateurs peuvent modifier le code 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 méthode register_saved_shortcode() :

• Remplacez html_to_return par inner_html_to_return là où nous voulons que les utilisateurs puissent modifier le code HTML. Assurez-vous que la première déclaration de notre variable inner_html_to_return contient "=" sans point avant.
• Utilisez la méthode apply_filters() pour enregistrer notre filtre.

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

Maintenant, si les utilisateurs veulent interagir avec notre code, ils peuvent ajouter quelque chose comme ceci dans leur fichier functions.php :

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Générer des fichiers de traduction.

La traduction est très importante car elle permet aux membres de la communauté WordPress et aux polyglottes de traduire votre plugin, le rendant accessible aux sites non anglophones.

Cela étant dit, plongeons dans quelques détails techniques sur la façon dont WordPress gère les traductions.

WordPress utilise le framework de localisation GNU gettext pour la traduction. Dans ce cadre, il existe trois types de fichiers :

• Modèle d'objet portable (POT)
• Objet Portatif (OP)
• Objet machine (MO)

Chacun de ces fichiers représente une étape du processus de traduction.

Pour générer un fichier POT, nous avons besoin d'un programme qui recherchera dans le code WordPress et obtiendra tout le texte transmis à nos fonctions de traduction, telles que __e() et _e() . Vous pouvez en savoir plus sur les fonctions de traduction ici.

Ici, nous traduisons le texte du fichier POT, en sauvegardant à la fois l'anglais et notre traduction dans un fichier PO, et nous convertissons le fichier PO en un fichier MO.

Faire cela manuellement prendrait beaucoup de temps puisque vous auriez à écrire quelques lignes de code pour chaque fichier traduisible que vous avez dans votre plugin. Heureusement, il existe un meilleur moyen, en utilisant un petit plugin pratique appelé Loco Translate.

Une fois que vous l'avez installé et activé, allez dans Loco Translate > Plugins > Toptal Save.

À partir de là, cliquez sur Modifier le modèle, puis sur Synchroniser et enregistrer. Cela modifiera notre fichier toptal-save.pot dans notre dossier de langues.

Maintenant, le plugin est disponible pour la traduction.

Créez votre plugin WordPress maintenant.

Nous avons construit un plugin assez simple dans cet article, mais dans le processus, nous avons suivi les pratiques et les normes qui nous permettraient de maintenir et d'étendre facilement ce plugin.

Nous avons utilisé les fonctionnalités de WordPress de manière à ne pas entraver les performances globales de la plate-forme.

Qu'il s'agisse d'un plugin simple ou compliqué, que vous soyez un développeur individuel ou une société de développement WordPress, la planification et le respect des meilleures pratiques sont essentiels pour créer un plugin robuste.