Статьи

Создание одностраничных приложений с WordPress и Angular.js

Январь 7, 2019
Конечный продукт
Что вы будете создавать

Работа с фреймворком Angular.js быстрая и полезная, и в сочетании с WordPress она может создать действительно хорошее SPA (одностраничное приложение) за короткий промежуток времени. Со всеми элементами управления и плагинами CMS, предлагаемыми WordPress, это интересный короткий путь.

Настройка темы

Мы начнем создавать новую тему, используя _tk тему _tk . Это реализация темы подчеркивания _s от Automattic, но с реализованной в Twitter Bootstrap.

Возьмите тему из GitHub и поместите файлы в каталог themes :

bash $ cd themes $ wget https://github.com/Themekraft/_tk/archive/master.zip wp-content/themes/$ unzip master.zip Archive: master.zip 69acda231e2a2f8914374df81b89a7aa37d594fa creating: _tk-master/ inflating: _tk-master/404.php inflating: _tk-master/archive.php inflating: _tk-master/comments.php inflating: _tk-master/content-page.php inflating: _tk-master/content-single.php ... ## Rename The Directory $ mv _tk-master/ angular-bootstrap $ rm -f master.zip

Теперь, когда у нас есть _tk тема _tk , нам понадобятся пакеты npm angular и angular-route из каталога вашей темы (мы используем имя angular-bootstrap ).

« `bash $ cd wp-angular $ npm init # следуйте подсказкам для создания файла package.json…“ author ”:“ ”,“ license ”:“ ISC ”}

Это нормально? (да) да ## Установить пакеты $ $ npm установить angular-route -save « `

  • Вы должны инициализировать npm в каталоге тем с помощью npm init , чтобы создать package.json , файл, который npm использует для управления проектами.
  • Используя флаг --save в нашей --save npm install angular angular-route --save мы сообщаем npm добавить модули в качестве зависимостей в наш проект.
  • В будущем, если нам понадобится поделиться этим проектом с другим разработчиком, им нужно будет только запустить npm install в том же каталоге, что и package.json , чтобы получить пакеты.

Теперь у вас будут пакеты в вашей директории node_modules внутри вашей темы. Загляните в каталог, и вы сможете увидеть несколько файлов js. Мы будем использовать angular.min.js для разработки

Инициализация Angular

Чтобы включить angular.min.js в WordPress, нам нужно изменить файл functions.php чтобы мы могли ставить в очередь скрипты в WordPress.

Внутри functions.php найдите функцию _tk_scripts() и добавьте следующее в _tk_scripts() функции:

php //Load angular 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' ));

Вам также нужно будет создать js/scripts.js — сейчас просто создайте пустой файл.

Теперь обновите вашу тему в браузере, и в инструментах разработчика вы сможете увидеть angular.min.js включенный сейчас.

Использование Partials

Angular.js имеет отличную систему для обновления только части HTML. Чтобы воспользоваться этим и модулем angular-route , нам нужно создать каталог внутри темы с именем partials .

bash $ mkdir partials

Внутри каталога partials создайте файл с именем main.html для тестирования и добавьте в него любой HTML- main.html .

Локализуйте путь Partials для WordPress

Чтобы Angular мог загружать партиалы, мы должны предоставить полный URL. У меня были некоторые проблемы с использованием get_stylesheet_directory_uri() , но попробуйте сами. Если это не работает, используйте свой полный URL.

Добавьте следующее в функцию _tk_scripts ниже, где вы добавили линии angularjs и angular-route из последнего шага:

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

Если это не удается (что на момент написания было для меня), напишите в URL, например,

php // With hardcoded value wp_localize_script('scripts', 'localized', array( 'partials' => 'https://www.mydomaind.com/wp-content/themes/angular-bootstrap/partials/' ) );

Включение WP-API

Чтобы Angular работал с WordPress, нам нужно включить плагин WP-API REST. Это просто, так как это просто установка плагина.

Скачайте и установите плагин из git и запустите следующее в plugins :

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

Затем включите плагин в вашей панели wp-admin . Вы сможете увидеть вывод JSON на your-wordpress.com/wp-json только он будет включен.

Построение маршрутов

Маршруты составляют конкретные страницы вашего блога. Мы можем определить один для нашего main.html частичного сейчас — и настроить его так, чтобы он отображался на странице индекса нашего WordPress.

Сначала убедитесь, что приложение Angular.js определено с помощью атрибута ng-app , и в header.php сделайте следующее:

« `php <! DOCTYPE html>

<HTML нг-приложение =»сор»>

« `Здесь мы вызываем приложение` wp` с атрибутом `ng-app`. Также мы устанавливаем тег `base`, чтобы Angular мог найти JSON, который мы включили в` WP-API`. Добавьте следующее в `js / scripts.js`:` « js angular.module (‘wp’, [‘ngRoute’]) .config (function ($ routeProvider, $ locationProvider) {$ routeProvider .when (‘/’ , {templateUrl: localized.partials + ‘main.html’, controller: ‘Main’})}) .controller (‘Main’, функция ($ scope, $ http, $ routeParams) {$ http.get (‘wp- json / posts / ‘). success (function (res) {$ scope.posts = res;});}); « `Теперь внутри` partials / main.html` добавьте это: « `html

« `И, наконец, внутри` index.php`, непосредственно после `get_header.php ()`, добавьте угловой атрибут `ng-view` к тегу` div`. « « HTML

« `Обновите индекс вашего WordPress, и теперь на главной странице будет отображаться маркированный список ваших сообщений в блоге. Это связано с тем, что `ng-controller` вызывает контроллер` Main` из `scripts.js` и атрибут` ng-view`, указывающий, где должен отображаться Angular. ### Отображение поста по слагу Давайте теперь добавим маршрут для отображения блога WordPress через слаг URL. Откройте файл `js / scripts.js` и настройте файл так, чтобы он читался следующим образом:` « js angular.module (‘wp’, [‘ngRoute’]) .config (function ($ routeProvider, $ locationProvider) {$ routeProvider .when (‘/’, {templateUrl: localized.partials + ‘main.html’, контроллер: ‘Main’}) .when (‘/: slug’, {templateUrl: localized.partials + ‘content.html’, контроллер : ‘Content’}) .otherwise ({redirectTo: ‘/’});}) .controller (‘Main’, функция ($ scope, $ http, $ routeParams) {$ http.get (‘wp-json / posts) / ‘). success (function (res) {$ scope.posts = res;});}) .controller (‘ Content ‘, [‘ $ scope ‘,’ $ http ‘,’ $ routeParams ‘, функция ($ scope) , $ http, $ routeParams) {$ http.get (‘wp-json / posts /? filter [name] =’ + $ routeParams.slug) .success (function (res) {$ scope.post = res [0] ;});}]); « `Добавляя контроллер` Content`, мы можем указать URI `$ http.get` для сообщений JSON и указать` slug` в качестве параметра фильтра. Для создания этого мы используем следующий код: `$ http.get (‘wp-json / posts /? Filter [name] =’ + $ routeParams.slug)`. Примечание. Чтобы маршрут `/: slug` работал, вы должны указать` /% postname% / `в качестве структуры постоянной ссылки в` wp-admin`. Обязательно установите `content.html` со следующим:` « html

{{Заголовок поста}}

{{post.content}} « `Теперь, если вы обновите страницу, вы сможете переходить к сообщениям в своем блоге по ссылкам в списке маркеров, который вы создали на предыдущем шаге. ## Использование Angular Services в WordPress До сих пор мы видели, как создавать маршруты и начинать работать с API `wp-json`. Прежде чем мы начнем писать какую-либо логику, нам нужно место, куда она должна пойти, и это находится внутри Angular `service` (в этом примере мы используем сервис` Factory`). Создайте новый файл `js / services.js` и добавьте следующий код для извлечения категорий и сообщений:` « js function ThemeService ($ http) {var ThemeService = {Categories: [], posts: [], pageTitle: ‘ Последние сообщения: ‘, currentPage: 1, totalPages: 1, currentUser: {}}; // Установить заголовок страницы в функция тега _setTitle (documentTitle, pageTitle) {document.querySelector (‘title’). innerHTML = documentTitle + ‘| AngularJS Demo Theme ‘; ThemeService.pageTitle = pageTitle; } // Настройка функции разбиения на страницы _setArchivePage (posts, page, headers) {ThemeService.posts = posts; ThemeService.currentPage = page; ThemeService.totalPages = заголовки (‘X-WP-TotalPages’); } ThemeService.getAllCategories = function () {// Если они уже установлены, не нужно их снова получать if (ThemeService.categories.length) {return; } // Получить термины категории из wp-json return $ http.get (‘wp-json / taxonomies / category / Terms’). Success (function (res) {ThemeService.categories = res;}); }; ThemeService.getPosts = function (page) {return $ http.get (‘wp-json / posts /? Page =’ + page + ‘& filter [posts_per_page] = 1’). Success (функция (res, состояние, заголовки) { ThemeService.posts = res; page = parseInt (page); // Проверяем переменную страницы на предмет корректности, если (isNaN (page) || page> headers (‘X-WP-TotalPages’))) {_setTitle (‘Page Not Found’, ‘Страница не найдена’);} else {// Работа с нумерацией страниц, если (page> 1) {_setTitle (‘Сообщения на странице’ + страница, ‘Сообщения на странице’ + page + ‘:’);} else {_setTitle ( ‘Home’, ‘Последние сообщения:’);} _setArchivePage (res, page, headers);}}); }; вернуть ThemeService; } // Наконец, зарегистрируйте сервис app.factory (‘ThemeService’, [‘$ http’, ThemeService]); « `Это базовая заводская настройка, в которой у нас есть две внутренние функции` _setTitle` и `_setArchivePage`. Эти методы вызываются из `getPosts` и` getCategories`, чтобы обновить заголовок текущей страницы, а также установить внутреннее целое число, чтобы узнать, какой номер страницы мы смотрим. Нам нужно будет начать использовать модуль `ngSanitize` для анализа входных данных нашего сервиса. Установите это с `npm`, как в каталоге вашей темы:` « bash $ npm install angular-sanitize —save « « ThemeService` — это просто базовый объект JavaScript, который выполняет поиск по категориям через `$ http.get `, как и метод` getPosts`. Теперь мы сообщим нашему контролеру об этой услуге. Откройте `scripts.js` и измените контроллер, чтобы он знал о` ThemeService`. « `js // Основной контроллер app.controller (‘Main’, [‘$ scope’, ‘$ http’, ‘ThemeService’, функция ($ scope, $ http, ThemeService) {// Получить категории из ThemeService ThemeService. getAllCategories (); // Получить первую страницу сообщений от ThemeService ThemeService.getPosts (1); $ scope.data = ThemeService;}]); « `Не забудьте включить модуль` angular-sanitize` внутри вашего `scripts.js` также в первой строке с помощью:` « js var app = angular.module (‘wp’, [‘ngRoute’, ‘ngSanitize’]); « `Наконец, вам нужно убедиться, что файл` js / services.js` помещен в WordPress, а также в модуль angular-sanitize. Сделайте это, изменив файл `functions.php` и добавив следующее перед вызовом` wp_localize_script`: « `php wp_enqueue_script (‘angularjs-sanitize’, get_stylesheet_directory_uri (). ‘/ Node_modules / angular-sanitize / angular-sanitize). min.js’); wp_enqueue_script (‘theme-service’, get_stylesheet_directory_uri (). ‘/js/services.js’); « `Теперь нам нужно обновить партию` main.html`, чтобы отобразить эти категории, предоставляемые ThemeService. « `html <h1> Categories </ h1> <ul> <li ng-repeat =» category in data.categories «> <span ng-if =» current_category_id && category.ID == current_category_id «ng-bind-html = category.name> </ span> <a ng-if = «! current_category_id || category.ID! = current_category_id» href = https: //translate.googleusercontent.com/translate_c? deep = 1 & rurl = translate.google.ru & sl = en & sp = nmt4 & tl = ru & u = http: //code.tutsplus.com/category/%257B%257Bcategory.slug%257D%257D&xid=17259,15700002,15700022,15700186,157001915700271,157IThWhWhWhwhwh6 -html = category.name> </a> </ li> </ ul> <p> {{data.pageTitle}} </ p> <ul> <li ng-repeat = «post in data.posts»> <a href = https: //translate.googleusercontent.com/translate_c? deep = 1 & rurl = translate.google.ru & sl = en & sp = nmt4 & tl = ru & u = http: //code.tutsplus.com/%257B%257Bpost.slug%257D % 257D & XID = 17259,15700002,15700022,15700186,15700191,15700259,15700271,15700302 & USG = ALkJrhiEkcqtgla8HFgs5IIy8QZ4gP3ojw нг-связывания-HTML = post.title> </a> <A HREF = HTTPS: //translate.googl eusercontent.com/translate_c?depth=1&rurl=translate.google.ru&sl=en&sp=nmt4&tl=ru&u=http://code.tutsplus.com/%257B%257Bpost.slug%257D%257D&xid=17259,15700002,15700022,15700186 , 15700191,15700259,15700271,15700302 & USG = ALkJrhiEkcqtgla8HFgs5IIy8QZ4gP3ojw div ng-bind-html = post.excerpt.rendered> </ div> </ li> </ ul> « `Теперь вы сможете видеть свои сообщения и категории, отображаемые на вашей домашней странице, через` ng-view` используя `фабрику` сервис для Angular. Преимущество этого заключается в том, что все компоненты будут иметь в своем распоряжении данные. Таким образом, теперь мы можем разделить объект категорий между всеми нашими контроллерами на наших маршрутах. ## Дальнейшие действия Теперь, когда у нас есть служба, настроенная для нашей темы, мы можем продолжить разработку слоя данных и включить стили Bootstrap в возвращаемый HTML. Теперь возможности Angular, настроенные в вашей теме, поистине безграничны, и, ознакомившись с предоставленным репозиторием, вы сможете быстро приступить к созданию одностраничных приложений WordPress с поддержкой Angular и Bootstrap.

40
Share: