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

Erstellen eines WordPress-basierten Frontends: Einführung und Einrichtung

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Bootstrapping, Routing, and Services

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

In der Einführungsreihe zur WP REST-API haben wir gelernt, die grundlegenden Funktionen der API und die Flexibilität beim Erstellen von Apps mit dem WordPress-Backend zu nutzen. Wir haben uns die Ressourcen, Routen und Methoden angesehen, die für die Durchführung von CRUD-Operationen unterstützt werden.

In dieser Reihe zum Erstellen eines WordPress-basierten Frontends mit der WP REST-API und AngularJS werden wir das in der Einführungsserie erworbene Wissen nutzen. Wir werden lernen, wie wir dieses Wissen nutzen können, um das bisher von WordPress unterstützte herkömmliche Theme-Admin-Modell zu entkoppeln. Wir planen und erstellen eine einseitige Anwendung (die ich Quiescent genannt habe) mit einem WordPress-Backend, das Beiträge, Benutzer und Kategorien enthält, in denen Seiten aufgelistet sind. Wir werden das AngularJS-Routing konfigurieren und eine benutzerdefinierte Direktive und Controller für die oben genannten Ressourcen erstellen.

Im ersten Teil der Serie werden wir:

  • Bewerten Sie die Anforderungen für den Aufbau des Frontends mithilfe von Drahtgittern
  • Laden Sie das Bare-Bones-HTML-Paket herunter und installieren Sie es, um mit der Arbeit zu beginnen
  • Erstellen Sie ein begleitendes WordPress-Plugin basierend auf den oben genannten Bewertungen

Beginnen wir also mit der Bewertung der Anforderungen für den Aufbau des Frontends.

Dinge planen

Der erste Teil zu Beginn eines Projekts sollte darin bestehen, die Projektanforderungen zu bewerten und die Dinge entsprechend zu planen. Dies bildet eine solide Grundlage für das Projekt und hilft uns, klar über die Funktionalität und die Merkmale der Anwendung nachzudenken.

Wie bereits erwähnt, müssen für die folgenden drei Ressourcen Seiten und einzelne Seiten aufgelistet werden:

  1. Beiträge
  2. Kategorien
  3. Benutzer

Lassen Sie uns zunächst über das Erstellen von Vorlagen für die Posts-Ressource sprechen. Wir benötigen zwei Vorlagen für diese Ressource, d. h. Eine Auflistungsvorlage und eine einzelne Beitragsvorlage. Die Auflistungsvorlage zeigt eine bestimmte Anzahl von Posts mit Paginierungslinks, um zu den nächsten oder vorherigen Posts zu gelangen. In der Vorlage für einen einzelnen Beitrag wird ein einzelner Beitrag auf der Seite angezeigt.

Unten ist das Drahtmodell für die Post-Listing-Seite:

Post listing templatePost listing templatePost listing template

Und das folgende ist das Drahtmodell für die einzelne Post-Vorlage:

Single post templateSingle post templateSingle post template

Wie wir in den obigen Drahtmodellen sehen können, sind die Anforderungen ziemlich einfach, genau wie bei jeder Standard-Blog-Vorlage. Wenn wir jedoch die obigen Drahtmodelle mit der Standardantwort vergleichen, die die WP REST-API für Posts bereitstellt, kommen wir zu dem Schluss, dass die folgenden Elemente im Standardantwortobjekt fehlen:

  • vorgestellter Bildlink
  • Autorenname
  • Kategorienamen und Links

Daher müssen wir die Antwort für die Posts-Ressource ändern, um diese Elemente einzuschließen. Wir werden das später in diesem Tutorial tun, indem wir ein Companion-Plugin für WordPress erstellen.

Lassen Sie uns nun die Anforderungen für die Ressourcen Categories und Users anhand der folgenden beiden Drahtmodelle analysieren.

Unten ist das Drahtmodell für die Kategorievorlage:

Category templateCategory templateCategory template

Und hier ist das Drahtmodell für die Benutzervorlage:

Wenn Sie sich die beiden oben genannten Drahtmodelle ansehen, wird deutlich, dass sie keine zusätzlichen Felder in ihren Standardantworten registrieren müssen. Wenn wir uns jedoch die Autorenprofilseite genau ansehen, müssen wir eine zusätzliche Gravatargröße hinzufügen, um die Bildgröße in unserem HTML zu berücksichtigen. Diese Funktionalität kann auch im Companion Plugin erreicht werden.

Eines der grundlegenden und am meisten befürworteten Prinzipien des Software-Engineerings ist das DRY-Prinzip (Don't Repeat Yourself). Wenn wir die obigen Modelle analysieren, sehen wir, dass die Post-Auflistung auf fast allen Auflistungsvorlagen in der einen oder anderen Form wiederholt wird. Daher werden wir eine gemeinsame AngularJS-Direktive für die Auflistung von Posts erstellen, die für alle oben genannten Vorlagen verwendet werden soll. Diese Direktive enthält Funktionen wie die Paginierung von Posts und das Abrufen einer Teilmenge von Posts für bestimmte Parameter.

Nachdem wir die allgemeinen Anforderungen für die Erstellung der Anwendung bewertet haben, können wir uns ab dem nächsten Abschnitt mit dem Codierungsteil befassen.

Anforderungen an das Lernprogramm

Bevor wir mit der Erstellung der Anwendung beginnen, müssen bestimmte Anwendungen auf Ihrem System installiert sein. Diese Anwendungen sind:

  • Eine WordPress-Installation mit aktiviertem WP REST API-Plugin und einigen Demo-Daten
  • Git zum Klonen des HTML-Repositorys (nicht erforderlich, da Sie das Repository auch direkt von der GitHub-Site über die GUI herunterladen können)
  • Node.js für die Arbeit mit npm- und gulp-Befehlen
  • GulpJS zum Ausführen von Minimierungs- und Optimierungsaufgaben im HTML-Paket

Wenn Sie schon eine Weile für das Web entwickelt haben, besteht eine gute Chance, dass Sie dieses Zeug bereits auf Ihrem System installiert haben. Andernfalls empfehle ich Ihnen, einen Blick auf die offiziellen Websites und die Dokumentation zu werfen, um sie einrichten zu lassen.

Herunterladen und Installieren des HTML-Pakets

Um Ihnen das Verfolgen zu erleichtern, habe ich bereits grundlegende HTML-Vorlagen für die oben analysierten Drahtmodelle erstellt.

Zunächst müssen Sie das HTML-Paket-Repository von GitHub klonen:

Nachdem Sie das Repository geklont haben, müssen Sie mit dem folgenden Befehl in das Verzeichnis navigieren:

Es spielt keine Rolle, ob Sie OS X, Windows oder Linux verwenden, da der obige Befehl cd auf fast allen Betriebssystemen funktioniert.

Jetzt müssen Sie Node.js-Module installieren mit:

Der obige Befehl dauert einige Zeit, abhängig von der Geschwindigkeit Ihrer Internetverbindung.

Nachdem Sie die erforderlichen Module installiert haben, können Sie die Quelle mit dem Befehl gulp kompilieren:

Dadurch wird ein neuer Ordner namens dist erstellt, der die kompilierte Quelle für HTML und seine Assets enthält.

Der oben ausgeführte Befehl npm install installiert auch ein Node.js-Modul namens http-server, mit dem Sie schnell und einfach einen einfachen HTTP-Server in einem beliebigen Verzeichnis einrichten können. Sie können die kompilierte Quelle überprüfen, indem Sie in das Verzeichnis dist navigieren und den folgenden Befehl ausführen:

Dadurch werden einige Adressen auf dem Bildschirm für den Server wiedergegeben, die Sie in Ihren Browser eingeben können, um den HTML-Code anzuzeigen.

Hier geht es darum, das grundlegende HTML-Paket herunterzuladen und zu kompilieren, das als Rückgrat für unsere zukünftige Entwicklung dient.

Erstellen des Quiescent Companion-Plugins

Nachdem wir die erforderlichen Module für das HTML-Paket heruntergeladen und installiert haben, können wir nun die serverseitige Funktionalität zur Unterstützung des Frontends erstellen.

In einem früheren Abschnitt haben wir die Anforderungen für die Erstellung des Frontends mit der WP REST API und AngularJS analysiert. Schauen wir uns noch einmal die erforderlichen Elemente an, die wir zum Erstellen des Frontends benötigen:

  1. Ausgewähltes Bild für den Beitrag. Wir müssen auch eine neue Bildgröße in WordPress registrieren, um die Bildgröße in unserem HTML zu berücksichtigen.
  2. Autorenname des Beitrags. Dies kann mithilfe der Autoren-ID abgerufen werden, die im Standardantwortobjekt verfügbar ist.
  3. Liste der mit dem Beitrag verknüpften Kategorien. Dies kann mithilfe der Post-ID erreicht werden.
  4. Eine neue Bildgröße für den Gravatar, um die Bildgröße des Autorenprofils in unserem HTML zu berücksichtigen.

Wir benötigen also drei zusätzliche Felder für die Posts-Ressource und müssen neue Bildgrößen für das vorgestellte Bild und den Benutzergravatar hinzufügen.

Beginnen wir mit der Erstellung eines neuen Verzeichnisses für unser Plugin im Ordner /wp-content/plugins und benennen Sie es als quiescent-companion. Erstellen Sie in diesem Verzeichnis eine neue PHP-Datei mit dem Namen quiescent-Companion.php und fügen Sie den folgenden Code für die Plugin-Definition ein:

Wenn Sie mich seit meiner Einführungsserie zur WP REST-API begleitet haben, haben Sie bereits gelernt, die Serverantwort für eine bestimmte Ressource mithilfe der Methode register_rest_field() zu ändern. Wenn Sie es sich noch nicht angesehen haben, empfehlen wir Ihnen, den Artikel über das Ändern von Serverantworten zu lesen.

Die Methode register_rest_field() akzeptiert drei Argumente für den Namen der zu ändernden Ressource, den Namen des Felds und ein Array von Argumenten für das Feld. Dieses Array von Argumenten enthält den Abrufrückruf, den Aktualisierungsrückruf und das Schema des Feldes.

Hier ist der Code zum Hinzufügen eines benutzerdefinierten Felds für das vorgestellte Bild des Beitrags:

Die Methode register_rest_field() wird mit der Aktion rest_api_init aufgerufen.

Es wird immer empfohlen, dem Namen des benutzerdefinierten Felds ein Präfix voranzustellen, damit es in Zukunft nicht mehr mit anderen Feldern in Konflikt steht. Daher haben wir unser benutzerdefiniertes Feld quiescent_featured_image genannt. Die Methode zum Abrufen dieses vorgestellten Bildes ist quiescent_get_featured_image und wird wie folgt definiert:

Diese Methode erhält drei Argumente für das Post-Array, den Feldnamen und das Anforderungsobjekt. Das Post-Array enthält die erforderlichen Informationen zum aktuellen Post, einschließlich ID, Titel, Inhalt usw. Mithilfe dieser Informationen können wir beliebige Informationen abrufen, die mit dem Beitrag verknüpft sind. Daher verwenden wir die Medien-ID für den Beitrag, um den Link des vorgestellten Bildes des Beitrags mithilfe der Methode wp_get_attachment_image_src() abzurufen.

Zusätzlich zu dem obigen Code zum Registrieren des benutzerdefinierten Felds für den vorgestellten Bildlink des Beitrags müssen wir auch eine benutzerdefinierte Bildgröße entsprechend registrieren:

Der obige Code verwendet die Methode add_image_size() zum Registrieren einer neuen Bildgröße von 712 x 348 Pixel, und wir verwenden quiescent_post_thumbnail als Namen für die neue Bildgröße.

Speichern Sie den Code und stellen Sie sicher, dass das Quiescent Companion-Plugin in Ihrem WP-Administrator aktiviert ist. Senden Sie eine Testanforderung an die Route /wp/v2/posts, und der Server gibt den Link des vorgestellten Bilds im Feld quiescent_featured_image im Antwortobjekt zurück:

Nachdem wir den Link für das vorgestellte Bild erfolgreich in die Antwort eingefügt haben, müssen die beiden anderen Felder, die noch hinzugefügt werden müssen, den Namen des Autors und die Kategorienamenliste enthalten.

Um den Anzeigenamen des Postautors hinzuzufügen, ändern wir die Funktion quiescent_modify_post_response(), um einen weiteren Aufruf der Methode register_rest_field() wie folgt einzuschließen:

Wir nennen dieses benutzerdefinierte Feld quiescent_author_name und die Rückruffunktion zum Abrufen des Werts dieses Felds lautet wie folgt:

Hier verwenden wir die Methode get_the_author_meta(), um den Anzeigenamen des Postautors abzurufen.

Für das letzte Feld für Kategorienamen lautet der Aufruf der Methode register_rest_field() wie folgt:

Der obige Aufruf sollte in die Funktion quiescent_modify_post_response() gehen. Die Rückrufmethode quiescent_get_categories() lautet:

Der obige Code verwendet die Methode get_the_category() zum Abrufen der Kategorien für den aktuellen Beitrag. Diese Methode gibt ein Array von Objekten zurück, wobei jedes Objekt eine Kategorie darstellt, die zum aktuellen Beitrag gehört.

Nachdem wir den gesamten obigen Code geschrieben haben, werden dem Standardantwortobjekt für die Posts-Ressource drei neue Felder hinzugefügt. Diese drei neuen Felder sind:

  1. quiescent_featured_image
  2. quiescent_author_name
  3. quiescent_categories

Standardmäßig enthält die Standardantwort für die Users-Ressource Avatar-URLs für Größen von 24 px, 48 px und 96 px. Als letztes müssen wir jetzt eine URL für eine zusätzliche Gravatar-Größe von 207 px für die Users-Ressource hinzufügen. Erstellen Sie also eine neue Funktion mit dem Namen quiescent_modify_user_response() und verknüpfen Sie sie mit der Aktion rest_api_init:

Innerhalb dieser Funktion fügen wir der Methode register_rest_field() einen Aufruf hinzu, um ein Feld mit dem Namen quiescent_avatar_url für das user-Objekt hinzuzufügen:

Die Rückrufmethode quiescent_get_user_avatar() lautet wie folgt:

Diese Methode verwendet die Methode get_avatar_url(), um die URL für einen Gravatar mit einer Größe von 207 x 207 Pixel zurückzugeben.

Wenn Sie eine GET-Anforderung an die Route /wp/v2/users senden, gibt der Server ein zusätzliches Feld mit dem Namen quiescent_avatar_url zusammen mit dem Standardantwortobjekt zurück:

Hier geht es darum, das Companion-Plugin zu erstellen. Der fertige Quellcode kann aus dem Envato Tuts+ GitHub-Repository abgerufen werden.

Nachdem das Plugin fertiggestellt wurde, können wir nun mit AngularJS zusammenarbeiten, um Vorlagen, Routen und Dienste für Ressourcen zu erstellen, was wir im nächsten Teil der Serie tun werden.

Was kommt weiter?

In diesem Tutorial haben wir den Grundstein für die Erstellung eines WordPress-basierten Frontends mit der WP REST API und AngularJS gelegt. Wir haben die Projektanforderungen mit Wireframes analysiert und ein Companion-Plugin zum Sichern des Frontends erstellt.

Im nächsten Teil der Serie werden wir mit dem HTML-Paket arbeiten, das wir zuvor in diesem Tutorial heruntergeladen haben. Wir werden die AngularJS-App booten, das Routing konfigurieren und RESTful-Services für Ressourcen für Posts, Users und Categories erstellen. Liegen Sie also im Trend...

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.