Een op WordPress-aangedreven front-end bouwen Inleiding en Setup

In de inleidende serie over de WP REST API hebben we geleerd om de basisfunctionaliteit van de API te gebruiken en de flexibiliteit die het biedt bij het bouwen van apps met de WordPress-backend. We hebben gekeken naar de bronnen, routes en methoden die worden ondersteund voor het uitvoeren van CRUD-bewerkingen.

In deze serie over het bouwen van een door WordPress aangedreven front-end met de WP REST API en AngularJS, zullen we de opgedane kennis in de introductieserie gebruiken. We zullen leren hoe we deze kennis kunnen gebruiken om het conventionele thema-beheerdersmodel dat door WordPress wordt ondersteund, tot nu toe te ontkoppelen. We plannen en bouwen een applicatie met één pagina (die ik heb genoemd rustig) Met een WordPress-back-end die pagina's met berichten, gebruikers en categorieën bevat. We zullen de AngularJS-routering configureren en een aangepaste richtlijn en controllers voor de bovengenoemde bronnen bouwen.

In het eerste deel van de serie zullen we:

• beoordelen van de vereisten voor het bouwen van de voorkant met behulp van wireframes
• download en installeer het bare-bones HTML-pakket om mee te werken
  
• een bijbehorende WordPress-plug-in bouwen op basis van de bovenstaande beoordelingen
  

Dus laten we beginnen met het beoordelen van de vereisten voor het bouwen van de voorkant.

Dingen plannen

Het eerste deel bij het starten van een project moet de projectvereisten beoordelen en dienovereenkomstig plannen. Dit legt een solide basis voor het project en helpt ons helder te denken in termen van de functionaliteit en functies van de applicatie.

Zoals eerder vermeld, hebben we listingpagina's en enkele pagina's nodig voor de volgende drie bronnen:

1. berichten
2. Categorieën
3. gebruikers

Laten we het eerst hebben over het maken van sjablonen voor de berichten bron. We hebben twee sjablonen nodig voor deze bron, namelijk een aanbiedingstemplate en een sjabloon voor één bericht. De aanbiedingstemplate toont een bepaald aantal berichten met paginakoppelingen om naar de volgende of vorige sets berichten te gaan. De sjabloon voor één bericht geeft één bericht op de pagina weer.

Hieronder ziet u het draadframe voor de pagina met de berichtvermelding:

En het volgende is het draadframe voor de sjabloon met één bericht:

Zoals we in de bovenstaande wireframes kunnen zien, zijn de vereisten vrij eenvoudig, net als elke standaard blogsjabloon. Maar als we de bovenstaande wireframes vergelijken met het standaardantwoord dat de WP REST API biedt voor posts, komen we tot de conclusie dat de volgende items ontbreken in het standaard responsobject:

• gekenmerkte afbeeldingslink
• auteur naam
  
• categorienamen en links
  

Daarom moeten we het antwoord voor de berichten bron om deze items op te nemen. We zullen dit later in deze tutorial doen door een begeleidende plug-in voor WordPress te maken.

Laten we nu de vereisten voor de. Analyseren Categorieën en gebruikers bronnen door naar de volgende twee wireframes te kijken.

Hieronder ziet u het draadframe voor de categoriesjabloon:

En hier is het draadframe voor de gebruikerssjabloon:

Door naar de bovenstaande twee wireframes te kijken, is het duidelijk dat ze geen extra velden hoeven te registreren in hun standaardreacties. Maar als we goed kijken naar de pagina met het auteursprofiel, moeten we een extra gravatar-grootte toevoegen om rekening te houden met de afbeeldingsgrootte in onze HTML. Deze functionaliteit kan ook worden bereikt in de bijbehorende plug-in.

Een van de fundamentele en meest bepleite principes van software-engineering is het DRY (Do not Repeat Yourself) -principe. Door de bovenstaande mockups te analyseren, zien we dat de berichtvermelding op bijna alle listingsjablonen in een of andere vorm wordt herhaald. Dus zullen we doorgaan en een gemeenschappelijke AngularJS-richtlijn maken voor het gebruik van posts op alle bovenstaande sjablonen, en deze richtlijn zal functionaliteit inclusief post-paginering bevatten en een subset van berichten voor gegeven parameters ophalen.

Nu we de algemene vereisten voor het bouwen van de applicatie hebben beoordeeld, kunnen we het coderingsgedeelte ingaan, te beginnen met de volgende sectie.

Tutorial Vereisten

Voordat we beginnen met het bouwen van de applicatie, moet u bepaalde applicaties op uw systeem geïnstalleerd hebben. Deze toepassingen zijn:

• een WordPress-installatie met de plug-in WP REST API ingeschakeld en een aantal demogegevens
• Git voor het klonen van de HTML-repository (niet noodzakelijk, omdat je de repository ook rechtstreeks vanuit de GitHub-site via GUI kunt downloaden)
  
• Node.js om mee te werken NPM en slok commando's
  
• GulpJS voor het uitvoeren van minificatie- en optimalisatietaken in het HTML-pakket
  

Als je al een tijdje voor het web aan het ontwikkelen bent, is de kans groot dat je dit al hebt geïnstalleerd op je systeem. Anders raad ik aan dat u hun officiële sites en documentatie bekijkt om ze te laten instellen.

Downloaden en installeren van het HTML-pakket

Om het je gemakkelijker te maken om te volgen, heb ik al eenvoudige HTML-sjablonen gemaakt voor de wireframes die we hierboven hebben geanalyseerd.

Allereerst moet je de HTML-pakketrepository klonen vanuit GitHub:

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

Nadat u de repository hebt gekloond, moet u met de volgende opdracht naar de map navigeren:

$ cd-pad / naar / gekloond / repository

Het maakt niet uit of u OS X, Windows of Linux gebruikt, omdat het bovenstaande CD opdracht werkt op bijna alle besturingssystemen.

Nu moet je Node.js-modules installeren met behulp van:

$ npm installatie

Het bovenstaande commando neemt enige tijd in beslag, afhankelijk van de snelheid van uw internetverbinding.

Na de nodige modules te hebben geïnstalleerd, kunt u eindelijk de bron compileren met behulp van de slok commando:

$ gulp

Dit produceert een nieuwe map genaamd dist die de gecompileerde bron voor HTML en zijn items bevat.

De npm installeren opdracht die we hebben uitgevoerd, installeert ook een Node.js-module genaamd http-server dat biedt een snelle en eenvoudige manier om een ​​eenvoudige HTTP-server in elke directory op te zetten. U kunt de gecompileerde bron controleren door naar de dist map en voert de volgende opdracht uit:

$ http-server

Dit echoot enkele adressen op het scherm voor de server die u in uw browser kunt invoeren om de HTML te kunnen bekijken.

$ http-server http-server opstarten, serveren ./ Beschikbaar op: http: 192.168.0.104: 8080 http: 192.168.56.1: 8080 http: 127.0.0.1: 8080 Raak CTRL-C aan om de server te stoppen

Dat gaat allemaal over het downloaden en compileren van het eenvoudige HTML-pakket dat zal fungeren als de ruggengraat voor onze toekomstige ontwikkeling.

De Quiace Companion-plug-in bouwen

Nadat we de benodigde modules voor het HTML-pakket hebben gedownload en geïnstalleerd, zijn we nu klaar om de functionaliteit aan de serverzijde te bouwen om de frontend te ondersteunen.

In een vorige sectie hebben we de vereisten geanalyseerd voor het bouwen van de frontend met de WP REST API en AngularJS. Laten we nog een keer kijken naar de vereiste items die we nodig hebben om de voorkant te bouwen:

1. Uitgelichte afbeelding voor het bericht. We moeten ook een nieuwe afbeeldingsgrootte registreren in WordPress om rekening te houden met de afbeeldingsgrootte in onze HTML.
2. Naam van de auteur. Dit kan worden opgehaald door de auteurs-ID te gebruiken die beschikbaar is in het standaard antwoordobject.
   
3. Lijst met categorieën die aan het bericht zijn gekoppeld. Dit kan worden bereikt door het post-ID te gebruiken.
   
4. Een nieuwe afbeeldingsgrootte voor de gravatar om rekening te houden met de afbeeldingsgrootte van het auteursprofiel in onze HTML.
   

We hebben dus drie extra velden nodig voor de berichten bron en moeten ook nieuwe afbeeldingsformaten toevoegen voor de afgebeelde afbeelding en de gebruiker gravatar.

Laten we beginnen met het maken van een nieuwe map voor onze plug-in in de / Wp-content / plugins map en noem het latente-companion. Maak in die map een nieuw PHP-bestand met de naam latente-companion.php en plak in de volgende code voor de definitie van de plug-in:

Als u me sinds mijn introductieserie over de WP REST API hebt gevolgd, hebt u al geleerd om de serverrespons voor een bepaalde resource te wijzigen met behulp van de register_rest_field () methode. Als je er niet naar hebt gekeken, raad ik je aan dit te doen door het artikel over het aanpassen van serverreacties te bekijken.
De register_rest_field () methode accepteert drie argumenten voor de naam van de te wijzigen resource, de naam van het veld en een array met argumenten voor het veld. Deze array van argumenten bevat de herstel-callback, de update-callback en het schema van het veld.
Hier is de code voor het toevoegen van een aangepast veld voor de afgebeelde afbeelding van de post:
 'quiescent_get_featured_image', 'update_callback' => null, 'schema' => null));  add_action ('rest_api_init', 'quiescent_modify_post_response');
De register_rest_field () methode wordt aangeroepen met de rest_api_init actie.
Het is altijd een goed gebruik om de naam van het aangepaste veld als voorvoegsel te gebruiken, zodat het in de toekomst niet conflicteert met een ander veld. Daarom hebben we ons eigen veld genoemd quiescent_featured_image. De methode die verantwoordelijk is voor het ophalen van deze aanbevolen afbeelding is quiescent_get_featured_image, en we definiëren het als het volgende:
Deze methode krijgt drie argumenten doorgegeven voor de berichtarray, de veldnaam en het verzoekobject. De berichtenserie bevat de nodige informatie over het huidige bericht, inclusief de ID, titel, inhoud, enzovoort. Door deze informatie te gebruiken, kunnen we willekeurige informatie ophalen die aan het bericht is gekoppeld. Daarom gebruiken we de post-featured media-ID om de link van de afgebeelde afbeelding van de post op te halen met behulp van de wp_get_attachment_image_src () methode.
Naast de bovenstaande code voor het registreren van het aangepaste veld voor de gekenmerkte afbeeldingslink van de post, moeten we ook een aangepaste afbeeldingsgrootte registreren:
De bovenstaande code gebruikt de add_image_size () methode voor het registreren van een nieuwe afbeeldingsgrootte van 712 px bij 348 px, en we gebruiken quiescent_post_thumbnail als de naam van de nieuwe afbeeldingsgrootte.
Sla de code op en zorg ervoor dat de Quiescent Companion-plug-in is geactiveerd in je WP-beheerder. Stuur een testaanvraag naar de / Wp / v2 / berichten route en de server stuurt de link van de afbeelding in de quiescent_featured_image veld in het antwoordobject:
... "tags": [], "quiescent_featured_image": "http: //localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712x348.jpg", "_links": ... 
Nu we de gekenmerkte afbeeldingslink in de reactie hebben toegevoegd, zijn de twee andere velden die nog moeten worden toegevoegd de naam van de auteur en de lijst met categorieën..
Voor het toevoegen van de weergavenaam van de auteur van het bericht, wijzigen we de quiescent_modify_post_response () functie om een ​​andere oproep aan de register_rest_field () methode zoals de volgende:
 'quiescent_get_author_name', 'update_callback' => null, 'schema' => null));
We noemen dit aangepaste veld quiescent_author_name en de callback-functie voor het ophalen van de waarde van dit veld is als volgt:
Hier gebruiken we de get_the_author_meta () methode om de weergavenaam van de auteur van het bericht op te halen.
Voor het laatste veld voor categorienamen, de oproep naar de register_rest_field () methode is als volgt:
 'quiescent_get_categories', 'update_callback' => null, 'schema' => null));
De bovenstaande oproep zou binnen in de quiescent_modify_post_response () functie. De quiescent_get_categories () ophaal callback methode is:
De bovenstaande code gebruikt de get_the_category () methode voor het ophalen van de categorieën voor het huidige bericht. Deze methode retourneert een array met objecten, waarbij elk object een categorie vertegenwoordigt die bij het huidige bericht hoort.
Nu we alle bovenstaande code hebben geschreven, zijn nu drie nieuwe velden toegevoegd aan het standaard antwoordobject voor de berichten bron. Deze drie nieuwe velden zijn:
 
quiescent_featured_image
 
 quiescent_author_name
 
 quiescent_categories
 
Standaard is het standaardantwoord voor de gebruikers bron bevat avatar-URL's voor grootten van 24 px, 48 px en 96 px. Het laatste wat we nu moeten doen is een URL toevoegen voor een extra gravatar-grootte van 207 px voor de gebruikers bron. Dus maak een nieuwe functie met de naam quiescent_modify_user_response () en haak het aan de rest_api_init actie:
Binnen deze functie voegen we een oproep toe aan de register_rest_field () methode om een ​​veld met de naam toe te voegen quiescent_avatar_url voor de gebruiker voorwerp:
 'quiescent_get_user_avatar', 'update_callback' => null, 'schema' => null)); 
De quiescent_get_user_avatar () callback-methode is als volgt:
 207); return get_avatar_url ($ user ['id'], $ args); 
Deze methode gebruikt de get_avatar_url () methode om de URL te retourneren voor een gravatar van 207 px bij 207 px.
Verzend een KRIJGEN verzoek aan de / Wp / v2 / gebruikers route en de server retourneert een extra veld met de naam quiescent_avatar_url samen met het standaard antwoordobject:
... "quiescent_avatar_url": "http://0.gravatar.com/avatar/?s=207&d=mm&r=g",... 
Dat is alles over het bouwen van de bijbehorende plugin. De voltooide broncode kan worden gepakt uit de Envato Tuts + GitHub-repository.
Nu de plug-in is voltooid, zijn we nu klaar om verder te gaan en te gaan werken met AngularJS om sjablonen, routes en services voor bronnen te maken, wat we in het volgende deel van de serie zullen doen.
What's Up Next?
In deze zelfstudie hebben we een basis gelegd voor het maken van een voor WordPress-aangedreven frontend met behulp van de WP REST API en AngularJS. We hebben projectvereisten geanalyseerd met wireframes en een begeleidende plug-in gemaakt voor het ondersteunen van de frontend.
In het volgende deel van de serie gaan we aan de slag met het HTML-pakket dat we eerder in deze zelfstudie hebben gedownload. We zullen de AngularJS-app booten, routing configureren en REST-services maken voor berichten, gebruikers, en Categorieën middelen, dus houd ons in de gaten ...




		
			
	   
	




Code