Cosa starai creando

Lavorare con il framework Angular.js è veloce e gratificante e, combinato con WordPress, può creare una SPA davvero unica (applicazione a pagina singola) in un breve lasso di tempo. Con tutti i controlli CMS e i plugin offerti da WordPress, questa è un'interessante scorciatoia.

Impostazione del tema

Inizieremo a creare un nuovo tema usando il _tk tema boilerplate per cominciare. Questa è una implementazione del _S sottolinea il tema di Automattic ma con Bootstrap di Twitter implementato.

Prendi il tema da GitHub e posiziona i file nel tuo temi directory:

$ cd themes $ wget https://github.com/Themekraft/_tk/archive/master.zip wp-content / themes / $ unzip master.zip Archivio: master.zip 69acda231e2a2f8914374df81b89a7aa37d594fa creazione: _tk-master / inflating: _tk-master /404.php inflating: _tk-master / archive.php inflating: _tk-master / comments.php inflazionando: _tk-master / content-page.php inflating: _tk-master / content-single.php ... ## Rinomina la directory $ mv _tk-master / angular-bootstrap $ rm -f master.zip 

Ora che abbiamo il _tk tema di partenza, avremo bisogno del npm pacchi angolare e angolare percorso dall'interno della directory del tema (stiamo usando il nome angolare bootstrap).

$ cd wp-angular $ npm init #follow le istruzioni per creare il file package.json ... "author": "", "license": "ISC" Va bene? (si) si ## Installa I pacchetti $ $ npm installa angular-route angolare --save 

• È necessario inizializzare npm all'interno della directory dei temi con npm init per creare il package.json, un file che npm usa per gestire i progetti.
• Usando il --salvare bandiera nel nostro npm install angular-route angolare --save comando che stiamo dicendo npm per aggiungere i moduli come dipendenze al nostro progetto.
• In futuro, se avremo bisogno di condividere questo progetto con un altro sviluppatore, dovranno solo essere eseguiti installazione di npm nella stessa directory del package.json per ottenere i pacchetti.

Ora avrai i pacchetti nel tuo node_modules directory all'interno del tema. Dai un'occhiata alla directory e sarai in grado di vedere diversi file js. Useremo angular.min.js per lo sviluppo

Inizializzazione angolare

Includere angular.min.js all'interno di WordPress abbiamo bisogno di modificare il functions.php file in modo che possiamo accodare gli script in WordPress.

All'interno di functions.php, trova il _tk_scripts () funzione e aggiungere la seguente alla fine della funzione:

// Carica angolare wp_enqueue_script ('angularjs', get_template_directory_uri (). '/ Node_modules / angular / angular.min.js'); wp_enqueue_script ('angularjs-route', get_template_directory_uri (). '/ node_modules / angular-route / angular-route.min.js'); wp_enqueue_script ('scripts', get_stylesheet_directory_uri (). '/js/scripts.js', array ('angularjs', 'angularjs-route')); 

Dovrai anche creare JS / scripts.js-per ora basta creare un file vuoto.

Ora aggiorna il tema in un browser e negli strumenti per sviluppatori che sarai in grado di vedere angular.min.js incluso ora.

Utilizzando Partials

Angular.js ha un ottimo sistema per aggiornare solo un pezzo parziale di HTML. Per approfittare di questo e del angolare percorso modulo, avremo bisogno di creare una directory all'interno del tema chiamato parziali.

$ mkdir partial 

Dentro il parziali directory, creare un file chiamato main.html allo scopo di testare e aggiungere l'HTML che ti piace all'interno.

Localizza il percorso dei parziali per WordPress

Affinché Angular possa caricare i parziali, è necessario fornire un URL completo. Ho avuto qualche problema nell'usare il get_stylesheet_directory_uri () metodo, ma provalo tu stesso. Se non funziona, utilizza l'URL completo.

Aggiungi il seguente al _tk_scripts funzione qui sotto dove hai aggiunto il angularjs e angolare percorso linee dall'ultimo passaggio:

// Con get_stylesheet_directory_uri () wp_localize_script ('scripts', 'localized', array ('partials' => get_stylesheet_directory_uri (). '/ Wp-content / themes / angular-bootstrap / partials /')); 

Se ciò non riesce (che al momento della scrittura era per me), scrivi nell'URL, ad es.

// Con valore hardcoded wp_localize_script ('scripts', 'localized', array ('partials' => 'http://www.mydomaind.com/wp-content/themes/angular-bootstrap/partials/')); 

Abilitazione di WP-API

Affinché Angular funzioni con WordPress, è necessario abilitare il plugin REST di WP-API. Questo è semplice, in quanto è solo l'installazione di un plugin.

Scarica e installa il plugin da git ed esegui quanto segue nel tuo plugins dir:

git clone [email protected]: WP-API / WP-API.git json-rest-api 

Quindi abilita il plugin nel tuo wp-admin pannello. Sarai in grado di vedere l'output JSON su your-wordpress.com/wp-json una volta abilitato.

Costruire percorsi

I percorsi compongono le pagine specifiche del tuo blog. Possiamo definirne uno per il nostro main.html parzializza ora e configuralo per mostrarlo nella pagina indice del nostro WordPress.

Assicurati innanzitutto che l'app Angular.js sia definita tramite ng-app attributo e in header.php fai quanto segue:

  ng-app = "wp">   

Qui stiamo chiamando l'app wp con il ng-app attributo. Inoltre abbiamo impostato il base tag in modo che Angular possa trovare il JSON in cui è stato attivato WP-API.

Aggiungi il seguente a JS / scripts.js:

angular.module ('wp', ['ngRoute']) .config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', controller: 'Main')) .controller ('Main', funzione ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Success (function (res) $ scope .posts = res;);); 

Ora dentro parziali / main.html Aggiungi questo:

 
  titolo del post  
 
 

E finalmente dentro index.php, subito dopo get_header.php (), aggiungi l'attributo Angolare ng-view a div etichetta.

Aggiorna l'indice del tuo WordPress e un elenco puntato dei post del tuo blog verrà visualizzato nella home page.

Questo è dovuto al ng-controllore invocando il Principale controller da scripts.js e il ng-view attributo che specifica dove deve essere visualizzato Angular.

Visualizzazione di un messaggio di Slug

Aggiungiamo ora il percorso per visualizzare un blog WordPress tramite l'URL slug.

Aperto JS / scripts.js e regola il file in modo che legga come segue:

angular.module ('wp', ['ngRoute']) .config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', controller: 'Main') .when ('/: slug', templateUrl: localized.partials + 'content.html', controller: 'Content') .otherwise (redirectTo: '/');) .controller ('Main', funzione ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Success (function (res) $ scope.posts = res;); ) .controller ('Contenuto', ['$ scope', '$ http', '$ routeParams', funzione ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /? filter [nome] = '+ $ routeParams.slug) .success (function (res) $ scope.post = res [0];);]); 

Aggiungendo il Soddisfare controller, possiamo specificare il $ http.get URI per i post JSON e specificare il lumaca come parametro del filtro.

Per creare questo usiamo il seguente codice: $ http.get ('wp-json / posts /? filter [nome] =' + $ routeParams.slug).

Nota: per ottenere il /: Slug percorso funzionante, è necessario specificare /% Postname% / come la tua struttura di permalink in wp-admin.

Assicurati di impostare il content.html con il seguente:

titolo del post
  Post.content 

Ora, se aggiorni la pagina, sarai in grado di navigare verso i post del tuo blog tramite i link nella lista puntata che hai fatto nel passaggio precedente.

Utilizzo dei servizi angolari in WordPress

Finora abbiamo visto come creare percorsi e iniziare a lavorare con wp-JSON API. Prima di iniziare a scrivere qualsiasi logica, abbiamo bisogno di un posto dove andare, e questo è all'interno di un Angolare servizio (in questo esempio usiamo a Fabbrica servizio).

Crea un nuovo file js / services.js e aggiungi il seguente codice per recuperare categorie e post:

 function ThemeService ($ http) var ThemeService = categories: [], posts: [], pageTitle: 'Latest Posts:', currentPage: 1, totalPages: 1, currentUser: ; // Imposta il titolo della pagina nel file