Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Erstellen Sie ein benutzerdefiniertes WordPress-Plugin von Grund auf

by
Difficulty:AdvancedLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Dieses Tutorial beschreibt die Implementierung eines Wordpress-Plugins von Grund auf neu.  Das Plugin verbindet sich mit einer externen OSCommerce-Datenbank und zeigt zufällige Produkte auf Ihrer Wordpress-Seite an.  Es implementiert auch eine Konfigurationsseite für das Wordpress-Admin-Panel. 



1. Einleitung 

Wordpress gewinnt jeden Tag mehr und mehr an Popularität, nicht nur als Blogging-Plattform, sondern auch als Basis-CMS, wodurch seine grundlegenden Funktionen verbessert und erweitert werden und für viele Entwickler zu einer täglichen Notwendigkeit werden.  Glücklicherweise haben die Wordpress-Entwickler diese Bedürfnisse vorhergesehen und die Möglichkeit hinzugefügt, die grundlegende Funktionalität durch Hinzufügen von Plugins anzupassen.  Grundsätzlich ist ein Wordpress-Plugin ein (mehr oder weniger) eigenständiges Stück Code, das in verschiedenen Abschnitten und Phasen innerhalb einer Seite oder Site ausgeführt werden kann.

Im heutigen Tutorial sprechen wir über das Erstellen eines Wordpress-Plugins, das Produkte aus einer externen OSCommerce-Shop-Datenbank extrahiert und anzeigt.  Wir beginnen damit, die Dateistruktur eines Plugins zu beschreiben und wo es in der Wordpress-Struktur enthalten sein muss, dann schauen wir uns genauer an, wie wir unser Plugin für Wordpress sichtbar machen und es in Aktionen integrieren, die von seinem Frame ausgeführt werden.  Als nächstes erstellen wir ein Konfigurationsfenster für unser Plugin, damit der Site-Administrator es an seine Bedürfnisse anpassen kann.  Anschließend implementieren wir die Frontend-Funktionen selbst, die mit der OSCommerce-Datenbank interagieren und die erforderlichen Daten extrahieren.  Schließlich ändern wir die Standardvorlage, um die extrahierten Daten in der Seitenleiste anzuzeigen.  Aufgeregt? Lass uns anfangen! 

Final Product

2. Erste Schritte 

Während es möglich wäre, diesem Tutorial durch einfaches Lesen zu folgen, würde ich empfehlen, Wordpress auf Ihrem Computer zu installieren und dem Tutorial zu folgen, das alle Schritte implementiert.  Dazu benötigen Sie einen lokalen Server, der auf Ihrem Rechner läuft, wie zum Beispiel XAMPP.  Sobald Sie es ausgeführt haben, laden Sie Wordpress herunter und installieren Sie es.  Auf der Wordpress-Site finden Sie ausführliche Informationen zum Installationsprozess und zur Fehlerbehebung.  Für dieses Tutorial verwenden wir Release 2.7 

Außerdem müssen Sie einen OSCommerce-Shop auf Ihrem Computer einrichten.  Sie können die neueste Version hier herunterladen: http://www.oscommerce.com/solutions/downloads 


3. Dateien und Ordner 

Zuerst müssen wir unsere grundlegenden Dateien und die Ordnerstruktur erstellen.  Wordpress speichert seine Plugins im Ordner wp-content / plugins /.  Dies ist der Ort, an dem wir unsere Dateien hinzufügen werden.  Normalerweise, wenn Ihr Plugin sehr einfach sein wird, werden Sie den gesamten Code in eine einzige PHP-Datei einfügen.  In diesem Fall speichern Sie die Datei einfach in dem oben genannten Ordner.  In unserem Fall werden wir jedoch zwei Dateien verwenden (eine für die Haupt-Plugin-Datei und eine für die Implementierung der Verwaltungsseite). Daher werden wir alle unsere Dateien in einen bestimmten Ordner legen, den wir oscommerce_importer nennen werden. Mach weiter und erstelle diesen Ordner.


4. Erstellen der Plugin-Datei 

Als nächstes müssen wir unsere Haupt-Plugin-Datei erstellen.  Wir nennen es oscommerce_importer.php.  Sie können es wirklich nennen, was Sie wollen, es macht keinen Unterschied. 

Wenn Sie jetzt Ihr Wordpress-Administrationsfenster öffnen und zu den Plugins-Abschnitten navigieren, sieht Ihr Bildschirm ungefähr so ​​aus: 

Admin panel

Administrationsmenü Wie Sie sehen können, gibt es nicht das geringste Anzeichen für unser neues Plugin.  Es ist Zeit das zu ändern und Wordpress mitzuteilen, dass unsere Datei ein Plugin implementieren wird.  Der Prozess dafür ist sehr einfach.  Alles, was wir tun müssen, ist einen pluginspezifischen Informationsheader zu unserer neu erstellten Datei hinzuzufügen.  Dieser Standard-Header sieht folgendermaßen aus: 

Ganz einfach, findest du nicht?  Sie können natürlich den Inhalt dieses Headers nach Ihren Wünschen ändern, aber stellen Sie sicher, dass Sie alle Zeilen behalten, sonst wird Wordpress Ihr Plugin nicht richtig erkennen.

Wenn Sie die Plugin-Seite Ihres Administrationsbereichs aktualisieren, sehen Sie jetzt, dass unser Plugin zusammen mit den anderen aufgelistet wird. 

Admin panel with deactivated plugin

Admin Panel mit deaktiviertem Plugin Sehen Sie, wie alle relevanten Informationen wie Name, Beschreibung, Autor, URL aus dem Informationsheader extrahiert werden?  Aus diesem Grund ist es immer wichtig, diese Informationen korrekt auszufüllen.  Lassen Sie uns unser Plugin aktivieren, indem Sie auf Activate rechts neben dem Plugin-Eintrag klicken. 


5. Arbeiten mit Aktionshaken 

Unser Plugin wird nun im Administrationsbereich angezeigt, so dass es Wordpress bekannt ist.  Es tut jedoch nichts, da es nichts außer dem Informationsheader enthält.  Wir werden das jetzt ändern. 

Wordpress bietet eine großartige Möglichkeit, Ihren Plugin-Code an verschiedenen Stellen in der Vorlage einzufügen, sei es physische Positionen innerhalb einer Seite oder logische Positionen beim Erstellen einer Seite, die angezeigt werden soll.  Zuerst werden wir uns die zweite Kategorie genauer ansehen, die logischen Positionen, besser bekannt als Action-Hooks.

Aktions-Haken 

Sie können Aktionshaken als Rückruffunktion anzeigen.  Wann immer Wordpress eine bestimmte Operation ausführt, wie zum Beispiel das Anzeigen der Seitenfußzeile, erlaubt es Ihren Plugins, ihren eigenen Code auszuführen, der genau in diesem Moment ausgeführt werden muss. 

Zum besseren Verständnis betrachten wir ein generisches Plugin namens my_plugin, das eine Funktion namens mp_footer () implementiert, die immer dann ausgeführt wird, wenn der Seitenfuß angezeigt wird.  Wir werden Wordpress anweisen, diese Funktion aufzurufen, sobald die Fußzeile mit einer speziellen Funktion namens add_action () angezeigt wird: 

Die Funktion add_action () übernimmt den Namen des Aktions-Hooks als ersten Parameter und den Namen der Funktion, die als zweiter Parameter ausgeführt werden muss.  Dieser Funktionsaufruf wird zu Ihrer Haupt-Plugin-Datei hinzugefügt (diejenige, die den Information-Header enthält), normalerweise direkt unter dem Funktionscode, der ausgeführt werden muss (mp_footer () in unserem Beispiel).  Sie finden die vollständige Liste der verfügbaren Aktionshaken im Wordpress Codex.

Wir werden Action-Hooks im nächsten Kapitel verwenden, wo wir die Verwaltungsseite für unser Plugin erstellen werden. 


6. Erstellen der Verwaltungsseite des Plugins 

Wir beginnen mit der Implementierung des Moduls, indem wir seine konfigurierbaren Parameter definieren und diese dem Site-Administrator zugänglich machen.  Mal sehen, was diese Konfigurationsbits wären:

  • Datenbankeinstellungen 
    • Datenbank-Host 
    • Name der Datenbank 
    • Datenbankbenutzer 
    • Datenbankkennwort 
  • Einstellungen speichern 
    • URL speichern 
    • Ordner für die Produktbilder 

Als erstes benötigen wir den Datenbank-Host, den Namen, den Benutzer und das Passwort, um sich mit ihm zu verbinden und die benötigten Daten zu extrahieren.  Zweitens benötigen wir einige allgemeine Daten über den Store, wie seine URL und den Ordner, in dem die Produktbilder gespeichert sind.  Wir benötigen diese Informationen, um die Links erstellen zu können, da die in der Datenbank enthaltenen Pfade alle relativ zum zuvor erwähnten Produktbildordner sind.

Jetzt, da wir wissen, was wir in das Konfigurationsfenster einbeziehen wollen, ist es an der Zeit, es zu implementieren.  Wir beginnen mit dem Erstellen eines neuen Menüelements, um auf die Seite zuzugreifen, und legen sie im Einstellungsmenü ab.  Erinnern Sie sich an unseren Chat über die Action-Hooks im vorherigen Kapitel?  Es ist Zeit, diese Funktion zu nutzen. 

Wenn Sie über die Liste der Aktions-Hooks blättern, werden Sie sehen, dass Wordpress auch einen Befehl liefert, der aufgerufen wird, wenn die grundlegende Menüstruktur generiert wurde (admin_menu). Dies ist also der optimale Ort zum Eingeben und Erstellen von eigenen Menüpunkt. 

Jetzt, wo wir die Aktion identifiziert haben, die wir verwenden werden, müssen wir nur noch unsere eigene Funktion definieren, die aufgerufen wird, wenn dieser Aktions-Hook ausgeführt wird. Wir rufen unsere Funktion oscimp_admin_actions () auf, wobei oscimp_ für oscommerce-Importer steht und dazu verwendet wird, einen möglicherweise eindeutigen Funktionsnamen zu erstellen, der nicht mit anderen Funktionen in Wordpress oder einem seiner Plugins übereinstimmt.  Mal sehen, wie der Code aussehen wird:

Wie Sie sehen, erstellen wir unsere Funktion oscimp_admin_actions () und verknüpfen sie dann mit der Aktion add_action () mit dem Aktions-Hook admin_menu.  Der nächste Schritt wäre dann, der Funktion oscimp_admin_actions () etwas Code hinzuzufügen, um den neuen Menüeintrag tatsächlich zu erstellen. 

Wie bei den meisten Wordpress-Dingen ist auch das Hinzufügen eines neuen Menüelements sehr einfach. Wie bei den meisten Wordpress-Dingen ist auch das Hinzufügen eines neuen Menüelements sehr einfach.  Wir möchten unseren neuen Menüeintrag dem Einstellungsmenü hinzufügen, in diesem Fall ist die Funktion, die wir benötigen, add_options_page ().  Wir fügen den Code in die Funktion oscimp_admin_actions () ein.

Wenn Sie Ihre Admin-Seite aktualisieren, wird der neue Menüeintrag unter Einstellungen angezeigt.

New menu item

Jedes vorhandene Menü verfügt über eine eigene Funktion zum Hinzufügen von Untermenüs.  Wenn wir beispielsweise unseren Untermenüeintrag anstelle von Einstellungen dem Menü Extras hinzufügen möchten, verwenden wir die Funktion add_management_page () anstelle von add_options_page ().  Weitere Informationen zu den verfügbaren Optionen finden Sie im Abschnitt Hinzufügen von Verwaltungsmenüs im Wordpress-Codex.

Wenn wir zu der neu hinzugefügten Codezeile zurückkehren, werden Sie wahrscheinlich den letzten Parameter bemerken.  Dies ist eigentlich ein Funktionsname, der aufgerufen wird, wenn der neu hinzugefügte Menüpunkt angeklickt wird und zum Erstellen der Verwaltungsseite unseres Plugins verwendet wird.  Als nächstes werden wir diese neue Funktion hinzufügen.  Bevor wir fortfahren, sollten wir für einen Moment anhalten und darüber nachdenken, was auf dieser Seite implementiert wird. 

Wir haben bereits die Parameter definiert, die wir konfigurierbar machen wollen (Datenbank-Host, Name, Benutzer, usw.), damit diese in ein Formular aufgenommen werden müssen, damit der Benutzer die Daten an die Datenbank senden kann.  Sobald das Formular definiert ist, benötigen wir ein wenig Code, der die gesendeten Daten aus dem Formular extrahiert und in der Datenbank speichert.  Zu guter Letzt benötigen wir Code, um die vorhandenen Daten aus der Datenbank zu extrahieren (falls vorhanden) und das Formular mit diesen Werten vorzufüllen.  Wie Sie sehen können, gibt es einige Dinge, die Sie tun können. Es ist eine gute Idee, diese Funktionalität in eine eigene Datei zu unterteilen.  Wir nennen die Datei oscommerce_import_admin. Wir nennen die Datei oscommerce_import_admin.

Wie bereits erwähnt, müssen wir die Funktion erstellen, die unsere Plugin-Konfigurationsseite anzeigt (wir haben diese Funktion oscimp_admin () genannt).  Der Code innerhalb dieser Funktion wird in unserer neu erstellten PHP-Datei oscommerce_import_admin.php enthalten sein

Wenn Sie nun auf den Link im Menü Einstellungen klicken, werden Sie auf eine leere Seite weitergeleitet.  Dies liegt daran, dass unsere Datei oscommerce_import_admin.php noch leer ist. 

Empty plugin configuration page

Als nächstes werden wir unsere Form erstellen.  Dafür verwenden wir den folgenden Code:

Den Code erklären

Wenn Sie mit HTML und PHP vertraut sind, wird der obige Code Sinn machen, aber lassen Sie uns trotzdem kurz durch die Zeilen gehen. 

  • Wir beginnen damit, ein div mit dem Klassenumbruch zu erstellen.  Dies ist eine Standard-Wordpress-Klasse, die unsere Seite wie jede andere Seite im Administrationsbereich aussehen lässt. 
  • Das Formular verwendet die POST-Methode, um Daten an sich selbst zu senden.  Das bedeutet, dass die Formulardaten von derselben Seite empfangen werden, sodass wir den Datenbankaktualisierungscode derselben Datei hinzufügen können. 
  • Als nächstes gibt es ein verstecktes Feld, das verwendet wird, um zu bestimmen, ob die aktuelle Seite angezeigt wird, nachdem der Benutzer die Schaltfläche Update Options gedrückt hat oder nicht.  Wenn die Seite die Formulardaten empfängt, wird der Wert dieses Felds auf Y gesetzt. 
  • Die nächsten Zeilen erstellen die Formulareingabefelder für die Datenbank und speichern Einstellungen.  Wie Sie leicht sehen können, werden die Wertparameter durch den Inhalt von PHP-Variablen festgelegt.  Wir werden bald darüber reden. 
  • Wenn Sie nun die Admin-Seite aktualisieren, sehen Sie unser neu erstelltes Formular.  Wenn Sie jedoch auf die Schaltfläche Update Options (Optionen aktualisieren) klicken, hat dies keine Auswirkungen, außer dass die Seite aktualisiert wird und die Formularfelder leer sind. 
Plugin configuration page with form

Handhabung der Daten 

Sobald das Formular bereit ist, kümmern wir uns um die Verarbeitung der Formulardaten selbst, aktualisieren die Datenbank und rufen vorhandene Optionswerte aus der Datenbank ab.  Dazu müssen wir zuerst entscheiden, ob die aktuelle Seite angezeigt wird, nachdem der Benutzer die Schaltfläche Update Options gedrückt hat oder nicht.  Dazu analysieren wir den Wert des ausgeblendeten Felds oscimp_hidden des Formulars.  Der folgende Code wird am Anfang unserer Datei oscommerce_import_admin.php vor dem Code zum Anzeigen des Formulars hinzugefügt: 

Als nächstes werden wir die Formulardaten verarbeiten und die Plugin-Optionen in der Datenbank entsprechend aktualisieren.  Dazu verwenden wir die Funktion update_option ().  Der erste Parameter dieser Funktion ist der Optionsname, der später verwendet wird, um diese Option und ihren Wert eindeutig zu identifizieren.  Der zweite Parameter ist der Wert, der zugewiesen werden soll.

Der obige Code ist ziemlich selbsterklärend, aber bitte beachten Sie, dass wir hier die PHP-Variablen verwenden, die wir bereits beim Erstellen des Formulars erwähnt haben.  Diese Variablen werden mit den aktuellen Formulardatenwerten aktualisiert und im Formular selbst angezeigt.  Geh, sieh es dir an! Aktualisieren Sie die Konfigurationsseite und geben Sie Ihre OSCommerce-Datenbankeinstellungen sowie Ihre Shop-Parameter ein und drücken Sie Update Options

Wenn alles wie oben beschrieben implementiert wurde, wird eine Meldung zum Speichern der Optionen angezeigt, und die Formularfelder enthalten die Daten, die Sie gerade eingegeben haben. 

Plugin configuration page with success message

Plugin-Konfigurationsseite mit Erfolgsmeldung Zu guter Letzt müssen wir das Formular mit den Datenbankdaten füllen, wenn der Benutzer die Konfigurationsseite öffnet.  Dazu verwenden wir die Funktion get_option (), die die angegebene Option aus der Datenbank abruft.

Sie können den obigen Code testen, indem Sie einfach zu einer anderen Seite im Admin-Bereich navigieren und dann erneut zu dieser Seite zurückkehren, indem Sie im Einstellungsmenü auf den OSCommerce-Produktanzeige-Menüpunkt klicken.  Wenn alles gut geht, sehen Sie das Formular mit allen Feldern, die mit den von Ihnen eingegebenen Daten ausgefüllt sind. 

Plugin configuration page with pre-populated form

Plugin-Konfigurationsseite mit vorgefülltem Formular Mit diesem letzten Codeabschnitt haben wir die Implementierung der Konfigurationsseite des Plugins abgeschlossen.Sehen wir uns nun an, was in diesem Kapitel getan wurde:  

  • Wir haben definiert, welche Parameter vom Site-Administrator konfiguriert werden müssen 
  • Wir haben einen Aktions-Hook hinzugefügt, wenn das Menü im Administrationsbereich angezeigt wird, damit wir einen neuen Untermenüpunkt für unser Plugin hinzufügen können 
  • Wir haben dem Einstellungsmenü einen neuen Untermenüpunkt hinzugefügt, der auf die Konfigurationsseite unseres Plugins verweist 
  • Wir haben eine Funktion definiert, die die Konfigurationsseite des Plugins erstellt und den Code in einer zweiten PHP-Datei trennt 
  • Wir haben das Formular erstellt, das die Benutzereingaben für jedes der konfigurierbaren Datenbits enthält 
  • Wir haben die Datenbankaktualisierungsfunktion erstellt 
  • Wir haben eine Funktion erstellt, die das Formular mit den in der Datenbank gespeicherten Optionswerten vorbele

7. Erstellen der Benutzerfunktion 

Nun, bis jetzt lief alles recht gut, aber unser Plugin ist noch unbrauchbar, weil wir nicht das Teil implementiert haben, das es uns tatsächlich ermöglicht, die Produkte im Frontend anzuzeigen. 

Damit unsere Benutzer die Produkte im Frontend anzeigen können, müssen wir eine Funktion deklarieren, die aus dem PHP-Code der Vorlage aufgerufen werden kann und den HTML-Code zurückgibt, der in die Vorlage eingefügt werden soll.  Wir nennen diese Funktion oscimp_getproducts () und akzeptieren die Anzahl der Produkte, die als Funktionsparameter angezeigt werden sollen.  Die Funktion selbst wird in der Hauptdatei unseres Plugins, oscommerce_import.php, implementiert 

Wie Sie sehen, weisen wir unserem Funktionsparameter einen Standardwert zu, so dass unsere Benutzer die Funktion sowohl mit als auch ohne Parameter aufrufen können.  Wenn die Funktion mit einem Parameter wie oscimp_getproducts (3) aufgerufen wird, werden drei Produkte angezeigt.  Wird die Funktion ohne Parameter wie oscimp_getproducts () aufgerufen, wird nur ein Produkt angezeigt. 

Als erstes würde es in unserer Funktion sein, eine Verbindung zur OSCommerce-Datenbank herzustellen.  Dank unserer Plugin-Konfigurationsseite haben wir jetzt alle Informationen, die wir brauchen: Datenbank-Host, Name, Benutzer und Passwort.  Wir werden die integrierte wpdb-Klasse verwenden, um ein neues Datenbankobjekt zu erstellen.

Sobald dies geschehen ist, deklarieren wir eine Variable, die den HTML-Code enthalten wird und starten die Abfrage der OSCommerce-Datenbank für jede der angegebenen Anzahl von Produkten.  Der folgende Code implementiert lediglich diese Abfrage-Schleife und kann weiter verbessert werden, indem zum Beispiel nach Duplikaten gesucht wird. Dies ist jedoch nicht das Thema dieses Tutorials.

Dies ist jedoch nicht das Thema dieses Tutorials. Daher werden wir es aus Gründen der Lesbarkeit einfach halten. Sobald dies erledigt ist, müssen wir lediglich den Funktionsaufruf oscimp_getproducts () in die Vorlage einfügen.  Wir werden drei Produkte am unteren Rand der Seitenleiste anzeigen, also werden wir die Datei sidebar.php unserer Vorlage ändern, indem wir den folgenden Code direkt unter dem Listenelement einfügen, das die Meta-Links enthält: 

Wenn Sie Ihre Startseite jetzt aktualisieren, werden die drei zufälligen Produkte am unteren Rand der Seitenleiste angezeigt.

Frontpage with random products

Mit diesem letzten Code haben wir die Implementierung der Front-End-Funktion abgeschlossen. 


8. Schlussfolgerung 

Wir haben jetzt ein Wordpress-Plugin von Grund auf neu implementiert.  Fassen wir zusammen, was gemacht wurde: 

  • Wir haben festgelegt, wie wir unsere Plugin-Dateien speichern 
  • Wir haben den Informationsheader definiert, um unser Plugin für Wordpress sichtbar zu machen 
  • Wir haben über die Aktionshaken und ihre Verwendung gesprochen 
  • Wir haben definiert, welche Parameter vom Site-Administrator konfiguriert werden müssen 
  • Wir haben einen Aktions-Hook hinzugefügt, wenn das Menü im Administrationsbereich angezeigt wird, damit wir einen neuen Untermenüpunkt für unser Plugin hinzufügen können 
  • Wir haben dem Einstellungsmenü einen neuen Untermenüpunkt hinzugefügt, der auf die Konfigurationsseite unseres Plugins verweist 
  • Wir haben eine Funktion definiert, die die Konfigurationsseite des Plugins erstellt und den Code in einer zweiten PHP-Datei trennt 
  • Wir haben das Formular erstellt, das die Benutzereingaben für jedes der konfigurierbaren Datenbits enthält 
  • Wir haben die Datenbankaktualisierungsfunktion erstellt 
  • Wir haben eine Funktion erstellt, die das Formular mit den in der Datenbank gespeicherten Optionswerten vorbelegt 
  • Wir haben unsere Benutzerfunktion für die Verwendung in der Vorlage erstellt 
  • Wir haben uns mit der OSCommerce-Datenbank verbunden 
  • Wir haben die OSCommerce-Datenbank abgefragt, um die Produkt-ID, das Image und den Namen zu extrahieren 
  • Wir haben den HTML-Code zum Anzeigen der extrahierten Daten erstellt 
  • Wir haben die Benutzerfunktion in die Seitenleiste der Vorlage eingefügt

Ich hoffe, dieses Tutorial gab Ihnen alle Informationen, die Sie benötigen, um ein Wordpress-Plugin von Anfang an zu erstellen.  Bitte zögern Sie nicht, Ihre Kommentare unten zu posten. 

Danke fürs Lesen!  :) 

  • Abonnieren Sie den NETTUTS RSS-Feed für mehr tägliche Web-Entwicklungstuts und -artikel. 

Zusätzliche Ressourcen 

Wenn Sie neu bei der Entwicklung von WordPress-Plugins sind, könnten Sie sich auch für das WordPress-Plugin für Entwicklungsdienste in Envato Studio interessieren, wo wir auch eine große Auswahl an WordPress-Ressourcen haben.

Advertisement
Advertisement
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.