Erstellen eines WordPress-gestützten Frontends Einführung und Einrichtung

In der Einführungsreihe zur WP REST-API haben wir gelernt, die Grundfunktionalität der API und die Flexibilität zu nutzen, die sie beim Erstellen von Apps mit dem WordPress-Backend bietet. Wir haben die Ressourcen, Routen und Methoden zur Durchführung von CRUD-Vorgängen untersucht.

In dieser Serie zum Aufbau eines WordPress-basierten Frontends mit der WP REST-API und AngularJS werden wir das in der Einführungsserie erworbene Wissen einsetzen. 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 genannt habe) Ruhe) Mit einem WordPress-Back-End, das Posts, Benutzer und Kategorien enthält, die Seiten auflisten. Wir konfigurieren das AngularJS-Routing und erstellen eine benutzerdefinierte Anweisung und Controller für die oben genannten Ressourcen.

Im ersten Teil der Serie werden wir:

• beurteilen Sie die Anforderungen für den Aufbau des Frontends mit Hilfe von Wireframes
• Laden Sie das Bare-Bones-HTML-Paket herunter, und installieren Sie es
  
• Erstellen Sie ein begleitendes WordPress-Plugin basierend auf den oben genannten Bewertungen
  

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

Dinge planen

Wenn Sie ein Projekt beginnen, sollten Sie zunächst den Projektbedarf einschätzen und entsprechend planen. Dies ist eine solide Grundlage für das Projekt und hilft uns, klar in Bezug auf die Funktionalität und die Funktionen der Anwendung zu denken.

Wie bereits erwähnt, benötigen wir für die folgenden drei Ressourcen eine Auflistung von Seiten und Einzelseiten:

1. Beiträge
2. Kategorien
3. Benutzer

Lassen Sie uns zuerst über das Erstellen von Vorlagen für die Beiträge Ressource. Wir benötigen zwei Vorlagen für diese Ressource, d. H. Eine Auflistungsvorlage und eine einzelne Beitragsvorlage. Die Auflistungsvorlage zeigt eine bestimmte Anzahl von Beiträgen mit Seitenumbruch-Links, um zu den nächsten oder vorherigen Postsätzen zu gelangen. Die Vorlage für einen einzelnen Beitrag zeigt einen einzelnen Beitrag auf der Seite an.

Unten ist das Drahtgitter für die Seite mit den Post-Einträgen:

Und das Folgende ist das Drahtgitter für die Vorlage für einzelne Posts:

Wie wir in den obigen Wireframes sehen können, sind die Anforderungen genau wie bei einer Standard-Blogvorlage ziemlich einfach. Wenn wir jedoch die obigen Wireframes mit der Standardantwort vergleichen, die von der WP REST-API für Posts bereitgestellt wird, kommen wir zu dem Schluss, dass die folgenden Elemente im Standardantwortobjekt fehlen:

• Link zu vorgestellten Bildern
• Autorenname
  
• Kategorienamen und Links
  

Daher müssen wir die Antwort für das ändern Beiträge Ressource, um diese Elemente aufzunehmen. Wir werden das später in diesem Tutorial tun, indem wir ein begleitendes Plugin für WordPress erstellen.

Lassen Sie uns nun die Anforderungen an die analysieren Kategorien und Benutzer Ressourcen, indem Sie die folgenden zwei Wireframes betrachten.

Nachfolgend ist das Drahtgitter für die Kategorienvorlage aufgeführt:

Und hier ist das Drahtgitter für die Benutzervorlage:

Wenn Sie sich die beiden oben genannten Wireframes ansehen, ist es klar, dass sie keine zusätzlichen Felder in ihren Standardantworten registrieren müssen. Wenn wir uns aber die Autorenprofilseite genau ansehen, müssen wir eine zusätzliche Gravatar-Größe hinzufügen, um die Bildgröße in unserem HTML-Code zu berücksichtigen. Diese Funktionalität kann auch im Begleit-Plugin erreicht werden.

Eines der grundlegenden und am meisten befürworteten Prinzipien des Software-Engineerings ist das DRY-Prinzip (Don't Repeat Yourself). Durch die Analyse der obigen Modelle wird deutlich, dass das Post-Listing für fast alle Listing-Vorlagen in der einen oder anderen Form wiederholt wird. Wir werden also fortfahren und eine gemeinsame AngularJS-Direktive für das Auflisten von Beiträgen erstellen, die in allen oben genannten Vorlagen verwendet werden kann. Diese Direktive enthält Funktionen, einschließlich der Nach-Paginierung und des Abrufs einer Teilmenge von Posts für bestimmte Parameter.

Nachdem wir nun die allgemeinen Anforderungen für das Erstellen der Anwendung beurteilt haben, können wir ab dem nächsten Abschnitt in den Codierungsteil eintauchen.

Anforderungen an das Lernprogramm

Bevor Sie mit der Erstellung der Anwendung beginnen, müssen Sie bestimmte Anwendungen auf Ihrem System installiert haben. 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 Schluck Befehle
  
• GulpJS zum Ausführen von Minifizierungs- und Optimierungsaufgaben im HTML-Paket
  

Wenn Sie schon länger für das Web entwickelt haben, besteht eine gute Chance, dass Sie dieses Material bereits auf Ihrem System installiert haben. Ansonsten empfehle ich Ihnen, sich die offiziellen Websites und die Dokumentation anzusehen, um sie einzurichten.

Herunterladen und Installieren des HTML-Pakets

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

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

$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git

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

$ cd pfad / to / cloned / repository

Es ist egal, ob Sie OS X, Windows oder Linux verwenden CD Befehl funktioniert auf fast allen Betriebssystemen.

Nun müssen Sie Node.js-Module mit folgendem Befehl installieren:

$ npm installieren

Der obige Befehl kann einige Zeit in Anspruch nehmen, abhängig von der Geschwindigkeit Ihrer Internetverbindung.

Nachdem Sie die erforderlichen Module installiert haben, können Sie die Quelle schließlich mit dem kompilieren Schluck Befehl:

$ schluck

Dies erzeugt einen neuen Ordner namens dist Das enthält den kompilierten Quellcode für HTML und seine Assets.

Das npm installieren Der Befehl, den wir oben ausgeführt haben, installiert auch ein Node.js-Modul namens http-Server Auf diese Weise können Sie einen einfachen HTTP-Server in einem beliebigen Verzeichnis schnell und einfach einrichten. Sie können die kompilierte Quelle überprüfen, indem Sie in die dist Verzeichnis und führen den folgenden Befehl aus:

$ http-Server

Dadurch werden einige Adressen auf dem Bildschirm für den Server angezeigt, den Sie in Ihrem Browser eingeben können, um die HTML-Anzeige zu starten.

$ http-server Starten des http-Servers, der ./ bereitstellt. Verfügbar auf: http: 192.168.0.104: 8080 http: 192.168.56.1: 8080 http: 127.0.0.1: 8080 Drücken Sie CTRL-C, um den Server zu stoppen

Es geht darum, das grundlegende HTML-Paket herunterzuladen und zu kompilieren, das als Rückgrat für unsere zukünftige Entwicklung dienen wird.

Das Quiescent Companion Plugin erstellen

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

In einem vorherigen Abschnitt haben wir die Anforderungen für den Aufbau des Frontends mit der WP REST-API und AngularJS analysiert. Schauen wir uns noch einmal die benötigten Elemente an, die wir für den Aufbau des Frontends benötigen:

1. Vorgestelltes Bild für den Beitrag. Wir müssen auch eine neue Bildgröße in WordPress registrieren, um die Bildgröße in unserem HTML-Code zu berücksichtigen.
2. Autorenname des Beitrags Dies kann unter Verwendung der im Standardantwortobjekt verfügbaren Autoren-ID abgerufen werden.
   
3. Liste der Kategorien, die dem Beitrag zugeordnet sind. Dies kann mit der Post-ID erreicht werden.
   
4. Eine neue Bildgröße für den Gravatar, um die Bildgröße des Autorenprofils in unserem HTML-Code zu berücksichtigen.
   

Wir brauchen also drei zusätzliche Felder für die Beiträge Ressource und müssen auch neue Bildgrößen für das vorgestellte Bild und den Benutzer gravatar hinzufügen.

Beginnen wir mit dem Erstellen eines neuen Verzeichnisses für unser Plugin in der / wp-content / plugins Ordner und benennen Ruhe-Begleiter. Erstellen Sie in diesem Verzeichnis eine neue PHP-Datei mit dem Namen Quiescent-Companion.php und füge folgenden Code für die Plugin-Definition ein:

Wenn Sie mich seit meiner Einführungsserie über die WP REST-API mitverfolgt haben, haben Sie bereits gelernt, die Serverantwort für eine bestimmte Ressource mit der register_rest_field () Methode. Wenn Sie es nicht angeschaut haben, empfehle ich Ihnen, indem Sie den Artikel über das Ändern von Serverantworten lesen.
Das register_rest_field () Die Methode akzeptiert drei Argumente für den Namen der Ressource, die geändert werden soll, den Namen des Felds und ein Array von Argumenten für das Feld. Dieses Argumentarray enthält den Rückruf-Rückruf, den Aktualisierungs-Rückruf und das Schema des Felds.
Hier ist der Code zum Hinzufügen eines benutzerdefinierten Felds für das vorgestellte Bild des Beitrags:
 'quiescent_get_featured_image', 'update_callback' => null, 'schema' => null));  add_action ('rest_api_init', 'quiescent_modify_post_response');
Das register_rest_field () Methode wird mit aufgerufen rest_api_init Aktion.
Es ist immer empfehlenswert, den Namen des benutzerdefinierten Felds voranzustellen, damit es in Zukunft keinen Konflikt mit anderen Feldern gibt. Daher haben wir unser benutzerdefiniertes Feld benannt quiescent_featured_image. Für das Abrufen dieses gekennzeichneten Bildes ist die Methode verantwortlich quiescent_get_featured_image, und wir definieren es wie folgt:
Diese Methode erhält drei Argumente für das Post-Array, den Feldnamen und das Anforderungsobjekt. Das Post-Array enthält notwendige Informationen über den aktuellen Beitrag, einschließlich ID, Titel, Inhalt usw. Durch die Verwendung dieser Informationen können wir alle mit dem Beitrag verbundenen willkürlichen Informationen abrufen. Daher verwenden wir die Medien-ID des Beitrags, um den Link des gekennzeichneten Bildes des Beitrags mithilfe der wp_get_attachment_image_src () Methode.
Zusätzlich zu dem obigen Code zum Registrieren des benutzerdefinierten Felds für den Link zum hervorgehobenen Bild des Beitrags müssen wir auch eine benutzerdefinierte Bildgröße entsprechend registrieren:
Der obige Code verwendet die add_image_size () Methode für die Registrierung einer neuen Bildgröße von 712 x 348 px, und wir verwenden quiescent_post_thumbnail als Name der neuen Bildgröße.
Speichern Sie den Code und stellen Sie sicher, dass das Quiescent Companion-Plugin in Ihrem WP-Administrator aktiviert ist. Senden Sie eine Testanfrage an die / wp / v2 / Beiträge route und der Server sendet den Link des angezeigten Bildes in der quiescent_featured_image Feld im Antwortobjekt:
… "Tags": [], "quiescent_featured_image": "http: //localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712x348.jpg", "_links": … 
Nachdem wir nun den Link zum vorgestellten Bild erfolgreich in der Antwort hinzugefügt haben, beziehen sich die beiden anderen Felder, die noch hinzugefügt werden müssen, auf die Liste der Namen des Autors und der Kategorien.
Um den Anzeigenamen des Postautors hinzuzufügen, ändern wir das quiescent_modify_post_response () Funktion, um einen weiteren Anruf an die register_rest_field () Methode wie die folgende:
 'quiescent_get_author_name', 'update_callback' => null, 'schema' => null));
Wir nennen dieses benutzerdefinierte Feld ruhender_autor_name Die Rückruffunktion zum Abrufen des Werts dieses Feldes lautet wie folgt:
Hier benutzen wir die get_the_author_meta () Methode, um den Anzeigenamen des Postautors abzurufen.
Für das letzte Feld für Kategorienamen den Aufruf an register_rest_field () Methode ist wie folgt:
 'quiescent_get_categories', 'update_callback' => null, 'schema' => null));
Der obige Aufruf sollte in die quiescent_modify_post_response () Funktion. Das quiescent_get_categories () Abrufmethode ist:
Der obige Code verwendet die get_the_category () Methode 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 obigen Code geschrieben haben, werden jetzt drei neue Felder zum Standardantwortobjekt für die hinzugefügt Beiträge Ressource. Diese drei neuen Felder sind:
 
quiescent_featured_image
 
 ruhender_autor_name
 
 ruhende_Kategorien
 
Standardmäßig ist die Standardantwort für die Benutzer Die Ressource enthält Avatar-URLs für Größen von 24 px, 48 px und 96 px. Das letzte, was wir jetzt tun müssen, ist das Hinzufügen einer URL für eine zusätzliche Gravatar-Größe von 207 px für die Benutzer Ressource. Erstellen Sie also eine neue Funktion mit dem Namen quiescent_modify_user_response () und haken Sie es an rest_api_init Aktion:
Innerhalb dieser Funktion fügen wir einen Anruf hinzu register_rest_field () Methode zum Hinzufügen eines Feldes mit dem Namen quiescent_avatar_url für die Nutzer Objekt:
 'quiescent_get_user_avatar', 'update_callback' => null, 'schema' => null)); 
Das quiescent_get_user_avatar () Rückrufmethode ist wie folgt:
 207); return get_avatar_url ($ user ['id'], $ args); 
Diese Methode verwendet die get_avatar_url () Methode, um die URL eines Gravatars der Größe 207 x 207 px zurückzugeben.
Sende ein ERHALTEN Anfrage an die / wp / v2 / Benutzer route und der Server gibt ein zusätzliches Feld mit dem Namen zurück quiescent_avatar_url zusammen mit dem Standardantwortobjekt:
… "Quiescent_avatar_url": "http://0.gravatar.com/avatar/?s=207&d=mm&r=g",… 
Es geht darum, das Companion-Plugin zu erstellen. Der vollständige Quellcode kann aus dem Envato Tuts + GitHub-Repository abgerufen werden.
Nachdem das Plugin fertiggestellt ist, können wir jetzt mit AngularJS zusammenarbeiten, um Vorlagen, Routen und Services für Ressourcen zu erstellen, die wir im nächsten Teil der Serie tun werden.
Was kommt als nächstes??
In diesem Lernprogramm haben wir eine Grundlage für die Erstellung eines WordPress-gestützten Frontends mithilfe der WP REST-API und AngularJS geschaffen. Wir haben die Projektanforderungen mit Wireframes analysiert und ein Begleit-Plug-In für das Frontend erstellt.
Im nächsten Teil der Serie werden wir mit dem HTML-Paket arbeiten, das wir zuvor in diesem Lernprogramm heruntergeladen haben. Wir werden die AngularJS-App bootstrapen, das Routing konfigurieren und RESTful-Services für erstellen Beiträge, Benutzer, und Kategorien Ressourcen, also bleiben Sie dran ...




		
			
	   
	




Code