Share
Im vorherigen Tutorial haben wir im Rahmen der WordPress-Entwicklung angefangen, über Namespaces und das automatische Laden mit PHP zu sprechen. Und obwohl wir keines dieser beiden Themen tatsächlich eingeführt haben, haben wir sie definiert und die Grundlagen dafür gelegt, wie wir sie in einem kommenden Tutorial vorstellen werden.
Bevor wir das tun, müssen wir jedoch einige Funktionen abrunden, um unser Plugin abzurunden. Das Ziel ist es, das Plugin und seine Funktionalität fertig zu stellen, so dass wir ein objektorientiertes Basis-Plugin haben, das dokumentiert ist und mit einer Einschränkung gut funktioniert. Es werden keine Namespaces oder automatisches Laden verwendet.
Dies wiederum gibt uns die Möglichkeit zu sehen, wie ein Plugin vor und nach der Einführung dieser Themen aussieht.
Bevor Sie fortfahren, empfehle ich Ihnen, das vorherige Tutorial zu lesen. Auf diese Weise haben Sie ein Verständnis dafür, was Namespaces und automatisches Laden sind, Sie haben die funktionierende Version des Plugins bis zu diesem Punkt (da wir darauf aufbauen werden), und dann werden Sie dazu bereit sein von diesem Punkt aus weitergehen.
Wenn Sie es gelesen haben, können Sie gerne zu diesem Tutorial zurückkehren und Ihre Arbeit fortsetzen.
Wie bei allen meinen Tutorials gehe ich davon aus, dass Sie eine funktionierende Entwicklungsumgebung auf Ihrem Computer haben. Dies beinhaltet Folgendes:
Wenn Sie so weit in der Serie sind (oder eine meiner vorherigen Arbeiten gelesen haben), gehe ich davon aus, dass Sie dies bereits getan haben etwas wie oben bereits vorhanden.
Und wenn Sie das tun, können wir loslegen.
Rückruf aus dem vorherigen Tutorial:
Wir werden ein Plugin erstellen, das das Laden von Stylesheets und JavaScript-Stilen in unser Plugin vereinfacht. Außerdem wird ein Meta-Feld angezeigt, in dem der Benutzer mit einer Frage aufgefordert wird.
Ja, es ist einfach und es ist nicht wahrscheinlich, dass jemand außerhalb der Konzepte, die wir in diesem Blog behandeln, etwas lernen wird. Die Mittel, mit denen wir die Konzepte vermitteln, die wir verwenden, sind das, was wichtig ist.
Dieses Plugin gibt uns die Möglichkeit genau das zu tun.
Am Ende des letzten Tutorials verließen wir ein Plugin, das dem Writer oben in der Seitenleiste des WordPress-Post-Erstellungsbildschirms eine zufällige Frage anzeigt.
Bei jeder Aktualisierung der Seite wird eine neue Frage geladen. Es ist zwar nicht schlecht, aber es gibt einige Verbesserungen, die wir hinsichtlich des Stils des Inhalts in der Meta-Box vornehmen können.
Das heißt, wir können Stylesheets einführen, die uns helfen, eine visuell ansprechendere Präsentation zu erstellen. Außerdem haben wir die Möglichkeit, einige objektorientierte Techniken zu erkunden, die wir beim Arbeiten mit Assets wie Stylesheets verwenden können.
Also fangen wir an.
Für die Zwecke dieses Tutorials werde ich keinerlei Präprozessor verwenden. Ich werde nur Vanille-CSS verwenden. Die Art und Weise, wie wir Assets in die Warteschlange stellen, wird jedoch objektorientierter sein, als es viele WordPress-Entwickler gewohnt sind.
Dies alles trägt dazu bei, dass in dieser Serie Namespaces und automatisches Laden verwendet werden. Beginnen wir mit der Einführung dieser Stylesheets, der Erstellung der erforderlichen Klassenschnittstellen, Klassen und der Kommunikation mit der WordPress-API.
In dem Administrator Erstellen Sie ein Unterverzeichnis mit dem Namen Vermögenswerte. Innerhalb des Vermögenswerte Erstellen Sie ein Unterverzeichnis mit dem Namen css und fügen Sie dann die Datei hinzu admin.css.
Die endgültige Verzeichnisstruktur sollte ungefähr so aussehen:
Wir sind noch nicht bereit, jegliche Art von Stilen anzubieten. Stattdessen müssen wir uns dem serverseitigen Code zuwenden, der für das Einreihen dieses Stylesheets verantwortlich ist.
Wenn es darum geht, Stylesheets und JavaScript zu registrieren und in eine Warteschlange zu stellen, sind die meisten Entwickler von WordPress-Plugins mit den dafür notwendigen Haken vertraut. Konkret beziehe ich mich auf admin_enqueue_scripts und wp_enqueue_style.
Und obwohl wir diese Hooks verwenden werden, werden wir sie auf einfache, objektorientierte Weise einrichten. Nein, diese Serie ist nicht dazu gedacht, sich eingehend mit objektorientierten Prinzipien zu beschäftigen, aber ich bin froh, dass ich sie gegebenenfalls zeigen kann.
Bei der objektorientierten Programmierung wird eine Schnittstelle als solche definiert:
Eine Schnittstelle ist eine Programmierstruktur / -syntax, mit der der Computer bestimmte Eigenschaften für eine Klasse erzwingen kann.
Ein anderer Weg, um daran zu denken, ist folgender:
Wenn Sie eine Klasse haben, die eine Schnittstelle implementiert, die Klasse Muss Definieren Sie die Funktionalität, die die Schnittstelle vorgibt.
Verfügt die Schnittstelle also über zwei Methodensignaturen mit einer bestimmten Sichtbarkeit und einem bestimmten Namen, muss die Klasse, die die Schnittstelle implementiert, über zwei Methoden mit derselben Sichtbarkeit und demselben Namen sowie über eine tatsächliche Methodenimplementierung verfügen.
Und das werden wir tun. Zuerst müssen wir unsere Schnittstelle definieren. Also in der util Verzeichnis erstellen interface-assets.php und fügen Sie dann den folgenden Code hinzu:
Beachten Sie, dass die Schnittstelle die Funktionalität nicht definiert. Stattdessen gibt es an Was Die Klassen, die diese Schnittstelle implementieren, sollten definieren.
Wie Sie vielleicht vermuten, verfügen die Klassen, die diese Schnittstelle implementieren werden, über zwei Methoden und eine tatsächliche Implementierung für jede Funktion. Und wir werden sehen, wie das momentan funktioniert.
Vergewissern Sie sich anschließend, dass Sie diese Datei in die Hauptplugin-Datei aufnehmen:
Als Nächstes müssen wir eine Datei erstellen, die diese Schnittstelle implementiert. Da wir mit CSS-Dateien arbeiten, erstellen wir einen CSS-Loader.
Der CSS-Loader
Dies ist die Klasse, die für die Implementierung der Schnittstelle und die eigentliche Arbeit der Registrierung der Funktion mit dem erforderlichen WordPress-Hook verantwortlich ist (und die Implementierung tatsächlich der Funktion übergibt)..
Wenn Sie sich den Code unten ansehen, sollte er sehr ähnlich aussehen wie in einem früheren Projekt, an dem Sie gearbeitet haben oder vielleicht daran gearbeitet haben:
Der Code oben sollte Seien Sie angesichts der Code-Kommentare relativ leicht zu folgen, aber ich werde kurz beschreiben, was passiert:
Accentsconagua
drin und Enqueue sind beide Funktionen erforderlich, da die Klasse das implementiert Assets_Interface.drin aufgerufen wird, registriert es das Enqueue Funktion mit dem für die Registrierung eines Stylesheets zuständigen Hook.Enqueue Methode registriert die admin.css Datei und verwendet filemtime als Möglichkeit herauszufinden, ob sich die Datei geändert hat oder nicht (was es uns ermöglicht, eine zwischengespeicherte Version der Datei beim Servieren zu sperren).In dieser Implementierung ist die tatsächliche admin.css Datei wird auf jeder Seite hinzugefügt. Das Hinzufügen einer Bedingung, um zu prüfen, welche Seite gerade aktiv ist, und das Bestimmen, ob das Stylesheet hinzugefügt werden soll oder nicht, kann als Übung nach dem Tutorial hinzugefügt werden. Für einen Hinweis, check out get_current_screen ().
Als nächstes müssen wir diese Datei in die Haupt-Plugin-Datei einfügen:
Als Nächstes müssen wir den CSS-Loader instanziieren und ihn aufrufen
drinMethode in der Hauptsachetutsplus_namespace_demoFunktion:drin();Vorausgesetzt, Sie haben alles richtig gemacht, sollten Sie das aktualisieren können Neuen Beitrag hinzufügen Seite anzeigen, die Quelle anzeigen und sehen
admin.cssals verfügbares Stylesheet aufgeführt.Wir haben noch etwas zu tun, bevor wir diesen Teil des Tutorials abschließen können. Wir müssen tatsächlich ein paar CSS schreiben.
Gestalten Sie die Meta-Box
Da sich der Großteil des Tutorials auf einige objektorientierte Techniken konzentriert hat und wir in dieser Serie noch einige neue Themen untersuchen müssen, machen wir diesen Teil relativ einfach.
Anstatt einige Standardstile, wie sie von WordPress bereitgestellt werden, zu verwenden, wollen wir die Meta-Box nur ein wenig verbessern.
Suchen Sie zuerst die
machenFunktion in derMeta_Box_DisplayKlasse. Ändern Sie es so, dass der Inhalt der Datei in einem Absatzelement mit dem ID-Attribut "tutsplus-author-prompt" ausgegeben wird..Dazu führen wir eine neue Methode ein, die eine WordPress-API-Methode zur HTML-Bereinigung verwendet.
array ('id' => array (),),); return wp_kses ($ html, $ allowed_html);Wir rufen diese Funktion dann aus dem
machenMethode, um den Inhalt in der Meta-Box anzuzeigen.question_reader-> get_question_from_file ($ file); $ html = "$ Frage
"; echo $ this-> sanitized_html ($ html);Jetzt können wir admin.css öffnen und einige kleine Änderungen vornehmen, um das Erscheinungsbild der Meta-Box in der zu aktualisieren Neuen Beitrag hinzufügen Bildschirm. Fügen wir das folgende CSS hinzu:
# tutsplus-author-prompt font-style: italic; Text ausrichten: Mitte; Farbe: # 333;An diesem Punkt sollte Ihre Meta-Box nun etwa wie folgt aussehen:
Wie eingangs erwähnt, ist es nichts Besonderes, aber es verbessert das Erscheinungsbild der Frage ein wenig.
Was kommt als nächstes?
Zu diesem Zeitpunkt haben wir verschiedene Klassen, Schnittstellen und andere objektorientierte Funktionen eingeführt. Wir haben ein Plugin, das Daten aus einer Textdatei verwendet, das mit der WordPress-API kommuniziert und Informationen bereinigt, bevor sie auf die Startseite gerendert werden.
Wir haben eine gute Basis, von der aus wir über Namespaces sprechen können. Im nächsten Tutorial werden wir genau das tun. Wenn Sie den Rest der Serie noch nicht kennen gelernt haben, empfehle ich es, da wir nur weiter auf dem Erlernten aufbauen werden.
Wenn Sie in der Zwischenzeit nach anderem WordPress-relevanten Material suchen, finden Sie alle meine vorherigen Tutorials auf meiner Profilseite und Sie können mir auf meinem Blog oder auf Twitter folgen.
Vergessen Sie nicht, bis dahin die Arbeitsversion des Plugins (Version 0.2.0) herunterzuladen, das diesem Beitrag beigefügt ist. Der Link ist in der Seitenleiste unter einer Schaltfläche mit dem Titel verfügbar Anhang herunterladen. Zögern Sie nicht, Fragen in den Kommentaren zu stellen!
Ressourcen
