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

Wartbare WordPress-Widgets schreiben: Teil 1 von 2

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Beste von Wptuts 2011: Jede Woche bis Januar werden wir einige unserer Lieblingsposts aus dem Jahr 2011 erneut besuchen. Die Plugin-Entwicklung fühlt sich oft wie der wilde Westen an, wenn Sie etwas von Grund auf neu erstellen, ohne dass ein Boilerplate oder ein ähnliches Plugin funktioniert from - Toms zweiteilige Serie über wartbare WordPress-Widgets/Plugins bietet einige praktische Richtlinien, die Sie auf dem Laufenden halten sollten!

Wenn es um Softwareentwicklung geht, sind Frameworks und Bibliotheken beliebt, weil sie hilfreich sind, oder? Sie bieten eine konsistente Möglichkeit, Code zu schreiben und zu organisieren, um die Entwicklung und Wartung so einfach wie möglich zu gestalten.


Die gleichen Prinzipien, die für größere Systeme auf Unternehmensebene gelten, gelten ebenso für kleinere Projekte - wie z. B. WordPress-Plugins -, die von kleinen Teams entwickelt wurden. Und genau wie größere Systeme voller beweglicher Teile sind, ist dies bei WordPress-Plugins der Fall.

Beispiel: Sie haben den Kerncode, der für die Kommunikation mit WordPress (über Filter, Aktionen und Hooks), Verwaltungs-Dashboards, clientseitige Ansichten, JavaScript-Dateien, Stylesheets, Lokalisierungsdateien usw. verantwortlich ist werden mit mindestens vier verschiedenen Programmiersprachen erreicht.

Während meiner Zeit in der WordPress-Entwicklung habe ich einige Boilerplates erstellt, mit denen ich jedes meiner Projekte beginne. In diesem Tutorial erfahren Sie mehr über meinen WordPress Widget Boilerplate-Code, wie Sie ihn in neuen Projekten einsetzen können, und eine Beispielanwendung, mit der Sie Ihr nächstes WordPress-Projekt auf einen soliden Start bringen können.


Ein Widget Boilerplate

Organisation

Wenn es um die Entwicklung geht, versuche ich normalerweise, die Dinge so einfach wie möglich zu halten, indem ich nur die erforderlichen Funktionen plane. Dies ist jedoch ein Fall, in dem ich erschöpfend sein möchte. Es ist fast immer einfacher, mit der Planung einer Heizplatte zu beginnen, wenn Sie alle Komponenten kennen, die möglicherweise in das System eingehen.

Ein Plugin kann letztendlich aus Folgendem bestehen:

  • Kern-Plugin-Code
  • Stylesheets
  • Java-Skripte
  • Lokalisierungsdateien
  • Markup
  • Bilder

Unter Berücksichtigung all dieser Punkte ist das Widget-Boilerplate-Verzeichnis folgendermaßen aufgebaut:

Wir werden uns jedes Verzeichnis später in diesem Artikel genauer ansehen.

Das Skelett

Neben der Dateiorganisation möchte ich auch den Code stubben, der zum Steuern des Widgets verwendet wird. Der WordPress-Codex [1] enthält eine ausführliche Erläuterung der Widget-API [2]. Da es eine Möglichkeit gibt, sie zu erstellen, versuche ich, sie zu befolgen.

Außerdem bin ich ein Fan davon, meinen Code objektorientiert zusammen mit Codekommentaren zu schreiben, um zu erklären, was in den einzelnen Bereichen des Codes vor sich geht. Daher sieht der ursprüngliche Widget-Code folgendermaßen aus:

Beachten Sie, dass der gesamte Code eine Reihe von TODOs enthält. Diese sind besonders nützlich, wenn Sie Ihren Code auf die Boilerplate schreiben.

Beachten Sie, dass es auch drei primäre Codeabschnitte gibt:

  1. Konstrukteur. Diese Funktion ist für die Initialisierung des Widgets, den Import von Lokalisierungsdateien und die Einbeziehung von JavaScript-Quellen und Stylesheets verantwortlich.
  2. API-Funktionen. Diese Funktionen sind die drei Funktionen, die zum Verwalten, Anzeigen und Aktualisieren des Widgets erforderlich sind.
  3. Hilfsfunktionen. Dies sind private Funktionen, mit denen ich bei sich oft wiederholenden oder erforderlichen Aufgaben helfe.

Die drei wichtigsten Funktionen oben, die API-Funktionen, werden für die Entwicklung Ihres Plugins benötigt.

  1. widget() extrahiert die gespeicherten Werte und rendert die öffentliche Ansicht
  2. update() ist dafür verantwortlich, die zuvor gespeicherten Werte mit den vom Benutzer angegebenen Werten zu aktualisieren
  3. form() rendert das Administrationsformular und bietet Funktionen, die zum Speichern neuer Werte erforderlich sind.

Da Plugins häufig zwischen der Verwaltungsfunktionalität und der Client-Funktionalität aufgeteilt werden, teile ich meine JavaScript-Quelle, Stylesheets und HTML entsprechend auf. Ich benenne diese Dateien entsprechend und lösche sie entsprechend aus:

JavaScript-Quellen:

admin.js:

widget.js:

Stylesheets:

admin.css:

widget.css:

Ansichten:

Einfach richtig? Sie können diese gesamte Boilerplate einschließlich der Lokalisierungsdateien und der README auf GitHub anzeigen (und teilen!).

Es gibt jetzt einen Platz für alles und wenn es Zeit für den Versand ist, schließen Sie einfach bestimmte Dateien vom endgültigen Build aus.


Ein Arbeitsbeispiel mit Ihren sozialen Netzwerken

Wenn es um das Programmieren geht, hilft das Üben beim Erlernen einer neuen Sprache oder eines neuen Tipps. Hier finden Sie ein kurzes Beispiel für die Verwendung des oben genannten Boilerplates, um ein einfaches Widget zu erstellen, mit dem Sie Ihre Twitter-, Facebook- und Google+ Links einfach teilen können.

Zunächst listen wir die Anforderungen auf:

  • Eine Administrationsansicht zur Eingabe von Werten. Dies umfasst Markups und Stile.
  • Eine öffentlich zugängliche Ansicht zum Anzeigen von Links zu sozialen Netzwerken. Dies umfasst auch Markups und Stile.
  • Optionen zum Speichern eines Twitter-Benutzernamens, eines Facebook-Benutzernamens und einer Google+ ID

Zweitens öffnen wir die Kesselplatte und beginnen, die erforderlichen Teile herauszuschneiden.

Zuerst definieren wir die Werte für Plugin-Namen, Slug und Gebietsschema. Diese werden im gesamten Code wiederholt verwendet, daher ist es hilfreich, sie als Konstanten zu speichern, um sie leicht abrufen zu können. Suchen Sie die Funktion init_plugin_constants() und stellen Sie sicher, dass Ihr Code folgendermaßen aussieht:

Danach müssen wir den Konstruktor vorbereiten:

Und benutzen die API-Funktionen:

Die endgültige Version des Plugins sollte folgendermaßen aussehen:

Als Nächstes fügen wir dem Verwaltungsformular einige Stile hinzu. Schen Sie /css/admin.css und fügen Sie den folgenden Code hinzu:

Und schreiben wir das Markup, das die Ansicht des Administrationsformulars rendert:

Schließlich müssen wir ein Markup schreiben, um die öffentlich zugängliche Ansicht des Widgets zu rendern, wenn es live im aktuellen Blog ist:

Gemacht und gemacht. Nicht schlecht, oder? Eine Menge Arbeit und Funktionalität sind relativ schnell erledigt.

Sie können den funktionierenden Quellcode (einschließlich einer zugehörigen README-Datei) für dieses Widget auf GitHub oder direkt hier bei Wptuts herunterladen.

Letztendlich bedeutet die Pflege eines Softwareprojekts, dass versucht wird, die Komplexität zu organisieren. Obwohl das obige Boilerplate nicht *die* Art und Weise ist, wie Code organisiert oder verwaltet wird, ist es eine *effektive* Art, Code zu organisieren, und ich habe festgestellt, dass es in vielen meiner Projekte äußerst hilfreich ist und Ihnen hoffentlich bei Ihrer zukünftigen Arbeit hilft.

Denken Sie daran, dass Sie eine Kopie des Boilerplates und des Beispielprojekts aus den entsprechenden GitHub-Repositorys abrufen können. Ich empfehle außerdem dringend, den WordPress-Codex[1] mit einem Lesezeichen zu versehen. Es ist eine enorme Ressource für alle, die fortgeschrittene WordPress-Entwicklung betreiben möchten.

  1. http://codex.wordpress.org
  2. http://codex.wordpress.org/Widgets_API

Weiter zum zweiten Teil...

Schauen Sie sich den zweiten Teil dieser Tutorial-Reihe an, in dem wir uns eingehender mit der Erstellung wartbarer Plugins befassen! Wir werden uns ansehen, wie man hooks in WordPress verwendet - und dann werden wir unser Boilerplate tatsächlich verwenden, um ein weiteres nützliches Plugin zu erstellen. Bereit für den zweiten Teil?

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.