Accentsconagua

Å bygge en WordPress-drevet frontend Introduksjon og oppsett

Kode
Share

I introduksjonsserien om WP REST API, lærte vi å bruke grunnleggende funksjonalitet levert av API og fleksibiliteten den tilbyr når du bygger apper med WordPress-bakenden. Vi så på ressursene, rutene og metodene som støttes for å utføre CRUD-operasjoner.

I denne serien om å bygge en WordPress-drevet frontend med WP REST API og AngularJS, vil vi sette kunnskapen tilført i introduksjonsserien til bruk. Vi lærer hvordan vi kan utnytte denne kunnskapen til å avkoble den konvensjonelle temadiskmodellen støttet av WordPress til nå. Vi planlegger og bygger et enkeltprogram (som jeg har kalt) hvile~~POS=TRUNC) Med en WordPress-backend som vil inneholde innlegg, brukere og kategorier oppføringssider. Vi vil konfigurere AngularJS routing og bygge et tilpasset direktiv og kontroller for ressursene nevnt ovenfor.

I første del av serien vil vi:

  • vurdere kravene til å bygge frontenden ved hjelp av wireframes
  • Last ned og installer bare-bones HTML-pakken for å begynne å jobbe med
  • bygge en kompanion WordPress plugin basert på ovenstående vurderinger

Så la oss begynne med å vurdere kravene til å bygge frontenden.

Planlegger ting ut

Den første delen når man påbegynner et prosjekt bør vurdere prosjektkravene og planlegge ting ut tilsvarende. Dette legger et solid grunnlag for prosjektet og hjelper oss å tenke tydelig når det gjelder funksjonalitet og funksjoner i applikasjonen.

Som nevnt tidligere trenger vi oppføringssider og enkeltsider for følgende tre ressurser:

  1. innlegg
  2. kategorier
  3. brukere

La oss først snakke om å lage maler for innlegg ressurs. Vi trenger to maler for denne ressursen, det vil si en oppføringsmal og en enkelt innleggsmal. Oppføringsmalten viser et bestemt antall innlegg med paginasjonslenk for å gå til neste eller forrige sett med innlegg. Enkelt innleggsmalen vil vise et enkelt innlegg på siden.

Nedenfor er wireframe for postlistingssiden:

Og følgende er wireframe for single post template:

Som vi ser i de ovennevnte wireframes, er kravene ganske enkle, akkurat som alle standardblogger. Men når vi sammenligner de ovennevnte wireframes med standardresponset, sørger WP REST API for innlegg, vi kommer på den konklusjonen at følgende elementer mangler fra standardresponsobjektet:

  • kjennetegnet bildelink
  • forfatternavn
  • kategori navn og lenker

Derfor må vi endre svaret for innlegg ressurs for å inkludere disse elementene. Vi vil gjøre det senere i denne opplæringen ved å lage en følgesvenn-plugin for WordPress.

La oss nå analysere kravene til kategorier og brukere ressurser ved å se på følgende to wireframes.

Nedenfor er wireframe for kategorien mal:

Og her er wireframe for brukerens mal:

Ved å se på de ovennevnte to wireframes, er det klart at de ikke trenger å registrere flere felt i standardresponsene. Men hvis vi ser nøye på forfatterprofilsiden, må vi legge til en ekstra gravatar størrelse for å ta hensyn til bildestørrelsen i HTML-koden vår. Denne funksjonaliteten kan også oppnås i companion plugin.

En av de grunnleggende og mest påtalte prinsippene for software engineering er DRY (Do not Repeat Yourself) prinsippet. Ved å analysere mockups ovenfor ser vi at postoppføringen gjentas på nesten alle oppføringsmalene i en eller annen form. Så vi vil fortsette å lage et felles AngularJS-direktiv for innleggsposter som skal brukes på alle ovennevnte maler, og dette direktivet vil inkludere funksjonalitet inkludert postpaginering og henting av en delmengde av innlegg for gitt parametere.

Nå som vi har vurdert de generelle kravene til å bygge søknaden, kan vi dykke inn i kodingsdelen fra og med neste avsnitt.

Opplæringskrav

Før vi begynner å jobbe med å bygge programmet, må du ha visse programmer installert på systemet. Disse programmene er:

  • en WordPress installasjon med WP REST API plugin aktivert og noen demo data
  • Git for kloning av HTML-depotet (ikke nødvendig, siden du også kan laste ned depotet direkte fra GitHub-siden via GUI)
  • Node.js for å jobbe med NPM og gulp kommandoer
  • GulpJS for å kjøre minifiserings- og optimaliseringsoppgaver i HTML-pakken

Hvis du har utviklet seg på nettet for en stund, er det en god sjanse for at du allerede har denne typen installert på systemet ditt. Ellers anbefaler jeg at du tar en titt på deres offisielle nettsteder og dokumentasjon for å få dem satt opp.

Laster ned og installerer HTML-pakken

For å gjøre det enklere for deg å følge, har jeg allerede bygget grunnleggende HTML-maler for trådrammer vi analyserte ovenfor.

Først og fremst må du klone HTML-pakkelageret fra GitHub:

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

Etter at du har klonet depotet, må du navigere inn i katalogen ved å bruke følgende kommando:

$ CD-sti / til / klonet / repository

Det spiller ingen rolle om du bruker OS X, Windows eller Linux, fordi det ovenfor cd kommandoen vil fungere på nesten alle operativsystemene.

Nå må du installere Node.js-moduler ved å bruke:

$ npm installasjon

Ovennevnte kommando vil ta litt tid å fullføre, avhengig av hastigheten på Internett-tilkoblingen din.

Etter å ha installert de nødvendige modulene, kan du endelig kompilere kilden ved hjelp av gulp kommando:

$ gulp

Dette gir en ny mappe som heter dist som inneholder den kompilerte kilden for HTML og dens eiendeler.

De npm installasjon kommandoen vi løp over installerer også en Node.js-modul som heter http-serveren som gir en rask og enkel måte å sette opp en grunnleggende HTTP-server inne i hvilken som helst katalog. Du kan sjekke kompilert kilde ved å navigere inn i dist katalog og kjører følgende kommando:

$ http-server

Dette vil ekko noen adresser på skjermen for serveren som du kan skrive inn i nettleseren din for å begynne å se HTML-koden.

$ http-server Starte opp http-server, servering ./ Tilgjengelig på: http: 192.168.0.104: 8080 http: 192.168.56.1: 8080 http: 127.0.0.1: 8080 Hit CTRL-C for å stoppe serveren

Det handler om å laste ned og kompilere den grunnleggende HTML-pakken som vil fungere som ryggrad for vår fremtidige utvikling.

Bygg Quiescent Companion Plugin

Etter å ha lastet ned og installert de nødvendige modulene for HTML-pakken, er vi nå klare til å bygge serverfunksjonaliteten for å støtte forenden.

I et tidligere avsnitt analyserte vi kravene til å bygge frontenden med WP REST API og AngularJS. La oss ta en titt igjen på de nødvendige elementene som vi trenger for å bygge frontenden:

  1. Utvalgt bilde for innlegget. Vi må også registrere en ny bildestørrelse i WordPress for å regne for bildestørrelsen i HTML.
  2. Forfatterens navn på posten. Dette kan hentes ved å bruke forfatter-ID som er tilgjengelig i standardresponsobjektet.
  3. Liste over kategorier assosiert med innlegget. Dette kan oppnås ved å bruke post-ID.
  4. En ny bildestørrelse for gravataren for å regne for forfatterprofilens størrelse i vår HTML.

Så vi trenger tre ekstra felt for innlegg ressurs og må også legge til nye bildestørrelser for det uthevede bildet og brukerens gravatar.

La oss begynne med å opprette en ny katalog for pluginet vårt i / Wp-content / plugins mappe og navngi den hvil-følges. Inne i den katalogen, opprett en ny PHP-fil som heter hvil-companion.php og lim inn i følgende kode for plugin-definisjon:

Hvis du har fulgt med meg siden min innledende serie om WP REST API, har du allerede lært å endre serverresponsen for en bestemt ressurs ved hjelp av register_rest_field () metode. Hvis du ikke har sett på det, anbefaler jeg at du gjør det ved å sjekke ut artikkelen om å endre serverrespons.
De register_rest_field () Metoden aksepterer tre argumenter for navnet på ressursen som skal endres, navnet på feltet og en rekke argumenter for feltet. Denne rekke argumenter inneholder tilbakekallings tilbakeringing, oppdatering tilbakeringing og skjemaet til feltet.
Her er koden for å legge til et egendefinert felt for det uthevede bildet av innlegget:
 'quiescent_get_featured_image', 'update_callback' => null, 'schema' => null));  add_action ('rest_api_init', 'quiescent_modify_post_response');
De register_rest_field () Metoden kalles med rest_api_init handling.
Det er alltid en god praksis å prefikse navnet på det egendefinerte feltet, slik at det ikke er i konflikt med noe annet felt i fremtiden. Derfor heter vi vårt tilpassede felt quiescent_featured_image. Metoden som er ansvarlig for å hente dette kjente bildet er quiescent_get_featured_image, og vi definerer det som følgende:
Denne metoden blir bestått tre argumenter for innleggsarrangementet, feltnavnet og forespørselsobjektet. Postarmen inneholder nødvendige opplysninger om gjeldende innlegg, inkludert ID, tittel, innhold, etc. Ved å bruke denne informasjonen kan vi hente all vilkårlig informasjon knyttet til innlegget. Derfor bruker vi postfunksjonen medie ID for å hente linken til det fremhevede bildet av innlegget ved hjelp av wp_get_attachment_image_src () metode.
I tillegg til den ovennevnte koden for registrering av det egendefinerte feltet for den uthevede bildelinken til innlegget, må vi også registrere en egendefinert bildestørrelse tilsvarende:
Ovennevnte kode bruker add_image_size () Metode for registrering av en ny bildestørrelse på 712 px med 348 px, og vi bruker quiescent_post_thumbnail som navnet på den nye bildestørrelsen.
Lagre koden og kontroller at Quiescent Companion-pluginet er aktivert i WP admin. Send en testforespørsel til / WP / v2 / innlegg rute og serveren vil returnere lenken til det kjente bildet i quiescent_featured_image feltet i svarobjektet:
... "tags": [], "quiescent_featured_image": "http: //localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712x348.jpg", "_links": ... 
Nå som vi har lagt til kjennetegnet bildelink i svaret, er de to andre feltene som skal legges til, for navn på forfatter og navn på kategorier.
For å legge til visningsnavnet til postforfatteren, endrer vi quiescent_modify_post_response () funksjon for å inkludere en annen samtale til register_rest_field () metode som følger:
 'quiescent_get_author_name', 'update_callback' => null, 'schema' => null));
Vi kaller dette egendefinerte feltet quiescent_author_name og tilbakeringingsfunksjonen for å hente verdien av dette feltet er som følger:
Her bruker vi get_the_author_meta () metode for å hente navnet på forfatteren.
For det siste feltet for kategorinavn, anropet til register_rest_field () metoden er som følger:
 'quiescent_get_categories', 'update_callback' => null, 'schema' => null));
Ovennevnte samtale skal gå inn i quiescent_modify_post_response () funksjon. De quiescent_get_categories () retrieval tilbakeringingsmetode er:
Ovennevnte kode bruker get_the_category () metode for å hente kategoriene for gjeldende innlegg. Denne metoden returnerer en rekke objekter, hvor hvert objekt representerer en kategori som tilhører det nåværende innlegget.
Nå som vi har skrevet all den ovenfor angitte koden, legges tre nye felt nå til standardresponsobjektet for innlegg ressurs. Disse tre nye feltene er:
     
  1. quiescent_featured_image
    2.  
  2.  quiescent_author_name
    3.  
  3.  quiescent_categories
    4.  
Som standard er standardsvaret for brukere ressurs inneholder avatar-nettadresser for størrelser på 24 px, 48 px og 96 px. Det siste vi må gjøre nå er å legge til en nettadresse for en ekstra gravatar størrelse på 207 px for brukere ressurs. Så opprett en ny funksjon som heter quiescent_modify_user_response () og hek det til rest_api_init handling:
Innenfor denne funksjonen legger vi til et anrop til register_rest_field () metode for å legge til et felt som heter quiescent_avatar_url for bruker gjenstand:
 'quiescent_get_user_avatar', 'update_callback' => null, 'schema' => null)); 
De quiescent_get_user_avatar () tilbakeringingsmetode er som følger:
 207); returnera get_avatar_url ($ user ['id'], $ args); 
Denne metoden bruker get_avatar_url () metode for å returnere nettadressen til en gravatar av størrelse 207 px med 207 px.
Send en FÅ forespørsel til / WP / v2 / brukere rute og serveren vil returnere et ekstra felt som heter quiescent_avatar_url sammen med standardresponsobjektet:
... "quiescent_avatar_url": "http://0.gravatar.com/avatar/?s=207&d=mm&r=g",... 
Det handler om å bygge companion plugin. Den fullførte kildekoden kan hentes fra Envato Tuts + GitHub-depotet.
Nå som pluginet er fullført, er vi nå klare til å fortsette og begynne å jobbe med AngularJS for å lage maler, ruter og tjenester for ressurser, som vi vil gjøre i neste del av serien.
Hva skjer neste gang?
I denne opplæringen lagde vi grunnlaget for å skape en WordPress-drevet frontend med WP REST API og AngularJS. Vi analyserte prosjektkrav med wireframes og opprettet et kompanjonsplugin for å støtte bakenden.
I neste del av serien begynner vi å jobbe med HTML-pakken vi lastet ned tidligere i denne opplæringen. Vi vil starte opp AngularJS-appen, konfigurere ruting og opprette RESTful tjenester for innlegg, brukere, og kategorier ressurser, så hold deg oppdatert ...





	
	
			
	   
	







Kode
×