Share
In meinem letzten Beitrag dieser Serie begann ich, eine Begrüßungsseite für ein WordPress-Plugin zu erstellen. Ich habe die Plugin-Architektur und ihre Funktionsweise besprochen. Dann schrieb ich den Code für seine Basis- und Initialisierungsdateien, in dem wir die Codeblöcke für das Hinzufügen und Löschen eines Transienten hinzugefügt haben, der auf der Aktivierung und Deaktivierung von Plugins basiert.
In diesem letzten Artikel werde ich die verbleibenden Plugin-Dateien sowie die praktische Implementierung des Plugins besprechen. Am Ende dieses Artikels sind Sie sich der Codierung Ihrer ersten Begrüßungsseite für ein WordPress-Plugin sehr bewusst.
Das welcome-init.php Datei definiert den gesamten relevanten Code, der den Prozess für unsere Begrüßungsseite initialisiert. Es begann mit dem Hinzufügen und Löschen der Transienten über die set_transient () (bei Aktivierung des Plugins) und delete_transient () Funktionen (bei Plugin-Deaktivierung).
Nachdem wir das gesagt haben, brauchen wir jetzt eine Möglichkeit, den Benutzer zu unserer Begrüßungsseite weiterzuleiten. Um die Plugin-Logik zu verwalten, habe ich eine separate Datei mit dem Namen erstellt welcome-logic.php.
Lassen Sie uns den Code für diese Datei überprüfen.
Accentsconagua
'wpw_welcome_page'), admin_url ('plugins.php'))); add_action ('admin_init', 'wpw_safe_welcome_redirect');Wie Sie inzwischen wissen, befolge ich gerne die Kodierungs- und Dokumentationsstandards von WordPress, weshalb dort eine Menge Dokumentation enthalten ist. Einige davon wurden zu Ihrem Verständnis hinzugefügt.
Es gibt einen Dateiheader DocBlock, der verwendet wird, um einen Überblick darüber zu erhalten, was in der Datei enthalten ist. Der Code beginnt mit einem ABSPATH check, der den Plugin-Vorgang abbricht, wenn jemand versucht, direkt auf die Plugin-Datei zuzugreifen. Danach schrieb ich die Code-Routine für eine sichere Weiterleitung.
Ich habe dann eine Funktion namens definiert wpw_safe_welcome_redirect () um sicher auf die Startseite zu verweisen. Darin habe ich ein paar aufgeführt ob prüft, welche Methode die Weiterleitungsmethode überwacht. Wenn Sie die vorherigen Artikel durchgegangen sind, wissen Sie, dass ich die definiert habe _welcome_redirect_wpw vorübergehend und setzen Sie den Wert auf true. Ich verwende den gleichen Schlüssel, um diese Prüfungen durchzuführen. Um den Code besser zu verstehen, müssen Sie den vorherigen Artikel ausführlich durchgehen.
Beginnen wir mit dem, was in der Umgebung passiert wpw_safe_welcome_redirect () Funktion.
Ich habe geprüft, ob ein Aktivierungs-Umleitungs-Transient vorhanden ist, d.h.. _welcome_redirect_wpw vorübergehend, über die get_transient () Funktion. Diese Funktion wird verwendet, um den Wert eines Transienten abzurufen. Wenn der Übergang nicht existiert, keinen Wert hat oder abgelaufen ist, ist der Rückgabewert falsch.
Wenn also der abgerufene Wert nicht gleich ist wahr, dann müssen wir den Benutzer nicht auf eine Begrüßungsseite umleiten. Wenn der abgerufene Wert ist wahr und der Aktivierungs-Redirect-Transient ist vorhanden, dann gehen wir vorwärts.
Wenn der vorübergehende _welcome_redirect_wpw kehrt zurück wahr, Das bedeutet zwei Dinge: erstens, dass es in der Datenbank vorhanden ist, und zweitens, dass wir den Benutzer nicht zur Begrüßungsseite weitergeleitet haben. Lassen Sie uns diesen Übergang also löschen und den Benutzer zu unserer Begrüßungsseite weiterleiten.
Dann haben wir eine weitere Prüfanweisung, die bestätigt, dass eine sichere Weiterleitung der Willkommensseite nur für eine Site erfolgt, die kein Netzwerk oder eine Multi-Site ist. Wir möchten nicht, dass die Begrüßungsseite umgeleitet wird, wenn das Plugin von einem Netzwerk aus aktiviert wird.
Nach all diesen Überprüfungen habe ich den Benutzer schließlich auf unsere Begrüßungsseite umgeleitet. Das wp_safe_redirect ($ location) Die Funktion führt eine lokale Umleitung durch und teilt dem Server mit $ location um den Benutzer umzuleiten.
Um den Ort zu definieren, habe ich die verwendet add_query_arg () Funktion, die eine geänderte URL-Abfragezeichenfolge abruft. Es belegt ein assoziatives Array, das ein Schlüssel-Wert-Paar mit der Standort-URL enthält.
In diesem Fall erstelle ich einen Schlüssel namens Seite mit einem Wert wpw_welcome_page und umleiten auf die plugins.php Datei über die admin_url () Funktion. Dies bedeutet, dass ich den Benutzer auf eine benutzerdefinierte Seite im Plugins-Menü umleitet, und der Benutzer wird auf die Seite umgeleitet your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page URL.
Als nächstes habe ich die ganze Sache mitgenommen wpw_safe_welcome_redirect () Funktion zum admin_init.
Bisher habe ich das Verfahren für eine sichere Weiterleitung definiert. Die Lage ist a Seite was existiert in der PLUGINS Speisekarte. Aber ich habe die Seite noch nicht erstellt. Nun erstellen wir eine Willkommensseite in der Plugins Speisekarte.
Der restliche Code des welcome-logic.php Datei ist:
/ ** * Fügt ein Untermenü für die Willkommensseite hinzu. * * @since 1.0.0 * / function wpw_welcome_page () global $ wpw_sub_menu; $ wpw_sub_menu = add_submenu_page ('plugins.php', // Der Slug-Name für das übergeordnete Menü (oder der Dateiname einer Standard-WordPress-Admin-Seite). __ ('Willkommensseite', 'wpw'), // Der Text für Wird in den Titel-Tags der Seite angezeigt, wenn das Menü ausgewählt ist. __ ('Begrüßungsseite', 'wpw'), // Der für das Menü zu verwendende Text. 'read', // Die für dieses Menü erforderliche Fähigkeit für den Benutzer angezeigt werden. 'wpw_welcome_page', // Der Slug-Name, auf den in diesem Menü verwiesen werden soll (sollte für dieses Menü eindeutig sein.) 'wpw_welcome_page_content' // Die aufzurufende Funktion, um den Inhalt dieser Seite auszugeben. ; add_action ('admin_menu', 'wpw_welcome_page'); / ** * Inhalt der Begrüßungsseite. * * @since 1.0.0 * / function wpw_welcome_page_content () if (file_exists (WPW_DIR. '/welcome/welcome-view.php')) required_once (WPW_DIR. '/welcome/welcome-view.php'); Um das Untermenü hinzuzufügen, habe ich ein erstellt wpw_welcome_page () Funktion, in der ich die angerufen habe add_submenu_page () Funktion.
Das add_submenu_page () Funktion fügt eine Seite innerhalb eines Menüs hinzu. Es bedarf einer Liste von Parametern:
wpw_welcome_page, das gleiche, das wir während der sicheren Umleitungsfunktion definiert haben.Ich habe die Werte dieser Parameter definiert und zum Schluss das hinzugefügt wpw_welcome_page () Funktion als add_action zum admin_menu.
Nun müssen wir den Inhalt der Willkommensseite bearbeiten, für den ich eine erstellt habe wpw_welcome_page_content () Funktion (dies ist die Rückruffunktion für add_submenu_page ()) was das erfordert welcome-view.php Datei.
Möglicherweise haben Sie bemerkt, dass ich eine globale Variable erstellt habe $ wpw_sub_menu Diese enthält die Seiten-Bildschirm-ID für unsere neue Untermenüseite. Wir werden dies im nächsten Abschnitt verwenden.
Gleich danach habe ich eine style.css Datei für benutzerdefiniertes Styling der Elemente auf unserer Begrüßungsseite. Im obigen Code habe ich eine globale Variable festgelegt $ wpw_sub_menu welche die Bildschirm-ID der Untermenüseite enthielt.
Wir können diese Bildschirm-ID überprüfen, während wir unsere Stildatei in die Warteschlange stellen, um sicherzustellen, dass sie nur dann in die Warteschlange gestellt wird, wenn wir die Begrüßungsseite durchsuchen und nicht überall im Administrator. Das ist, was der folgende Code tut.
/ ** * Einreihungsstile. * * @since 1.0.0 * / function wpw_styles ($ hook) global $ wpw_sub_menu; // Nur der Willkommensseite einen Stil hinzufügen. if ($ hook! = $ wpw_sub_menu) return; // Begrüßungsseitenstile. wp_enqueue_style ('wpw_style', WPW_URL. '/welcome/css/style.css', array (), WPW_VERSION, 'all')); // Die Stile einreihen. add_action ('admin_enqueue_scripts', 'wpw_styles');Die Logik unserer Begrüßungsseite ist vollständig. Den vollständigen Code für die Datei welcome-logic.php können Sie unter GitHub anzeigen.
Nachdem die Logik unserer Begrüßungsseite abgeschlossen ist, können Sie das von Ihnen erstellte Plugin tatsächlich testen und es wird Sie zur Begrüßungsseite weitergeleitet. Jetzt müssen Sie nur noch die Ansicht Ihrer Begrüßungsseite erstellen. Dies könnte alles sein, was Sie wollen, aber ich möchte Ihnen aus offensichtlichen Gründen einige Heizplatten geben.
Der HTML- und CSS-Teil des Plugins befindet sich im welcome-view.php Datei. Ihr Code lautet wie folgt:
Die Datei startet wie eine normale PHP-Datei mit einem DocBlock und anschließend mit dem Code für eine ABSPATH Überprüfen Sie, dass niemand direkt auf die Datei zugreifen kann. Danach habe ich eine Variable für die Plugin-Version und den Pfad für unser Logo erstellt.
Ich habe einen Ordner namens hinzugefügt css und eine Datei namens style.css Hier können Sie einige benutzerdefinierte Stile für die Startseite erstellen. Der Code sieht wie folgt aus. Es ist der Code, mit dem die Zusatzklasse geändert wurde, die ich für unser Logo hinzugefügt habe. (Sie können es so hinzufügen, wie Sie es möchten; ich habe gerade das WP-Logo überschrieben, um die Dinge für dieses Tutorial einfach zu halten.)
/ * Logo * / .svg .wp-badge.welcome__logo background: url ('… /img/logo.png') center 24px no-repeat # 0092f9; Hintergrundgröße: enthalten; Farbe: #fff; / * Responsive Youtube Video * / .embed-container height: 0; Max-Breite: 100%; Überlauf versteckt; Polsterboden: 56,25%; Position: relativ; .embed-container iframe, .embed-container-objekt, .embed-container embed top: 0; Höhe: 100%; links: 0; Position: absolut; Breite: 100%; Danach gibt es den HTML-Teil unserer Seite. Es gibt ein Video von YouTube, das als responsives Video eingebettet ist.
Der HTML-Teil der Begrüßungsseite ähnelt dem der Standard-Begrüßungsseite von WordPress. Der Vorteil davon ist, dass wir nicht viel CSS schreiben müssen, und die Benutzer sind bereits mit dem integrierten Format vertraut.
Plugins sind Erweiterungen für WordPress. Sie können WordPress erweitern, indem Sie ein Plugin erstellen. Aus diesem Grund denke ich, dass Sie immer die standardmäßigen und integrierten Looks / Styles verwenden müssen, um die Übereinstimmung mit dem WordPress-Dashboard zu verbessern. Einige Plugins fügen farbige Symbole und einen starken Hintergrund hinzu, oder so weiter, aber am Ende des Tages stören sie ein reibungsloses Benutzererlebnis.
Ich bin sicher, dass Plugin-Entwickler sich mit HTML-Programmierung auskennen. Hier ist der Code trotzdem.
Der Code zeigt das folgende Layout:
Zum Zeitpunkt des Schreibens können Sie die folgenden CSS-Klassen zum Erstellen von Spalten verwenden:
.Feature-Abschnitt zusammen mit .ein Col.: So erstellen Sie eine einzelne Spalte..Feature-Abschnitt zusammen mit .zwei Col: So erstellen Sie zwei Spalten..Feature-Abschnitt zusammen mit .dreiblatt: So erstellen Sie drei Spalten.Damit ist unsere Plugin-Entwicklung abgeschlossen. Testen wir es auf einer Demo-Website.
Um das Plugin auf einer Demo-Website zu testen, können Sie das herunterladen und installieren WP-Welcome-Page-Boilerplate-For-TutsPlusvon GitHub.
Führen Sie danach die folgenden Schritte aus:
Voila! Wurde zur Begrüßungsseite weitergeleitet?
Wenn Sie fertig sind, kehren Sie zur Startseite des Dashboards zurück und bewegen Sie den Mauszeiger über die Schaltfläche Plugins Speisekarte. Ein zusätzliches Untermenü wird als hinzugefügt Startseite. Um Sie noch einmal zu erinnern, ist dies die gleiche Seite, die ich zuvor erstellt habe.
Die letzte Begrüßungsseite sieht übrigens so aus.
Hier ist das komplette Layout des Begrüßungsbildschirms.
So erstellen Sie eine Begrüßungsseite für Ihr WordPress-Plugin. Ich habe eine sehr grundlegende Implementierung beschrieben. Sie können es an Ihre Anforderungen anpassen. Ich empfehle das Herunterladen der herzlich willkommen Ordner und einschließlich der welcome-init.php zu Ihrem Produkt (ändern Sie die globalen Konstanten in den welcome - *. php-Dateien).
Schließlich können Sie alle meine Kurse und Tutorials auf meiner Profilseite abrufen und Sie können mir auf meinem Blog folgen und / oder Twitter @mrahmadawais erreichen, wo ich über Entwicklungsworkflows im Zusammenhang mit WordPress schreibe.
Zögern Sie nicht wie üblich, Fragen oder Kommentare zu hinterlassen, und ich bemühe mich, auf jeden von ihnen zu antworten.
