Creazione di un front-end alimentato da WordPress introduzione e configurazione

Nella serie introduttiva sull'API REST di WP, abbiamo imparato a utilizzare le funzionalità di base fornite dall'API e la flessibilità che offre quando costruisci app con il back-end di WordPress. Abbiamo esaminato le risorse, i percorsi e i metodi supportati per l'esecuzione delle operazioni CRUD.

In questa serie sulla creazione di un front end basato su WordPress con WP REST API e AngularJS, metteremo a frutto le conoscenze acquisite nella serie introduttiva. Impareremo come sfruttare questa conoscenza per disaccoppiare il modello di amministrazione a tema convenzionale supportato da WordPress fino ad ora. Pianificheremo e costruiremo un'applicazione a pagina singola (che ho chiamato inattivo) Con un back-end di WordPress che presenterà pagine di annunci di post, utenti e categorie. Configureremo il routing di AngularJS e costruiremo una direttiva personalizzata e controller per le risorse sopra menzionate.

Nella prima parte della serie, faremo:

• valutare i requisiti per la costruzione del front-end con l'aiuto di wireframe
• scarica e installa il pacchetto HTML bare-bones per iniziare a lavorare
  
• crea un plugin WordPress complementare basato sulle valutazioni di cui sopra
  

Quindi iniziamo valutando i requisiti per costruire il front-end.

Pianificare le cose

La parte iniziale all'inizio di ogni progetto dovrebbe valutare i requisiti del progetto e pianificare di conseguenza le cose. Ciò costituisce una solida base per il progetto e ci aiuta a pensare chiaramente in termini di funzionalità e funzionalità dell'applicazione.

Come accennato in precedenza, abbiamo bisogno di elencare pagine e pagine singole per le seguenti tre risorse:

1. Messaggi
2. categorie
3. utenti

Parliamo innanzitutto della creazione di modelli per il Messaggi risorsa. Avremo bisogno di due modelli per questa risorsa, vale a dire un modello di inserzione e un modello di un singolo post. Il modello di inserzione mostrerà un numero particolare di post con collegamenti di paginazione per andare al gruppo di post successivo o precedente. Il singolo modello di post mostrerà un singolo post sulla pagina.

Di seguito è riportato il wireframe per la pagina di elenco post:

E il seguente è il wireframe per il modello di singolo post:

Come possiamo vedere nei wireframe sopra, i requisiti sono piuttosto semplici, proprio come qualsiasi modello di blog standard. Ma quando confrontiamo i wireframe di cui sopra con la risposta standard che l'API WP REST fornisce per i post, ci imbattiamo nella conclusione che mancano i seguenti elementi dall'oggetto risposta standard:

• collegamento immagine in primo piano
• nome dell'autore
  
• nomi e collegamenti di categoria
  

Quindi abbiamo bisogno di modificare la risposta per il Messaggi risorsa per includere questi elementi. Lo faremo più avanti in questo tutorial creando un plugin companion per WordPress.

Analizziamo ora i requisiti per categorie e utenti risorse esaminando i seguenti due wireframe.

Di seguito è riportato il wireframe per il modello di categoria:

Ed ecco il wireframe per il template utente:

Osservando i due wireframe sopra, è chiaro che non richiedono la registrazione di campi aggiuntivi nelle loro risposte standard. Ma se guardiamo da vicino la pagina del profilo dell'autore, dobbiamo aggiungere una dimensione gravatar aggiuntiva per tenere conto della dimensione dell'immagine nel nostro HTML. Questa funzionalità può essere ottenuta anche nel plug-in companion.

Uno dei principi fondamentali e più avvantaggiati dell'ingegneria del software è il principio DRY (Do not Repeat Yourself). Analizzando i modelli sopra, vediamo che l'elenco dei post viene ripetuto su quasi tutti i modelli di inserzioni in una forma o nell'altra. Quindi andremo avanti e creeremo una direttiva AngularJS comune per l'elenco dei post da utilizzare su tutti i modelli sopra elencati e questa direttiva includerà funzionalità che includono il post impaginazione e il recupero di un sottoinsieme di post per i parametri specificati.

Ora che abbiamo valutato i requisiti generali per la costruzione dell'applicazione, possiamo approfondire la parte di codifica a partire dalla sezione successiva.

Requisiti dell'esercitazione

Prima di iniziare a lavorare per creare l'applicazione, è necessario che alcune applicazioni siano installate sul proprio sistema. Queste applicazioni sono:

• un'installazione di WordPress con il plugin API RIP di WP abilitato e alcuni dati demo
• Git per clonare il repository HTML (non è necessario, però, dato che puoi anche scaricare il repository direttamente dal sito GitHub tramite GUI)
  
• Node.js per lavorare con npm e sorso comandi
  
• GulpJS per eseguire attività di ottimizzazione e ottimizzazione nel pacchetto HTML
  

Se hai sviluppato per il web per un po ', c'è una buona probabilità che tu abbia già installato questo materiale sul tuo sistema. Altrimenti, ti consiglio di dare un'occhiata ai loro siti ufficiali e alla documentazione per farli installare.

Download e installazione del pacchetto HTML

Per rendere le cose più facili da seguire, ho già creato modelli HTML di base per i wireframe che abbiamo analizzato sopra.

Prima di tutto, devi clonare il repository del pacchetto HTML da GitHub:

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

Dopo aver clonato il repository, è necessario navigare nella directory utilizzando il seguente comando:

$ cd percorso / to / clonato / repository

Non importa se usi OS X, Windows o Linux, perché sopra CD il comando funzionerà su quasi tutti i sistemi operativi.

Ora è necessario installare i moduli Node.js usando:

$ npm install

Il comando di cui sopra richiederà del tempo per essere completato, a seconda della velocità della tua connessione Internet.

Dopo aver installato i moduli necessari, puoi finalmente compilare la fonte usando il sorso comando:

$ gulp

Questo produce una nuova cartella chiamata dist che contiene la fonte compilata per HTML e le sue risorse.

Il installazione di npm il comando che abbiamo eseguito sopra installa anche un modulo Node.js chiamato http server questo fornisce un modo semplice e veloce per configurare un server HTTP di base all'interno di qualsiasi directory. È possibile controllare la fonte compilata navigando nel dist directory ed eseguendo il seguente comando:

$ http-server

Ciò farà eco ad alcuni indirizzi sullo schermo del server che puoi inserire nel tuo browser per iniziare a visualizzare l'HTML.

$ http-server Avvio di http-server, in servizio ./ Disponibile su: http: 192.168.0.104: 8080 http: 192.168.56.1: 8080 http: 127.0.0.1: 8080 Hit CTRL-C per arrestare il server

Questo è tutto per il download e la compilazione del pacchetto HTML di base che funzionerà come la spina dorsale per il nostro sviluppo futuro.

Costruire il plug-in Companion Quiescent

Dopo aver scaricato e installato i moduli necessari per il pacchetto HTML, ora siamo pronti per creare la funzionalità lato server per supportare il front-end.

In una sezione precedente, abbiamo analizzato i requisiti per la creazione del front-end con l'API REST di WP e AngularJS. Diamo un'occhiata di nuovo agli elementi richiesti di cui abbiamo bisogno per costruire il front-end:

1. Immagine in primo piano per il post. Abbiamo anche bisogno di registrare una nuova dimensione dell'immagine in WordPress per tenere conto della dimensione dell'immagine nel nostro codice HTML.
2. Nome dell'autore del post. Questo può essere recuperato utilizzando l'ID autore disponibile nell'oggetto risposta standard.
   
3. Elenco delle categorie associate al post. Questo può essere ottenuto utilizzando l'ID post.
   
4. Una nuova dimensione dell'immagine per il gravatar per tenere conto della dimensione dell'immagine del profilo dell'autore nel nostro HTML.
   

Quindi abbiamo bisogno di tre campi aggiuntivi per il Messaggi risorsa e anche bisogno di aggiungere nuove dimensioni di immagine per l'immagine in vetrina e l'utente gravatar.

Iniziamo creando una nuova directory per il nostro plugin in / Wp-content / plugins cartella e nominandolo quiescente-compagna. All'interno di questa directory, crea un nuovo file PHP chiamato quiescente-companion.php e incolla il seguente codice per la definizione del plugin:

Se hai seguito con me fin dalla mia serie introduttiva sull'API REST di WP, hai già imparato a modificare la risposta del server per una particolare risorsa utilizzando il register_rest_field () metodo. Se non hai dato un'occhiata a questo, ti consiglio di farlo controllando l'articolo sulla modifica delle risposte del server.
Il register_rest_field () metodo accetta tre argomenti per il nome della risorsa da modificare, il nome del campo e una matrice di argomenti per il campo. Questo array di argomenti contiene il callback di recupero, il callback di aggiornamento e lo schema del campo.
Ecco il codice per aggiungere un campo personalizzato per l'immagine in primo piano del post:
 'quiescent_get_featured_image', 'update_callback' => null, 'schema' => null));  add_action ('rest_api_init', 'quiescent_modify_post_response');
Il register_rest_field () il metodo è chiamato con il rest_api_init azione.
È sempre utile anteporre il nome del campo personalizzato in modo che non sia in conflitto con altri campi in futuro. Quindi abbiamo chiamato il nostro campo personalizzato quiescent_featured_image. Il metodo responsabile per il recupero di questa immagine in vetrina è quiescent_get_featured_image, e lo definiamo come il seguente:
Questo metodo ottiene tre argomenti per l'array di post, il nome del campo e l'oggetto di richiesta. L'array di post contiene le informazioni necessarie sul post corrente, inclusi ID, titolo, contenuto, ecc. Utilizzando queste informazioni, possiamo recuperare qualsiasi informazione arbitraria associata al post. Quindi utilizziamo l'ID multimediale in primo piano per recuperare il collegamento dell'immagine in primo piano del post utilizzando il wp_get_attachment_image_src () metodo.
Oltre al codice sopra riportato per la registrazione del campo personalizzato per il collegamento dell'immagine in primo piano del post, dobbiamo anche registrare una dimensione immagine personalizzata di conseguenza:
Il codice sopra utilizza il add_image_size () metodo per registrare una nuova dimensione dell'immagine di 712 px per 348 px, e usiamo quiescent_post_thumbnail come il nome della nuova dimensione dell'immagine.
Salva il codice e assicurati che il plugin Quiescent Companion sia attivato nel tuo amministratore di WP. Invia una richiesta di prova al / WP / V2 / messaggi percorso e il server restituirà il collegamento dell'immagine in primo piano nel file quiescent_featured_image campo nell'oggetto risposta:
... "tags": [], "quiescent_featured_image": "http: //localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712x348.jpg", "_links": ... 
Ora che abbiamo aggiunto con successo il collegamento dell'immagine in primo piano nella risposta, gli altri due campi che devono essere aggiunti sono per il nome dell'autore e l'elenco di nomi delle categorie.
Per aggiungere il nome visualizzato dell'autore del post, modifichiamo il quiescent_modify_post_response () funzione per includere un'altra chiamata al register_rest_field () metodo come il seguente:
 'quiescent_get_author_name', 'update_callback' => null, 'schema' => null));
Chiamiamo questo campo personalizzato quiescent_author_name e la funzione di callback per recuperare il valore di questo campo è la seguente:
Qui usiamo il get_the_author_meta () metodo per recuperare il nome visualizzato dell'autore del post.
Per l'ultimo campo per i nomi delle categorie, la chiamata al register_rest_field () il metodo è il seguente:
 'quiescent_get_categories', 'update_callback' => null, 'schema' => null));
La chiamata di cui sopra dovrebbe andare all'interno del quiescent_modify_post_response () funzione. Il quiescent_get_categories () metodo di callback di recupero è:
Il codice sopra utilizza il get_the_category () metodo per recuperare le categorie per il post corrente. Questo metodo restituisce una matrice di oggetti, con ogni oggetto che rappresenta una categoria che appartiene al post corrente.
Ora che abbiamo scritto tutto il codice sopra, ora vengono aggiunti tre nuovi campi all'oggetto risposta standard per il Messaggi risorsa. Questi tre nuovi campi sono:
 
quiescent_featured_image
 
 quiescent_author_name
 
 quiescent_categories
 
Per impostazione predefinita, la risposta standard per utenti la risorsa contiene URL di avatar per le dimensioni di 24 px, 48 px e 96 px. L'ultima cosa che dobbiamo fare ora è aggiungere un URL per una dimensione gravatar aggiuntiva di 207 px per il utenti risorsa. Quindi crea una nuova funzione chiamata quiescent_modify_user_response () e collegalo al rest_api_init azione:
All'interno di questa funzione, aggiungiamo una chiamata al register_rest_field () metodo per aggiungere un campo chiamato quiescent_avatar_url per il utente oggetto:
 'quiescent_get_user_avatar', 'update_callback' => null, 'schema' => null)); 
Il quiescent_get_user_avatar () il metodo di callback è il seguente:
 207); return get_avatar_url ($ user ['id'], $ args); 
Questo metodo utilizza il get_avatar_url () metodo per restituire l'URL per un gravatar di dimensioni 207 px per 207 px.
Invia un OTTENERE richiesta al / WP / V2 / utenti percorso e il server restituirà un campo aggiuntivo denominato quiescent_avatar_url insieme all'oggetto risposta standard:
... "quiescent_avatar_url": "http://0.gravatar.com/avatar/?s=207&d=mm&r=g",... 
Questo è tutto sulla costruzione del plugin companion. Il codice sorgente completo può essere acquisito dal repository Envato Tuts + GitHub.
Ora che il plugin è stato completato, siamo ora pronti per andare avanti e iniziare a lavorare con AngularJS per creare modelli, percorsi e servizi per le risorse, che faremo nella prossima parte della serie.
Che succede Avanti?
In questo tutorial, abbiamo gettato le basi per la creazione di un front-end basato su WordPress utilizzando l'API WP REST e AngularJS. Abbiamo analizzato i requisiti del progetto con wireframe e creato un plug-in companion per il back-end del front-end.
Nella prossima parte della serie, inizieremo a lavorare con il pacchetto HTML che abbiamo scaricato in precedenza in questo tutorial. Effettueremo il bootstrap dell'app AngularJS, configureremo il routing e creeremo servizi RESTful per Messaggi, utenti, e categorie risorse, quindi rimanete sintonizzati ...




		
			
	   
	




Codice