Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Erstellen einer Begrüßungsseite für Ihr WordPress-Produkt: Code Teil 2

by
Length:LongLanguages:
This post is part of a series called Building a Welcome Page for Your WordPress Product.
Building a Welcome Page for Your WordPress Product: Code Part 1

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

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 basierend auf der Aktivierung und Deaktivierung von Plugins hinzugefügt haben.

In diesem letzten Artikel werde ich die verbleibenden Plugin-Dateien zusammen mit der praktischen Implementierung des Plugins besprechen. Am Ende dieses Artikels sind Sie sich der Codierung Ihrer ersten Begrüßungsseite für ein WordPress-Plugin sehr bewusst.

Logik für die Umleitung der Begrüßungsseite

Die Datei welcome-init.php 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 Funktionen set_transient() (bei Aktivierung des Plugins) und delete_transient() (bei Deaktivierung des Plugins).

Nachdem wir das gesagt haben, brauchen wir jetzt eine Möglichkeit, den Benutzer auf unsere Begrüßungsseite umzuleiten. Um die Plugin-Logik zu verwalten, habe ich eine separate Datei namens welcome-logic.php erstellt.

Lassen Sie uns den Code für diese Datei überprüfen.

Wie Sie inzwischen wissen, befolge ich gerne die Codierungs- 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 einen Überblick über die Inhalte der Datei gibt. Der Code beginnt mit einer ABSPATH-Prüfung, die den Plugin-Vorgang beendet, wenn jemand versucht, direkt auf die Plugin-Datei zuzugreifen. Danach schrieb ich die Code-Routine für eine sichere Weiterleitung.

Ich definierte dann eine Funktion mit dem Namen wpw_safe_welcome_redirect(), um die sichere Weiterleitung zur Begrüßungsseite durchzuführen. Darin habe ich einige if-Prüfungen durchgeführt, die die Umleitungsmethode überwachen. Wenn Sie die vorherigen Artikel durchgearbeitet haben, wissen Sie, dass ich den Transient _welcome_redirect_wpwdefiniert und seinen Wert auf true festgelegt habe. 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 den Vorgängen in der Funktion wpw_safe_welcome_redirect().

Schritt #1: Bail, wenn keine Umleitung für die Weiterleitung vorhanden ist

Ich habe überprüft, ob es einen Aktivierungsumleitungs-Transient gibt, d. H. _welcome_redirect_wpw tRansient, über die Funktion get_transient(). 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 der abgerufene Wert also nicht gleich true ist, müssen wir den Benutzer nicht auf eine Begrüßungsseite umleiten. Wenn der abgerufene Wert true ist und der Aktivierungsumleitungs-Transient vorhanden ist, gehen wir vorwärts.

Schritt 2: Löschen Sie den Redirect Transient

Wenn der vorübergehende _welcome_redirect_wpw true zurückgibt, bedeutet dies zwei Dinge: erstens, dass es in der Datenbank vorhanden ist, und zweitens, dass wir den Benutzer nicht auf die Startseite weitergeleitet haben. Also löschen wir diesen Übergang und leiten den Benutzer zu unserer Begrüßungsseite weiter.

Schritt 3: Kaution bei Aktivierung von Netzwerk- oder Bulk-Sites

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 die Begrüßungsseite nicht weiterleiten, wenn das Plugin von einem Netzwerk aus aktiviert wird.

Schritt 4: Sichere Umleitung auf die Begrüßungsseite

Nach all diesen Überprüfungen habe ich den Benutzer schließlich auf unsere Begrüßungsseite weitergeleitet. Die Funktion wp_safe_redirect ($ location) führt eine lokale Umleitung durch und teilt dem Server die $location mit, um den Benutzer umzuleiten.

Um den Speicherort festzulegen, habe ich die Funktion add_query_arg() verwendet, die eine geänderte URL-Abfragezeichenfolge abruft. Es nimmt ein assoziatives Array in Anspruch, das ein Schlüsselwertpaar zusammen mit der Standort-URL enthält.

In diesem Fall erstelle ich einen Schlüssel namens page mit dem Wert wpw_welcome_page und leite ihn über die Funktion admin_url() in die Datei plugins.php um. Dies bedeutet, dass ich den Benutzer auf eine benutzerdefinierte Seite im Plugins-Menü umleitet, und der Benutzer wird zur URL your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page geleitet.

Als Nächstes habe ich die gesamte Funktion wpw_safe_welcome_redirect() an die admin_init angehängt.

Hinzufügen des Untermenüs zur Begrüßungsseite

Bisher habe ich das Verfahren für eine sichere Weiterleitung definiert. Der Speicherort ist ein page, der im PLUGINS-Menü vorhanden ist. Aber ich habe die Seite noch nicht erstellt. Jetzt erstellen wir eine Startseite im Plugins-Menü.

Der restliche Code der welcome-logic.php-Datei lautet:

Um das Untermenü hinzuzufügen, habe ich eine Funktion wpw_welcome_page() erstellt, in der ich die Funktion add_submenu_page() aufgerufen habe.

Die Funktion add_submenu_page() fügt eine Seite innerhalb eines Menüs hinzu. Es erfordert eine Liste von Parametern:

  • $parent_slug (Erforderlich): Der Slug- oder Dateiname für das übergeordnete Menü.
  • $page_title (Erforderlich): Der in den Titel-Tags der Seite anzuzeigende Text, wenn das Menü ausgewählt wird.
  • $menu_title (Erforderlich): Der für das Menü zu verwendende Text.
  • $fähigkeit (Erforderlich): Die Fähigkeit, die benötigt wird, damit dieses Menü dem Benutzer angezeigt wird.
  • $menu_slug (Erforderlich): Der Slug-Name, durch den auf dieses Menü verwiesen werden soll (sollte für dieses Menü eindeutig sein). Es ist wpw_welcome_page, das gleiche, das wir während der sicheren Umleitungsfunktion definiert haben.
  • $function (optional): Die Callback-Funktion, die aufgerufen werden soll, um den Inhalt dieser Seite auszugeben.

Ich habe die Werte dieser Parameter definiert und zum Schluss die Funktion wpw_welcome_page() als add_action zum admin_menu hinzugefügt.

Jetzt müssen wir den Inhalt der Begrüßungsseite behandeln, für den ich eine Funktion wpw_welcome_page_content() erstellt habe (dies ist die Rückruffunktion für add_submenu_page()), für die die Datei welcome-view.php erforderlich ist.

Möglicherweise haben Sie bemerkt, dass ich eine globale Variable $wpw_sub_menu erstellt habe, die die Seiten-ID für unsere neue Untermenüseite enthält. Wir werden dies im nächsten Abschnitt verwenden.

Enqueue Custom Style.css

Gleich nach all dem habe ich eine style.css-Datei für die benutzerdefinierte Gestaltung der Elemente auf unserer Begrüßungsseite in die Warteschlange gestellt. Im obigen Code habe ich eine globale Variable $wpw_sub_menu festgelegt, die 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.

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.

Welcome Page View

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 in der Datei welcome-view.php. Sein Code lautet wie folgt:

Die Datei startet wie eine normale PHP-Datei mit einem DocBlock und dem Code für eine ABSPATH-Prüfung, sodass 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.

CSS Styling

Ich habe einen Ordner namens css und eine Datei namens style.css hinzugefügt, um einige benutzerdefinierte Stile für die Begrüßungsseite zu 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.)

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 das WordPress-Dashboard besser aufeinander abzustimmen. Einige Plugins fügen farbige Symbole und einen starken Hintergrund hinzu, aber am Ende des Tages stören sie die Benutzererfahrung.

Ich bin sicher, dass Plugin-Entwickler sich mit HTML-Programmierung auskennen. Hier ist der Code trotzdem.

Der Code zeigt das folgende Layout:

  • Titel, Version, Beschreibung und Logo des Plugins
  • ein kurzes Einführungs-Tutorial in Form von Schritten
  • ein hilfreicher Video-Tutorial über YouTube
  • eine zweispaltige Liste von Plugin-Funktionen

Zum Zeitpunkt des Schreibens können Sie die folgenden CSS-Klassen zum Erstellen von Spalten verwenden:

  • .feature-section zusammen mit .one-col: Zum Erstellen einer einzelnen Spalte.
  • .feature-section zusammen mit .two-col: Zum Erstellen von zwei Spalten.
  • .feature-section zusammen mit .three-col: Zum Erstellen von drei Spalten.

Damit ist unsere Plugin-Entwicklung abgeschlossen. Testen wir es auf einer Demo-Website.

Praktische Anwendung

Um das Plugin auf einer Demo-Website zu testen, können Sie die WP-Welcome-Page-Boilerplate-For-TutsPlus von GitHub herunterladen und installieren.

Führen Sie danach die folgenden Schritte aus:

  • Melden Sie sich beim WordPress-Dashboard an.
  • Gehen Sie zum Plugins-Menü und klicken Sie auf Neu hinzufügen.
  • Klicken Sie auf die Schaltfläche Upload Plugin und fügen Sie die von GitHub heruntergeladene gezippte Datei hinzu.
  • Installieren und aktivieren Sie das Plugin

Voila! Wurde zur Begrüßungsseite weitergeleitet.

Wenn Sie fertig sind, kehren Sie zur Startseite des Dashboards zurück und bewegen Sie den Mauszeiger über das Plugins-Menü. Es wird ein weiteres Untermenü hinzugefügt, das als Begrüßungsseite bezeichnet wird. Um Sie noch einmal zu erinnern, ist dies die gleiche Seite, die ich zuvor erstellt habe.

welcome page sub-menu

Die letzte Begrüßungsseite sieht übrigens so aus.

welcome page for the plugin

Hier ist das komplette Layout des Begrüßungsbildschirms.

complete layout of the welcome page

Fazit

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, den Ordner welcome herunterzuladen und die welcome-init.php in Ihr Produkt aufzunehmen (ändern Sie die globalen Konstanten in den welcome - *. Php-Dateien).

Schließlich können Sie alle meine Kurse und Tutorials auf meiner Profilseite abrufen. 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 möchte darauf eingehen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.