Der ultimative Leitfaden zum Erstellen eines WordPress-Plugins

Plugins sind ein wichtiger Bestandteil von WordPress-Websites, die bestimmte Funktionen benötigen.

Während das offizielle WordPress-Repository mehr als 45.000 Plugins von Ihnen zur Auswahl hat, verfehlen viele dieser Plugins das Ziel.

Nur weil sich ein Plugin im Repository befindet, bedeutet das nicht, dass es seine Leistung nicht beeinträchtigt oder seine Sicherheit gefährdet.

Also was kannst du tun? Nun, Sie können Ihre eigenen bauen.

Der Aufbau eines großartigen WordPress-Plugins beginnt mit sorgfältiger Planung.

Unabhängig davon, ob Sie eine von Grund auf neu erstellen oder auf einer Boilerplate basieren, die Befolgung gut dokumentierter Best Practices ist absolut unerlässlich.

In diesem Tutorial erfahren Sie, wie Sie ein einfaches WordPress-Plugin richtig erstellen.

Wenn Sie den endgültigen Quellcode beim Lesen überprüfen möchten, finden Sie ihn hier.

Beginnen Sie mit einem Plan.

Lassen Sie uns zunächst die Funktionen auflisten, die unser Plugin haben wird, und genau skizzieren, was es tun muss.

Das Plugin, das wir erstellen, ermöglicht es Website-Besuchern, Inhalte zu speichern, um sie später zu lesen.

Für registrierte Benutzer speichern wir die Liste in der Datenbank und für anonyme Benutzer speichern wir die Liste mithilfe von Cookies.

Nachfolgend finden Sie eine Übersicht über die Features und Funktionen, die unser Plugin bieten wird.

Einstellungsfenster

• Die Möglichkeit für Administratoren, die Schaltfläche „Element speichern“ am Ende des Inhalts hinzuzufügen.
• Die Möglichkeit, die Art der Posts auszuwählen, denen diese Schaltfläche hinzugefügt werden soll.
• Bieten Sie Benutzern die Möglichkeit zu entscheiden, ob sie unser vordefiniertes Styling verwenden möchten oder nicht
• Stellen Sie eine Option bereit, um die Funktionalität nur für angemeldete Benutzer zu aktivieren.
• Stellen Sie eine Option bereit, um die Nachrichten zu ändern, die im besucherzugewandten Teil des Plugins angezeigt werden.

Speichern des Inhalts

• Wenn der Benutzer angemeldet ist, speichern Sie den Inhalt in einem benutzerdefinierten Benutzerfeld
• Wenn der Benutzer nicht angemeldet ist, speichern Sie den Inhalt in Cookies

Mitteilungen

Die folgenden Meldungen werden auf dem Bildschirm als Reaktion auf die Interaktion eines Besuchers mit dem Plug-in oder als Labels für umsetzbare Elemente angezeigt:

• „Element speichern.“
• „Gespeichertes Element aufheben.“
• "Gerettet. Siehe gespeicherte Elemente.“
• "Sie haben keine gespeicherten Artikel."

Gespeicherter Bildschirm

Hier sehen Besucher die Liste der Beiträge, die sie gespeichert haben.

• Zeigen Sie eine Liste gespeicherter Elemente an
• Erstellen Sie eine gespeicherte Seite bei der Aktivierung des Plugins
• Gespeicherte Seite bei Deaktivierung des Plugins löschen

Kurzwahl

Mit einem Shortcode kann die gespeicherte Seite gerendert werden, wo immer sie hinzugefügt wird.

Verwenden Sie eine Boilerplate.

Das ist der beste Boilerplate, den ich gefunden habe. Es ist gut strukturiert, objektorientiert und effizient. Es folgt allen Best Practices. Und es ist schnell und leicht.

Sie können diese Seite verwenden, um eine Plugin-Codebasis basierend auf diesem WordPress-Plugin-Boilerplate zu generieren:

Sie sollten eine .zip -Datei erhalten.

Extrahiere es und lege es in deinen WordPress-Installationsordner: wp-content/plugins/ .

Wenn Sie Ihr WordPress-Dashboard öffnen und zu Plugins gehen, sehen Sie, dass Ihr Plugin dort aufgelistet ist. Aktivieren Sie es noch nicht.

Aktivierung und Deaktivierung handhaben.

Es ist wichtig, dass unser Plugin die Aktivierung und Deaktivierung richtig handhabt.

Wenn unser Plugin aktiviert ist, erstellen wir eine Seite mit dem Namen „Gespeichert“, die die gespeicherten Elemente des Benutzers enthält.

Beim Erstellen dieser Seite fügen wir dem Inhalt dieser Seite einen Shortcode für unsere gespeicherten Artikel hinzu.

Am Ende speichern wir die Seite; Holen Sie sich seine ID; und in der Datenbank speichern, damit wir später bei Deaktivierung des Plugins darauf zugreifen können.

Wenn unser Plugin deaktiviert wird, erhalten wir die „Gespeicherte“ Seiten-ID aus der Datenbank und löschen dann die „Gespeicherte“ Seite, wodurch alle Spuren des Plugins selbst entfernt werden.

All dies können wir in Includes/class-toptal-save-activator.php und Includes/class-toptal-save-deactivator.php erledigen .

Beginnen wir mit dem Aktivierungsprozess:

 <?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 ); } }

Die activate() Funktion wird aufgerufen, wenn das Plugin aktiviert wird.

Es erstellt eine neue Seite mit der Funktion wp_insert_post() und speichert die Seiten-ID mit add_option() in der Datenbank.

Fahren wir nun mit der Plugin-Deaktivierung fort.

 <?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' ); } } }

Die Funktion deactivate( deactivate() , die beim Deaktivieren des Plugins aufgerufen wird, ruft die Seite mit der Funktion get_option() ab, entfernt die entsprechende Seite mit wp_delete_post() aus der Datenbank und entfernt mit wp_delete_post() die gespeicherte ID aus der delete_option() .

Wenn wir unser Plugin aktivieren und zu Seiten gehen, sollten wir eine Seite namens „Gespeichert“ mit einem Shortcode darin sehen.

Wenn wir das Plugin deaktivieren würden, würde diese Seite entfernt werden.

Da wir in unserer Methode wp_delete_post() true als Argument verwendet haben, wandert diese Seite nicht in den Papierkorb, sondern wird komplett gelöscht.

Erstellen Sie eine Plugin-Einstellungsseite.

Wir können unsere Einstellungsseite in der Datei admin/class-toptal-save-admin.php erstellen, und das erste, was wir in dieser Datei tun müssen, ist, den Aufruf von wp_enqueue_style() in der Funktion enqueue_styles() zu entfernen oder auszukommentieren Rufen wp_enqueue_script() innerhalb der enqueue_scripts() Funktion auf, wenn wir dem Admin-Bildschirm kein CSS/JS hinzufügen.

Wenn wir jedoch etwas Styling hinzufügen möchten, dann empfehle ich, dass wir diese Dateien nur auf der Einstellungsseite unseres Plugins laden und nicht auf allen WordPress-Admin-Seiten. Wir können das tun, indem wir den folgenden Code direkt über den Zeilen platzieren, die wir kommentiert hätten:

 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 );

Falls Sie sich fragen, woher ich diesen Teil 'tools_page_toptal-save' .

Nun, hier ist die Sache, ich weiß, dass ich eine Einstellungsseite mit einem Slug-Toptal-Speichern erstellen werde, und ich weiß auch, dass ich sie dem Tools-Bildschirm ( tools.php ) hinzufügen werde. Wenn wir also diese beiden zusammenfügen, können wir sagen, dass der Wert der Variablen $hook 'tools_page_toptal-save' sein wird – eine Verkettung der beiden Werte.

Wenn wir uns nicht auf unserer Plugin-Einstellungsseite befinden, verwenden wir return , um die Ausführung der Funktion, in der wir uns befinden, sofort zu beenden.

Da ich meinem Admin-Bildschirm kein benutzerdefiniertes Design hinzufügen werde – weil ich möchte, dass mein Plugin-Bildschirm wie ein nativer WordPress-Bildschirm aussieht – werde ich diesen Code nicht hinzufügen.

Jetzt können wir mit der Erstellung unserer Einstellungsseite fortfahren.

Wir beginnen damit, der Klasse Toptal_Save_Admin eine einfache Methode hinzuzufügen, die die Funktion 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 ); }

Das sind ziemlich viele Argumente, die wir an die Funktion add_submenu_page() . Hier ist, was jeder von ihnen bedeutet.

• Übergeordneter Slug: Der Slug-Name für das übergeordnete Menü (oder der Dateiname einer standardmäßigen WordPress-Administrationsseite). Die vollständige Liste der Elternschnecken finden Sie hier.

• Seitentitel: Der Text, der in den Titel-Tags der Seite angezeigt werden soll, wenn das Menü ausgewählt wird.

• Menütitel: Der Text, der für den Menütitel verwendet werden soll.

• Fähigkeit: Die Fähigkeit, die der Benutzer benötigt, damit ihm dieses Menü angezeigt wird. Wir haben „manage_options“ verwendet, das den Zugriff auf die Optionen des Administrationsbereichs ermöglicht. Hier können Sie mehr über Rollen und Fähigkeiten lesen.

• Menü-Slug: Der Slug-Name, der auf dieses Menü verweist.

• Aufrufbare Funktion: Die Funktion, die aufgerufen werden soll, um den Inhalt für diese Seite auszugeben. Da wir den Namen unserer aufrufbaren Funktion definiert haben, müssen wir ihn erstellen, aber vorher haben wir $this verwendet, um auf eine Instanz einer Klasse aus sich selbst zu verweisen. Hier ist, was die PHP-Dokumentation dazu zu sagen hat:

Die Pseudovariable $this ist verfügbar, wenn eine Methode aus einem Objektkontext aufgerufen wird. $this ist eine Referenz auf das aufrufende Objekt (normalerweise das Objekt, zu dem die Methode gehört, aber möglicherweise ein anderes Objekt, wenn die Methode statisch aus dem Kontext eines sekundären Objekts aufgerufen wird).

Als Nächstes fügen wir der Klasse eine weitere Methode hinzu:

 /** * 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'; }

Diese aufrufbare Funktion enthält unsere Vorlage, die unsere Einstellungsseite anzeigen wird. Sie können sehen, dass wir auf eine Datei verweisen, die sich in den admin/ partials namens toptal-save-admin-display.php befindet .

Wenn Sie jetzt zu Tools gehen, sehen Sie diesen Bildschirm nicht. Warum? Weil wir unsere Methode register_admin_page() nicht mit dem Hook admin_menu .

Wir können das tun, indem wir unsere include/class-toptal-save.php- Datei öffnen und diesen Codeabschnitt in die Methode define_admin_hooks() , direkt darunter, wo $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); Teil ist.

 /** * 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' ); }

Machen Sie sich keine Gedanken über die Aufrufe von add_action() , da wir später darauf eingehen werden.

Öffnen Sie zunächst einfach die Seite Tools, und Sie können die Seite Toptal Save sehen. Wenn wir es öffnen, funktioniert es, aber wir sehen einen leeren Bildschirm, da nichts darauf ist.

Wir machen einige Fortschritte, aber hey, wir müssen hier einige Einstellungen anzeigen, also machen wir das.

Wir werden mit der Erstellung der Felder beginnen, und das werden wir mit Hilfe der WordPress-Einstellungs-API tun.

Wenn Sie damit nicht vertraut sind, können wir damit Formularfelder erstellen, mit denen wir unsere Daten speichern können.

 /** * 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' ) ) ); // ... }

Innerhalb der Funktion register_settings() können wir alle Felder hinzufügen und konfigurieren. Die vollständige Implementierung der Funktion finden Sie hier. Wir haben in der oben gezeigten Funktion Folgendes verwendet:

• register_setting() : Registriert eine Einstellung und ihren Bereinigungsrückruf.
• add_settings_section() : Fügt einen neuen Abschnitt zu einer Einstellungsseite hinzu.
• add_settings_field() : Fügt ein neues Feld zu einem Abschnitt einer Einstellungsseite hinzu.

Wann immer wir eine dieser drei Funktionen verwendet haben, wurde ein Bereinigungs-Callback bereitgestellt. Dadurch können die Daten bereinigt werden und, wenn es sich um ein Feld handelt, das entsprechende HTML-Element (Kontrollkästchen, Optionsfeld, Eingabe usw.) anzeigen.

Außerdem haben wir je nach Bedarf ein Array von Daten an diese Callbacks übergeben, z. B. label_for, description oder default.

Jetzt können wir diese Bereinigungsrückrufe erstellen. Den Code für diese Rückrufe finden Sie hier.

Das ist alles in Ordnung, aber wir müssen die Felder in den admin_init Hook einhängen und sie dann anzeigen.

Wir verwenden add_action , einen Hook, den der WordPress-Kern an bestimmten Punkten während der Ausführung oder beim Eintreten eines bestimmten Ereignisses startet. admin_init wird vor allen anderen Hooks ausgelöst, wenn ein Benutzer auf den Admin-Bereich zugreift.

Zuerst müssen wir eine Aktion in der include/class-toptal-save.php- Datei hinzufügen.

 /** * 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' ); }

Als nächstes müssen wir in admin/partials/topal-save-admin-display.php eine Ansicht für den Admin-Bereich unseres Plugins bereitstellen:

 <?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>

Die Funktion settings_fields() wird verwendet, um Nonce-, Action- und Option_page-Felder für eine Einstellungsseite auszugeben.

Darauf folgt do_settings_sections() , das alle Einstellungsabschnitte ausdruckt, die einer bestimmten Einstellungsseite hinzugefügt wurden.

Schließlich wird eine Senden-Schaltfläche unter Verwendung des bereitgestellten Textes und der entsprechenden Klasse(n) mithilfe der Funktion submit_button() .

Wenn wir uns nun unsere Seite ansehen, sieht sie so aus:

Das ist alles, was wir in unserem Admin-Bereich tun müssen. Beginnen wir mit der Arbeit am öffentlichen Teil unseres Plugins.

Erstellen Sie die Plugin-Funktionalität.

Hier kommt der interessante Teil. Wir müssen mehrere Funktionen erstellen, um unsere Funktionalität zu trennen:

• Eine Funktion, die die Schaltfläche „Element speichern“ anzeigt. Dies muss prüfen, ob der aktuelle Benutzer dieses Element bereits gespeichert hat oder nicht, abhängig davon zeigen wir einen anderen Text sowie eine andere Farbe.
• Eine Funktion, die ein Element speichert/entfernt (AJAX).
• Eine Funktion, die alle gespeicherten Elemente anzeigt.
• Eine Funktion, die unsere Shortcodes generiert.

Beginnen wir also mit dem Anzeigen der Schaltfläche. Wir werden all dies in public/class-toptal-save-public.php tun .

Während wir dies tun, müssen wir einige zusätzliche Hilfsfunktionen erstellen, um bestimmte Dinge zu erledigen, wie zum Beispiel:

• Erstellen eines eindeutigen Cookie-Namens für die Website
• Erstellen eines Cookies
• Abrufen des Cookie-Werts
• Abrufen des Mitgliedschaftsstatus aus den Einstellungen

Den Code für diese Hilfsfunktionen finden Sie hier.

Die Funktion get_unique_cookie_name() hilft uns, einen eindeutigen Cookie-Namen aus der Website-URL, dem Website-Namen und unserem benutzerdefinierten Suffix zu generieren. Dies geschieht, damit der generierte Cookie-Name nicht in Konflikt gerät, wenn er auf mehreren WordPress-Sites unter derselben Domain verwendet wird.

Die Funktionen toptal_set_cookie() und toptal_get_cookie() erstellen bzw. erhalten den Wert unserer Cookies.

Die Funktion get_user_status() den Status unseres Mitgliedschafts-Kontrollkästchens in den Einstellungen ab (gibt 1 zurück, wenn es aktiviert ist, andernfalls 0).

Nun der saftige Teil, das Erstellen der Funktion, die für das Anzeigen der Speichern-Schaltfläche verantwortlich ist. Die Implementierung für unsere Funktion show_save_button() finden Sie hier. Und wir haben hier einige neue Funktionen aus der WordPress-API verwendet:

• get_queried_object_id() : Ruft die ID des aktuell abgefragten Objekts ab.
• is_user_logged_in() : Überprüft, ob der aktuelle Besucher ein angemeldeter Benutzer ist.
• get_user_meta() : Ruft das Benutzermetadatenfeld für einen Benutzer ab.
• wp_create_nonce() : Erstellt ein kryptografisches Token, das an eine bestimmte Aktion, einen Benutzer, eine Benutzersitzung und ein Zeitfenster gebunden ist.

Lassen Sie uns nun eine Funktion erstellen, die unsere Schaltfläche an das Ende des Inhalts anhängt. Hier haben wir zwei zentrale Anforderungen.

1. Stellen Sie sicher, dass die Schaltfläche nur bei den Beitragstypen angezeigt wird, die in den Einstellungen ausgewählt sind.
2. Stellen Sie sicher, dass das Kontrollkästchen zum Anhängen der Schaltfläche aktiviert ist.

 /** * 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; }

Jetzt müssen wir diese Funktion mit dem Hook the_content .

Warum? Weil the_content verwendet wird, um den Inhalt des Posts zu filtern, nachdem er aus der Datenbank abgerufen wurde und bevor er auf dem Bildschirm gedruckt wird.

Damit können wir unsere Speichern-Schaltfläche überall im Inhalt hinzufügen. Wir können das in der include/class-toptal-save.php in der Methode define_public_hooks() so machen:

 /** * 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' ); }

Wenn Sie nun zu den Plugin-Einstellungen gehen und Beiträge und Seiten überprüfen sowie die Schaltfläche anhängen, sehen wir in jedem Blog-Beitrag, dass die Schaltfläche angezeigt wird.

Von hier aus sollten wir fortfahren und diesen Knopf stylen.

Wir können das in public/css/toptal-save-public.css tun . Hier finden Sie die aktualisierte CSS-Datei.

Lassen Sie uns nun eine Funktion erstellen, die das Element tatsächlich speichert.

Wir werden dies in unserem öffentlichen Kurs tun, und wir werden es mit AJAX tun. Der Code ist hier.

Lassen Sie uns diese Funktion in WordPress AJAX einbinden.

 /** * 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' ); }

Hier können Sie mehr über AJAX in Plugins lesen.

Bevor wir diesen Teil beenden, müssen wir noch zwei Dinge erledigen.

1. Lokalisieren Sie ein Skript.
2. Erstellen Sie unseren AJAX-Aufruf in public/js/toptal-save-public.js

Die Lokalisierung eines Skripts erfolgt über die Funktion wp_localize_script() in unserer Datei public/class-toptal-save-public.php .

Und wenn wir schon dabei sind, stellen wir auch sicher, dass die Anzeige von CSS- und JS-Dateien abhängig vom Status unseres Kontrollkästchens „unseren Stil verwenden“ implementiert wird.

 /** * 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 ) ); }

Jetzt können wir mit unserem AJAX-Aufruf fortfahren.

Unser Frontend-Skript sucht nach Elementen mit der Klasse „toptal-save-button“.

Für alle übereinstimmenden Elemente wird ein Klick-Handler registriert, der den API-Aufruf ausführt und die Benutzeroberfläche entsprechend aktualisiert.

Den Code finden Sie hier und das notwendige CSS hier.

Ich habe auch eine Funktion hinzugefügt, die die Benachrichtigung verarbeitet, wenn das Element hinzugefügt wird.

Hier ist, wie es funktioniert.

Als nächstes müssen wir einen Shortcode erstellen, den Benutzer einfügen können, wo immer sie wollen.

Wir können das in public/class-toptal-save-public.php tun :

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

Wir müssen es auch registrieren, da die Funktion selbst nichts bewirkt.

Fügen Sie in include/class-toptal-save.php diesen Code nach der Zeile hinzu, in der wir unsere Schaltfläche angehängt haben.

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

Das wird jetzt nicht funktionieren, weil wir die Methode add_shortcode() noch nicht in unsere Loader-Klasse geladen haben.

Hier ist der vollständige Code der Datei include/class-toptal-save-loader.php .

Ich habe eine neue geschützte Variable namens shortcodes hinzugefügt und sie dann in der Konstruktormethode der Klasse in ein Array umgewandelt.

In Zeile 104 habe ich eine Funktion hinzugefügt, die für die Erstellung unserer Shortcodes verantwortlich ist; Sie können sehen, dass es so ziemlich das Gleiche ist wie die Funktion darüber ( add_filter() ), außer dass ich „filter“ in „shortcode“ und „filters“ in „shortcodes“ geändert habe.

Außerdem habe ich in der Methode run() einen weiteren foreach hinzugefügt, der unser Shortcodes-Array durchläuft und sie bei WordPress registriert.

Das war einfach.

Denken Sie daran, dass wir am Anfang einen [toptal-saved] verwendet haben, also erstellen wir eine Methode, die alle unsere gespeicherten Elemente anzeigt.

Den vollständigen Code für diese Methode finden Sie hier.

Nun müssen wir wie immer den Shortcode in include/class-toptal-save.php registrieren :

 /** * 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' ); }

Wir haben hier noch zwei Dinge zu tun.

1. Gestalten Sie unsere Seite mit gespeicherten Artikeln.
2. Stellen Sie sicher, dass, wenn ein Benutzer ein gespeichertes Element entfernt, es von der Seite „Gespeicherte Elemente“ verschwindet.

Für die erste Aufgabe finden Sie hier den notwendigen CSS-Code.

Für die zweite ist ein bisschen Front-End-Skripting erforderlich.

Den vollständigen JavaScript-Code dafür finden Sie hier.

Wie Sie in Zeile 52 sehen werden, habe ich nach dem div mit einer Klasse „toptal-saved-item“ gesucht.

Dann prüfen wir in den Zeilen 70-75, ob dieses übergeordnete div eine Klasse toptal-saved-item hat.

Wenn ja, blenden wir unser Item mit fadeOut aus und entfernen das Item dann, nachdem die Animation vorbei ist, vollständig vom Bildschirm.

Kommen wir nun zum schwierigeren Teil – es modular zu machen.

Machen Sie das Plugin modular.

Die grundlegende Definition eines modularen Plugins lautet:

Erweiterbarer oder modularer Code ist Code, der modifiziert, mit ihm interagiert, ergänzt oder manipuliert werden kann – und das alles, ohne jemals die Kerncodebasis zu modifizieren.

Nun, wenn es um dieses Plugin geht, würde ich sicherstellen, dass Benutzer den HTML-Code innerhalb des gespeicherten Elements auf der Seite „Gespeicherte Elemente“ ändern können.

Wir müssen also ein paar Änderungen an unserer Methode register_saved_shortcode() vornehmen:

• Ändern html_to_return in inner_html_to_return , wo immer wir möchten, dass Benutzer den HTML-Code ändern können. Stellen Sie sicher, dass die erste Deklaration unserer Variable inner_html_to_return ein „=“ ohne vorangestellten Punkt enthält.
• Verwenden Sie die Methode apply_filters() , um unseren Filter zu registrieren.

Mit diesen beiden Änderungen sollten Sie so etwas erhalten.

Wenn Benutzer nun mit unserem Code interagieren möchten, können sie so etwas in ihre functions.php -Datei einfügen:

 <?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; }

Übersetzungsdateien generieren.

Die Übersetzung ist sehr wichtig, da sie es Mitgliedern der WordPress-Community und Polyglotten ermöglicht, Ihr Plugin zu übersetzen und es für nicht-englische Websites zugänglich zu machen.

Lassen Sie uns jedoch auf einige technische Details darüber eingehen, wie WordPress mit Übersetzungen umgeht.

WordPress verwendet das GNU gettext Lokalisierungsframework für die Übersetzung. In diesem Rahmen gibt es drei Arten von Dateien:

• Portable Object Template (POT)
• Tragbares Objekt (PO)
• Maschinenobjekt (MO)

Jede dieser Dateien repräsentiert einen Schritt im Übersetzungsprozess.

Um eine POT-Datei zu generieren, benötigen wir ein Programm, das den WordPress-Code durchsucht und den gesamten Text an unsere Übersetzungsfunktionen wie __e() und _e() . Mehr über die Übersetzungsfunktionen erfahren Sie hier.

Hier übersetzen wir den Text aus der POT-Datei, speichern sowohl Englisch als auch unsere Übersetzung in einer PO-Datei und konvertieren die PO-Datei in eine MO-Datei.

Dies manuell zu tun, würde viel Zeit in Anspruch nehmen, da Sie für jede übersetzbare Datei, die Sie in Ihrem Plugin haben, ein paar Codezeilen schreiben müssten. Glücklicherweise gibt es einen besseren Weg, indem Sie ein praktisches kleines Plugin namens Loco Translate verwenden.

Sobald Sie es installiert und aktiviert haben, gehen Sie zu Loco Translate > Plugins > Toptal Save.

Klicken Sie dort auf Vorlage bearbeiten und dann auf Synchronisieren und Speichern. Dadurch wird unsere toptal-save.pot Datei in unserem Sprachenordner bearbeitet.

Jetzt steht das Plugin zur Übersetzung zur Verfügung.

Erstellen Sie jetzt Ihr WordPress-Plugin.

Wir haben in diesem Artikel ein ziemlich einfaches Plugin erstellt, aber dabei haben wir die Praktiken und Standards befolgt, die es uns ermöglichen würden, dieses Plugin einfach zu warten und zu erweitern.

Wir haben WordPress-Funktionalitäten so verwendet, dass die Gesamtleistung der Plattform nicht beeinträchtigt wird.

Ob es sich um ein einfaches oder ein kompliziertes Plugin handelt, ob Sie ein einzelner Entwickler oder ein WordPress-Entwicklungsunternehmen sind, die Planung und Befolgung von Best Practices ist der Schlüssel zum Aufbau eines robusten Plugins.