Construirea unei fronturi frontale cu funcții WordPress Introducere și configurare

În seria introductivă despre API-ul WP REST, am învățat să folosim funcționalitatea de bază furnizată de API și flexibilitatea pe care o oferă atunci când construim aplicații cu WordPress back end. Am analizat resursele, rutele și metodele pe care le suportă pentru efectuarea operațiunilor CRUD.

În această serie despre construirea unui capăt frontal alimentat de WordPress cu WP REST API și AngularJS, vom folosi cunoștințele dobândite în seria introductivă. Vom învăța cum putem folosi aceste cunoștințe pentru a decupla modelul convențional tematic-administrativ susținut de WordPress până acum. Vom planifica și crea o aplicație de o singură pagină (pe care am denumit-o static) Cu un sfârșit de sfârșit WordPress care va include postări, utilizatori și categorii de pagini de înscriere. Vom configura rutarea AngularJS și vom construi o directivă personalizată și controlori pentru resursele menționate mai sus.

În prima parte a seriei, vom:

evaluează cerințele pentru construirea frontului cu ajutorul unor cabluri
descărcați și instalați pachetul HTML pentru oase goale pentru a începe să lucrați
construiți un plugin WordPress însoțitor pe baza evaluărilor de mai sus

Deci, să începem prin evaluarea cerințelor de construire a frontului.

Planificarea lucrurilor afară

Partea inițială la începerea oricărui proiect trebuie să evalueze cerințele proiectului și să planifice lucrurile în consecință. Aceasta oferă o bază solidă pentru proiect și ne ajută să gândim în mod clar în termeni de funcționalitate și caracteristici ale aplicației.

Așa cum am menționat mai înainte, avem nevoie de pagini de înscriere și de pagini unice pentru următoarele trei resurse:

Mesaje
Categorii
Utilizatori

Să vorbim mai întâi despre crearea de șabloane pentru Mesaje resursă. Vom avea nevoie de două șabloane pentru această resursă, adică un șablon de înregistrare și un singur șablon de postare. Șablonul de afișare va afișa un anumit număr de postări cu link-uri de paginare pentru a trece la seturile următoare sau anterioare de postări. Șablonul post unic va afișa o singură postare pe pagină.

Mai jos este schema wireframe pentru pagina listării postului:

Și următoarea este schema de sârmă pentru șablonul unic de postare:

După cum putem vedea în cadrul de referință de mai sus, cerințele sunt destul de simple, la fel ca orice șablon de blog standard. Dar, atunci când comparăm ramele de tip wireframes de mai sus cu răspunsul standard WP REST API prevede posturi, ajungem la concluzia că lipsesc următoarele elemente din obiectul standard de răspuns:

featured image link
numele autorului
categoriile de nume și legături

Prin urmare, trebuie să modificăm răspunsul pentru Mesaje pentru a include aceste elemente. Vom face acest lucru mai târziu în acest tutorial prin crearea unui plugin însoțitor pentru WordPress.

Să analizăm acum cerințele pentru Categorii și Utilizatori prin examinarea următoarelor două scale.

Mai jos este schema de tip wireframe pentru șablonul categoriei:

Și aici este schema de sârmă pentru șablonul utilizatorului:

Privind cele de mai sus două cadre, este clar că nu necesită înregistrarea câmpurilor suplimentare în răspunsurile lor standard. Dar dacă ne uităm îndeaproape la pagina de profil a autorului, trebuie să adăugăm o dimensiune gravatar suplimentară pentru a ține cont de dimensiunea imaginii în HTML. Această funcție poate fi de asemenea realizată în plugin-ul însoțitor.

Unul dintre principiile fundamentale și cele mai apreciate ale ingineriei software este principiul DRY (Do not Repeat Yourself). Analizând machetele de mai sus, vedem că înregistrarea postărilor se repetă pe aproape toate șabloanele de listare într-o formă sau alta. Așa că vom merge mai departe și vom face o directivă comună AngularJS pentru listarea posturilor pe care să o folosim pe toate șabloanele de mai sus, iar această directivă va include funcționalitatea care include post paginarea și extragerea unui subset de postări pentru parametrii dat.

Acum, că am evaluat cerințele generale pentru construirea aplicației, putem începe să introducem partea de codificare pornind de la următoarea secțiune.

Tutorial Cerințe

Înainte de a începe să lucrăm pentru a construi aplicația, trebuie să aveți anumite aplicații instalate pe sistemul dvs. Aceste aplicații sunt:

o instalare WordPress cu pluginul WP REST API activat și unele date demo
Git pentru clonarea repozitorului HTML (nu este necesar, de vreme ce puteți descărca depozitul direct de pe site-ul GitHub prin GUI)
Node.js pentru a lucra cu NPM și înghiţitură comenzi
GulpJS pentru executarea sarcinilor de minificare și optimizare în pachetul HTML

Dacă v-ați dezvoltat pentru o perioadă de timp, există o șansă bună să aveți deja aceste lucruri instalate pe sistemul dvs. În caz contrar, vă recomand să examinați site-urile lor oficiale și documentația pentru a le stabili.

Descărcarea și instalarea pachetului HTML

Pentru a facilita urmărirea, am construit deja șabloane HTML de bază pentru schemele de rețea analizate mai sus.

Mai întâi de toate, trebuie să clonați depozitul de pachete HTML de la GitHub:

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

După ce ați clonat depozitul, trebuie să navigați în director folosind următoarea comandă:

$ cd path / to / cloned / repository

Nu contează dacă folosiți OS X, Windows sau Linux, deoarece cele de mai sus CD comanda va funcționa pe aproape toate sistemele de operare.

Acum trebuie să instalați modulele Node.js folosind:

$ npm install

Comanda de mai sus va dura ceva timp pentru a finaliza, în funcție de viteza conexiunii la internet.

După instalarea modulelor necesare, puteți compila în final sursa folosind înghiţitură comanda:

$ gulp

Acest lucru produce un nou dosar numit dist care conține sursa compilată pentru HTML și activele acesteia.

npm install comanda pe care am rulat mai sus instalează un modul Node.js numit http-server care oferă o modalitate rapidă și ușoară de a configura un server HTTP de bază în orice director. Puteți verifica sursa compilată navigând în dist și executați următoarea comandă:

$ http-server

Acest lucru va econa unele adrese de pe ecran pentru server pe care le puteți introduce în browser pentru a începe vizualizarea HTML.

$ http-server Pornirea unui server http, care servește ./ Disponibil pe: http: 192.168.0.104: 8080 http: 192.168.56.1: 8080 http: 127.0.0.1: 8080 Hit CTRL-C pentru a opri serverul

Este vorba despre descărcarea și compilarea pachetului de bază HTML care va funcționa ca coloană vertebrală pentru dezvoltarea noastră viitoare.

Construirea Pluginului Quiescent Companion

După ce ați descărcat și instalat modulele necesare pentru pachetul HTML, suntem acum gata să construim funcționalitatea de server pentru a sprijini capătul din față.

Într-o secțiune anterioară, am analizat cerințele pentru construirea frontului cu WP REST API și AngularJS. Să aruncăm o privire din nou la elementele necesare de care avem nevoie pentru a construi partea frontală:

Imagine recomandată pentru postare. De asemenea, trebuie să înregistrăm o nouă dimensiune a imaginii în WordPress pentru a ține cont de dimensiunea imaginii în HTML.
Numele autorului postului. Acest lucru poate fi preluat utilizând ID-ul autorului care este disponibil în obiectul standard de răspuns.
Lista categoriilor asociate cu postarea. Acest lucru poate fi obținut prin utilizarea codului poștal.
O dimensiune nouă a imaginii pentru ca gravatarul să contabilizeze dimensiunea imaginii profilului autor în HTML.

Deci, avem nevoie de trei câmpuri suplimentare pentru Mesaje resursă și, de asemenea, trebuie să adăugați noi dimensiuni de imagine pentru imaginea recomandată și utilizatorul gravatar.

Să începem prin crearea unui nou director pentru plugin-ul nostru în / Wp-content / plugins folder și denumirea acestuia Quiescent-companion. În directorul respectiv, creați un nou fișier PHP numit Quiescent-companion.php și lipiți în următorul cod pentru definiția pluginului:

Dacă ați urmărit împreună cu mine din seria mea introductivă despre WP REST API, atunci ați învățat deja să modificați răspunsul serverului pentru o anumită resursă folosind register_rest_field () metodă. Dacă nu ați analizat-o, vă recomandăm să faceți acest lucru, verificând articolul despre modificarea răspunsurilor serverului.

register_rest_field () metoda acceptă trei argumente pentru numele resursei de modificat, numele câmpului și o serie de argumente pentru câmp. Această gamă de argumente conține apelul de preluare, răsfoirea de actualizare și schema câmpului.

Iată codul pentru adăugarea unui câmp personalizat pentru imaginea recomandată a postării:

 'quiescent_get_featured_image', 'update_callback' => null, 'schema' => null));  add_action ('rest_api_init', 'quiescent_modify_post_response');

register_rest_field () se numește metoda cu rest_api_init acțiune.

Este întotdeauna o bună practică de a prefixa numele câmpului personalizat, astfel încât acesta să nu fie în conflict cu nici un alt domeniu în viitor. Prin urmare, am numit domeniul nostru personalizat quiescent_featured_image. Metoda responsabilă pentru preluarea acestei imagini recomandate este quiescent_get_featured_image, și o definim ca fiind următoarea:

Această metodă primește trei argumente pentru matricea postului, numele câmpului și obiectul solicitării. Array post conține informațiile necesare despre postarea curentă, inclusiv ID-ul, titlul, conținutul etc. Utilizând aceste informații, putem prelua orice informații arbitrare asociate postului. Prin urmare, folosim ID-ul mass-media postat pentru a prelua link-ul imaginii recomandate a postului utilizând wp_get_attachment_image_src () metodă.

În plus față de codul de mai sus pentru înregistrarea câmpului personalizat pentru link-ul imaginii recomandat al postării, trebuie de asemenea să înregistrăm o dimensiune personalizată a imaginii în consecință:

Codul de mai sus utilizează add_image_size () metodă pentru înregistrarea unei noi dimensiuni a imaginii de 712 px la 348 px și vom folosi quiescent_post_thumbnail ca nume a dimensiunii imaginii noi.

Salvați codul și asigurați-vă că pluginul Quiescent Companion este activat în administratorul WP. Trimiteți o solicitare de testare către / Wp / v2 / mesaje iar serverul va returna linkul imaginii recomandate în quiescent_featured_image câmp în obiectul răspuns:

... "tag-uri": [], "quiescent_featured_image": "http: //localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712x348.jpg", "_links": ...

Acum, că am adăugat cu succes imaginea recomandată în răspuns, celelalte două câmpuri care urmează să fie adăugate sunt pentru numele autorului și pentru lista de nume de categorii.

Pentru a adăuga numele afișat al autorului postului, modificăm quiescent_modify_post_response () pentru a include un alt apel către register_rest_field () cum ar fi:

 'quiescent_get_author_name', 'update_callback' => null, 'schema' => null));

Noi numim acest câmp particularizat quiescent_author_name iar funcția de apel invers pentru extragerea valorii acestui câmp este după cum urmează:

Aici folosim get_the_author_meta () pentru a obține numele afișat al autorului postului.

Pentru ultimul câmp pentru numele categoriilor, apelul către register_rest_field () metoda este după cum urmează:

 'quiescent_get_categories', 'update_callback' => null, 'schema' => null));

Apelul de mai sus ar trebui să intre în interiorul quiescent_modify_post_response () funcţie. quiescent_get_categories () metoda retur apel invers este:

Codul de mai sus utilizează get_the_category () pentru recuperarea categoriilor pentru postul curent. Această metodă returnează o serie de obiecte, fiecare obiect reprezentând o categorie care aparține postului curent.

Acum, că am scris tot codul de mai sus, acum trei câmpuri noi sunt adăugate la obiectul de răspuns standard pentru Mesaje resursă. Aceste trei domenii noi sunt:

quiescent_featured_image
quiescent_author_name
quiescent_categories

Implicit, răspunsul standard pentru Utilizatori resursă conține adrese URL de avatar pentru dimensiuni de 24 px, 48 px și 96 px. Ultimul lucru pe care trebuie să îl facem acum este să adăugăm o adresă URL pentru o dimensiune suplimentară gravatar de 207 px pentru Utilizatori resursă. Deci, creați o nouă funcție numită quiescent_modify_user_response () și o cuplați la rest_api_init acțiune:

În cadrul acestei funcții, adăugăm un apel către register_rest_field () pentru a adăuga un câmp numit quiescent_avatar_url pentru utilizator obiect:

 'quiescent_get_user_avatar', 'update_callback' => null, 'schema' => null));

quiescent_get_user_avatar () metoda de returnare inversă este după cum urmează:

 207); returnați get_avatar_url ($ user ['id'], $ args);

Această metodă utilizează get_avatar_url () pentru a returna adresa URL pentru un gravatar cu dimensiunea de 207 px la 207 px.

Trimite o OBȚINE cererea către / Wp / v2 / utilizatori și serverul va returna un câmp suplimentar numit quiescent_avatar_url împreună cu obiectul standard de răspuns:

... "quiescent_avatar_url": "http://0.gravatar.com/avatar/?s=207&d=mm&r=g",...

E vorba de construirea plugin-ului de companie. Codul sursă completat poate fi preluat din depozitul Envato Tuts + GitHub.

Acum, când pluginul a fost finalizat, suntem gata să continuăm și să lucrăm cu AngularJS pentru a crea șabloane, rute și servicii pentru resurse, pe care o vom face în următoarea parte a seriei.

Ce este în continuare?

În acest tutorial, am pus bazele pentru crearea unui capăt frontal alimentat de WordPress folosind WP REST API și AngularJS. Am analizat cerințele proiectului cu fire de rețea și am creat un plugin însoțitor pentru susținerea front-end-ului.

În următoarea parte a seriei, vom începe să lucrăm cu pachetul HTML pe care l-am descărcat mai devreme în acest tutorial. Vom bootstrap app AngularJS, configurarea de rutare, și de a crea servicii RESTful pentru Mesaje, Utilizatori, și Categorii resurse, deci stați la dispoziție ...

Cod