Включите блог с помощью API WordPress

За последние несколько лет разработка API REST для WordPress открыла новые двери для разработчиков. Разработчики, которые ранее были ограничены для написания проекта в PHP в PHP WordPress, в PHP, имеют более гибкость и контроль в том, как они могут приблизиться к технологическому стеку их веб-сайта.

Это означает, что можно сохранить все преимущества блестящей панели управления WordPress, которая производится чрезвычайно гибкой по популярным Плагины WordPress. Такие как усовершенствованные пользовательские поля и имеют полностью настраиваемую построенную интерфейс, который взаимодействует только с WordPress, когда он должен.

• Скачать файлы учебника

В этом Учебник WordPress Мы будем исследовать, как реализовать API WordPress Rest API в простое приложение для блога, которое в настоящее время использует локальный файл JSON в качестве источника данных, и построен как одностраничное приложение (SPA), используя популярную структуру JavaScript Vue.js. Отказ Это будет включать в себя реализацию vuex, которую мы будем использовать для хранения данных, которые мы запрашиваем от WordPress, используя комбинацию методов действия и мутации.

После завершения вы должны создать Lean, простой спа, который имеет всю реакционную способность Vue.js, в то время как отображение постов, полученных из и управляемых WordPress.

Для более удивительных API для изучения, посмотрите на наши руководства в лучшем JavaScript APIS. , HTML APIS. и Google Apis Отказ

01. Настройте рабочее пространство и зависимости

Первые вещи в первую очередь, вы должны Загрузите файлы проекта И открыть их в своем предпочтительном редакторе.

В консоли, CD в шаблон сайта и запустить команду ниже, чтобы установить зависимости узла проекта (если у вас нет установленного узла, Сделайте это вообще ). Мы будем работать исключительно в сортировка каталог отсюда выходу.

npm install

02. Установите Vuex.

Далее, используя команду ниже, мы установим Вариант , который является государственным управлением и библиотекой для приложений Vue.js. Это будет выступать в качестве центрального хранилища информации для всех компонентов Vue, которые зависят от данных, которые мы получаем от API WordPress. Для разработчиков, знакомых с реакцией, Vuex сильно вдохновлен потоком.

npm install vuex --save

03. Начать сервер разработки

В консоли запустите команду ниже, чтобы начать сервер разработки. Это будет сознавать проект Vue.js, так как он в настоящее время стоит и назначает его URL, чтобы вы могли получить доступ к нему. Это обычно localhost: 8080. Отказ

Одним из больших преимуществ, которые это приносит, является живой перегрузкой, поэтому, как только вы вносите изменения в приложение и сохраните, страница в вашем браузере будет обновляться без необходимости вручную перезагрузки.

npm run dev

04. Создать магазин Vuex

В сортировка создать каталог называется хранить и в нем новый файл называется index.js. Отказ Это будет там, где будет определен наш магазин Vuex. Хотя, прежде чем мы доберемся до этого, нам нужно сначала убедиться, что наше приложение Vue.js осознает его существование. Сделать это, открыть Main.js. и импортировать магазин и включить его в зависимость, как в фрагменте ниже.

 Импорт Vue от «Vue»
Импортировать приложение из './app'
Импорт маршрутизатор от './roouter'
Импорт магазин из './STORE'
Vue.config.productiontip = false.
/ * Отключить eslint no-new * /
Новый Vue ({
  Эл: «#app»,
  Маршрутизатор,
  хранить,
  шаблон: '& lt; app / & gt;',
  Компоненты: {приложение}
}) 

05. Создание магазинов лесов и установка Axios

Чтобы помочь нам упростить запросы AJAX, наш магазин будет создан в WordPress API, мы устанавливаем Axios, что является клиентом на основе обещания. Для этого открыть отдельное консольное окно, перейдите к шаблон сайта каталог и прогон NPM Install Axios - Сохранить Отказ

Далее давайте начнем лечить магазин, создав новый пустой объект магазина Vuex. На данный момент это не делает ничего, но, по крайней мере, поэтапно следует знать об этом.

 Импорт Axios из «Axios»
Импорт Vue от «Vue»
Импорт Vuex из 'vuex'
Vue.use (vuex)
Const Store = New Vuex.Store ({{
  государственный: {},
  Действия: {},
  Мутации: {}
})
Экспорт магазина по умолчанию 

06. Создать государство постов

В Vuex объект состояния содержит информацию о приложении, которая в этом случае будет данные Post WordPress, мы возьмем с помощью API. В этом объекте создайте новое свойство, называемые сообщениями и назначайте его значение NULL.

 Состояние: {
  Сообщений: NULL.
} 

07. Создать действие GetPosts

В Vuex действия являются основным способом, которым обрабатываются асинхронные запросы. Обычно это методы, определенные в магазине, которые затем могут быть отправлены в соответствии с требуемыми приложением.

В пустое Действия Объект, давайте определим, где, если наши посты State по-прежнему NULL, AXIOS используется для выполнения запроса AJAX в API WordPress и вернуть список сообщений. Как только мы получим положительный ответ, мы тогда решим обещание и совершить посты, используя магазины мутация.

 GetPosts: Функция (контекст) {
  вернуть новое обещание ((разрешение, отклонение) = & gt; {
  Если (context.state.posts) {
  разрешить()
  }
  еще {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / посты ')
  (((ответ) = & gt; {
  Context.comMit («Storeposts»,
  Ответ.дата)
  разрешить()
  }). CALL ((ошибка) = & gt; {
  отклонить (ошибка);
  });
  }
  })
} 

08. Создание мутации StorePosts

Другая концепция, представленная Vuex, является мутациями, которые также обычно являются методами, определенными в магазине. Мутации - единственный способ изменить состояние в магазине Vuex, который позволяет легко отслеживать состояние при отладке.

В пустое мутации объект, давайте определим магазины Метод, который мы ссылаемся на предыдущем шаге и сделаем его переопределить свойство POST в состоянии государства с любыми данными, которые принимает мутация в качестве полезной нагрузки.

 StorePosts (штат, ответ) {
   State.posts = Ответ} 

09. Запустите действие GetPosts на нагрузке

Мы создали методы действий и мутаций, которые захватывают сообщения от API WordPress и зафиксируют их в штате Vuex, но теперь нам нужно, чтобы на самом деле имели этот процесс где-то. На верхнем уровне Vue.js компонент App.vue.vue. добавьте фрагмент ниже.

созданный() Крюк жизненного цикла, который вызывает код, как только Vue компонент создается на нагрузке, в то время как использование глобального $ Store. Переменная позволяет нам получить доступ к содержимому нашего магазина Vuex и отправлять GetPosts. Действие с шага 7.

 Создано () {
   Это $ Store.dispatch ('getPosts')} 

10. Обновить пути атрибута

Если вы работаете в Chrome или Firefox и имеют Vue.js devtools расширение (Если нет, я рекомендую вам делать как это очень полезно), теперь вы теперь сможете увидеть загруженные сообщения WordPress в Базовое состояние под Вариант вкладка

Вернуться к приложению, в /components/posts/posts.vue. , шаблон HTML должен указывать на эти данные, поэтому давайте настроим несколько путей атрибута.

 Переключите «Post.title» на «post.title.rended»
 Переключите «Post.Preview» на «post.acf.preview»
 Переключите «Post.PreviewImage» на «post.acf.header_image_small» 

11. Обновите V-для цикла

В компоненте столкнулись, используются директива Vue.js в использовании вновь Отказ Эти петли через все сообщения и для каждого печатают экземпляр Post Component, отображая их в списке.

Нам нужно обновить путь, переданный настоящей Директиве, так как он все еще использует локальные данные для тестирования. Обновите V-для Директивы на фрагмент ниже, чтобы указать на наши хранимые сообщения в магазине Vuex.

 V-for = "Post в этом. $ Store.state.posts" 

12. Уборка

Список сообщений WordPress теперь должен отображаться. Как мы больше не используем данные локальных данных, давайте удалите SRC / Data. Отказ Тогда в компоненте постов удалите Сообщений: postdata.data.data. Свойство в компонентах локальный хранилище данных, а затем импорт Postdata.

13. Исправить почту автор

Вы можете заметить, что для каждого поста автор отображается как число. Это связано с тем, что API WordPress возвращает идентификатор автора, а не имя. Нам нужно использовать этот идентификатор, чтобы запросить WordPress для получения полноценного автора. Давайте начнем с создания места для хранения этого в нашем магазине Vuex, рядом с нашей информацией о сообщении, в магазин / index.js. Отказ

 Состояние: {
  Авторы: NULL,
  Сообщений: NULL} 

14. Создайте действие GetAuthors

Как и в случае постов, мы создадим действие в /store/index.js. Чтобы вызвать запрос AJAX, чтобы запросить API WordPress. После получения успешного ответа обещание будет разрешено и вызвать хранилище Мутация, которую мы создадим дальше.

 GetAuthors: Функция (контекст) {
  axios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / пользователи)
  .then (функция (ответ) {
  context.commit («Storeauthors»,
  Ответ.дата)
  })
} 

15. Создать мутацию Storeauthors

В объекте мутаций магазина Vuex, создайте хранилище Мутация использует фрагмент ниже. Вроде магазины С этапа 8 это требует полезной нагрузки и устанавливает ее как стоимость недвижимости авторов в штате нашего магазина.

 Storeauthors (штат, ответ) {
  State.authors = Ответ} 

16. Запустить Getauthors на нагрузке

Нам нужно получить информацию о авторе из WordPress, как только приложение начинает загружать. Давайте внесем изменение компонента верхнего уровня App.vue.vue. снова и отправьте GetAuthors. действие в том же созданный() Крюк жизненного цикла как GetPosts. действие.

 Создано () {
  Это. $ store.dispatch ('GetAuthors')
   Это $ Store.dispatch ('getPosts')} 

17. Создать метод getUsername

Теперь мы запрашиваем WordPress для информации о авторе на нагрузке, все, что нам нужно сделать, это определить метод в наших постах компонента, который позволяет передавать идентификатор автора и получить имя взамен. Скопируйте фрагмент ниже в объект методов компонентов постов, ниже существующих Getsinglepost метод.

 GetUsername: Функция (userid) {
  var username = 'неизвестно';
  это $ Store.state.
  Авторы. Фильтер (функция (пользователь) {
  Если (user.id === usid) {
  username = user.name.
  }
  });
  вернуть имя пользователя;
} 

18. Вызов метода GetUsername

Теперь нам просто нужно позвонить GetUsername. Отказ Все еще в компонентах поста, в шаблоне, замените ссылку атрибута автора на Post.author. Так что это отражает фрагмент ниже. Имя автора теперь должно быть правильно отображать для каждого поста.

: Автор = "GetUsername (post.author)" 

19. Загрузка блога

Поскольку мы загружаем данные после асинхронно, есть момент до завершения запроса, где приложение пустое. Чтобы противостоять этому, мы реализуем состояние загрузки, которое активно, пока блог не будет полностью заполнен. В компоненте постов вставьте фрагмент ниже после открытия & lt; скрипт & gt; Тег, чтобы импортировать значки, которые мы будем использовать.

 Импорт значок из «@ / компоненты / значки / значки»
Импорт нагрузки от «./../../
Активы / IMG / Loading.svg '

20. Добавить значок в список компонентов

Далее, все еще в пределах сообщений, добавьте ссылку на значок в объектах компонентов. Это делает компонент посты о нашем недавно импортированном компонента значка.

 Компоненты: {
   значок,
   пост} 

21. Создание загрузки элементов

Теперь нам просто нужно добавить загрузку элементов на шаблон постов, чтобы он появился на странице. Во-первых, оберните второе девлаж в фрагмент вокруг двух диклов с V-iF. Директивы, чтобы убедиться, что нет постов, пока загрузка не будет завершена.

Затем добавьте первый Div из фрагмента над ним. Это содержит значок загрузки и V-iF. Директива, что означает, что она будет видна только до такой степени, что приложение полностью загружено. После этого загрузка теперь должна быть реализована.

 & lt; div v-if = "! Это. $ Store.state.posts"
Class = "U-Align-Center" & gt;
   & lt; icon class = "C-icon-loading"
   использовать = «загрузка» и GT; & lt; / icon & gt;
& lt; / div & gt;
& lt; div v-if = "Это $ Store.state.posts" & gt;
   [...]
& lt; / div & gt; 

22. Обновить пути односторонних атрибутов

Единственное, что осталось сделать, это убедиться, что отдельные сообщения правильно настроены, поэтому они используют данные WordPress Post в магазине Vuex. Первый шаг - обновить пути атрибута в шаблоне компонентов постов в пределах v-if = "this.type === 'Single'" Div, который обрабатывает отображение отдельных постов.

 Переключите «OnlyPost.title» на «OnlyPost.title.rended»
 Переключите «OnePost.author» в GetUsername (OnePost.author) '
 Переключите «OnlyPost.fulllimage» на «OnlyPost.acf.header_image»
 Переключите «однопост». Content.rended '

23. Рефтектор Metsinglepost Метод

Нам также нужно реформировать компоненты постов Getsinglepost метод. Это должно вернуть обещание, которое отправляет GetPosts. действие. В последующем тогда Функция, мы будем искать посты хранилища Vuex для ввода с помощью спускового сочетания, который проходил в URL. Если найдено, мы скопируем данные в местное государство нашего компонента и разрешаем обещание. Если это не найдено, обещание будет отклонено.

 Getsinglepost: Функция () {
   вернуть новое обещание
   ((разрешение, отклонение) = & gt; {
  Это. $ store.dispatch ('getPosts')
  ((() = & gt; {
  var foundpost = false;
  Это $ Store.state.posts.
  Фильтр ((пост) = & gt; {
  Если (post.slug ===
  Это $ Route.paramssslug) {
  this.singlepost = post;
  foundpost = true; }
  });
  Основана? разрешать (): отклонить ();
  })
  })
} 

24. Рефтектор Созданные () Крюк

Далее нам нужно реформировать созданный() Крюк с жизненным циклом в компоненте столба. Если мы нуждаются в отображении одного поста, крючок должен вызвать Getsinglepost Способ с предыдущего шага, и если его обещание отклоняется, отправьте пользователя на страницу 404 'не найден. Это состоит в том, чтобы принять участие в сценариях, где пользователи вводят несуществующую пост Slug в URL.

 Создано () {
  Если (that.type === 'Single') {
  this.getsinglepost (). Затем (null, () = & gt; {
  Это $ Router.push ({name: 'pageNotfound'})
  });
  }
} 

25. Добавить V-IF Директива

Последний шаг - добавить фрагмент ниже в компонент пост в пределах v-if = "this.type === 'Single'" Div в шаблоне. Эта директива означает, что пост будет отображаться только в том случае, если локальные данные Post, доступные Getsinglepost Метод заполнен. Это должно остановить Vue от преждевременного рендеринга компонента и, таким образом, вызывающих ошибки.

 v-if = "однопост" 

26. Создайте приложение

Теперь со всем работает, в консоли, отмените NPM запустить dev Команда или откройте новую консоль и запустите команду ниже, чтобы создать версию для получения продукции, чтобы загрузить на свой собственный сервер. Это появится в распад каталог.

 NPM Run Build 

Эта статья появилась в выпуске 268 веб-дизайнера, The Creative Web Design Magazine - предлагая экспертные учебные пособия, передовые тенденции и бесплатные ресурсы. Подписаться на веб-дизайнер сейчас.

Прочитайте больше:

• 32 лучшие бесплатные темы WordPress
• 10 лучших ресурсов WordPress
• То Лучшие бесплатные платформы для блога