Потужність блог за допомогою WordPress API

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

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

• Завантажте файли підручників

У цьому Підручник WordPress Ми будемо вивчати, як реалізувати WordPress Rest API у простому додатку блогу, який наразі використовує локальний файл JSON як джерело даних, і будується як односторонній додаток (SPA), використовуючи популярну рамку JavaScript Vue.js . Це передбачає реалізацію Vuex, який ми будемо використовувати для зберігання даних, які ми пропонуємо з WordPress, використовуючи комбінацію своїх методів дії та мутації.

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

Для більш дивним API для вивчення, подивіться на наші напрямні до кращого Javascript apis , HTML API і Google APIS .

01. Налаштуйте робочу область та залежності

Перше, перше, ви повинні Завантажте файли проекту і відкрийте їх у бажаному редакторі.

У консолі, CD веб-шаблон і запустіть команду нижче, щоб встановити залежності вузла проекту (якщо у вас немає встановленого вузла, робити це перше ). Ми будемо працювати чисто в ст каталог звідси.

npm install

02. Встановіть Vuex

Далі, використовуючи команду нижче, ми встановимо Вузе , що є шаблоном державного управління та бібліотека для застосувань Vue.JS. Це буде діяти як центральний інформаційний магазин для всіх Vue компонентів, які залежать від даних, які ми отримуємо від WordPress API. Для розробників, знайомих з реагуванням, Vuex сильно натхненний потік.

npm install vuex --save

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

У консолі запустіть команду нижче, щоб запустити сервер розробки. Це складе проект Vue.js, оскільки він знаходиться в даний час, і призначає його до URL-адреси, щоб ви могли отримати доступ до нього. Це, як правило, Localhost: 8080 .

Одна велика перевага Це приносить перезавантаження Live, тому після внесення змін до програми та збереження сторінки у вашому браузері оновить себе без необхідності вручну перезавантажити.

npm run dev

04. Створити магазин Vuex

В ст , створіть каталог під назвою зберігати І в межах нього називається новий файл index.js . Це буде там, де буде визначено наш магазин Vuex. Хоча, перш ніж дістатися до цього, нам потрібно спочатку переконатися, що додаток VUE.JS усвідомлює своє існування. Щоб зробити це, відкрити main.js І імпортувати магазин і включіть його як залежність, як у фрагменті нижче.

 Імпорт Вуд від "Ву"
Імпортувати додаток від "./App"
Імпортувати маршрутизатор від "./router"
Імпортувати магазин з "./store"
Vue.config.productiontip = false
/ * eslint-disable no-new * /
New Vue ({
  EL: '#App',
  маршрутизатор,
  магазин,
  Шаблон: "& lt; app / & gt;",
  Компоненти: {додаток}
}) 

05. Створіть магазин лісів та установки Axios

Щоб допомогти нам спростити запити AJAX, наш магазин буде складатися у WordPress API, ми встановимо Axios, що є побічним HTTP-клієнтом. Для цього відкрийте окрему консольне вікно, перейдіть до веб-шаблон каталог і запуск NPM Install Axios - Зберегти .

Далі, давайте почнемо зберігати магазин, встановивши новий пустий об'єкт магазину Vuex. На даний момент це нічого не робить, але, принаймні, Vue слід усвідомлювати.

 Імпортні аксі з "Axios"
Імпорт Вуд від "Vue"
Імпорт Vuex від "Vuex"
Vue.use (vuex)
const store = new vuex.store ({
  Стан: {},
  Дії: {},
  Мутації: {}
})
Експортувати магазин за замовчуванням 

06. Створіть стан повідомлень

У Vuex державний об'єкт містить інформацію про додаток, яка в цьому випадку буде дані WordPress Post, ми захопить використання API. У цьому об'єкті створіть нову властивість, що називається повідомлення та призначити його значення null.

 Стан: {
  Повідомлення: Null
} 

07. Створіть дію getposts

У Vuex дії є основним способом, в якому обробляються асинхронні запити. Це, як правило, методи, визначені в магазині, які потім можна відправляти, як того вимагає додаток.

У порожній акції Об'єкт, давайте визначимо один, де, якщо наші посади стану досі є нульовими, Axios використовується для виконання запиту AJAX до WordPress API та повернути список повідомлень. Одного разу ми отримали позитивну відповідь, ми будемо вирішувати обіцянку та здійснювати посади за допомогою магазини Мутація.

 GetSposts: Функція (контекст) {
  Поверніть нову обіцянку ((рішучість, відхилення) = & gt; {
  if (контекст .state.posts) {
  вирішити ()
  }
  інше {
  acios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / POSTS ')
  .then ((відповідь) = & gt; {
  context.com titt ('storeposts',
  response.data)
  вирішити ()
  }). Catch ((помилка) = & gt; {
  відхилити (помилка);
  });
  }
  })
} 

08. Створіть мутацію магазину

Інша концепція, введена Vuex, - це мутації, які також як правило, визначені в магазині. Мутації є єдиним способом змінити стан у магазині Vuex, який дозволяє державі легко відстежувати при налагодженні.

У порожній мутації Об'єкт, давайте визначимо магазини Метод, який ми посилалися на попередньому кроці, і змушуємо його перевизначити майно пост у державному об'єкті з будь-якими даними, що мутація отримує як корисне навантаження.

 магазини (держава, відповідь) {
   state.posts = відповідь} 

09. Тригер GetSposts Дія на навантаження

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

Створено () це гачок життєвого циклу, який запускає код, як тільки компонент Vue створюється на навантаженні, тоді як використання глобального $ магазин змінна дозволяє нам отримати доступ до вмісту нашого магазину VUEX та відправити getsposts дії з кроку 7.

 Створено () {
   Це. $ Store.dispatch ('gettposts')} 

10. Оновлення атрибутів доріжок

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

Повернутися до програми, в /components/posts/posts.vue , шаблон HTML повинен вказати на ці дані, тому давайте настроємо кілька шляхів атрибутів.

 Перемикайте "post.title" до "post.title.rendered"
 Перемикач "post.preview" до "post.acf.preview"
 Перемикач "post.previewimage" до "post.acf.header_image_small" 

11. Оновлення V-для петлі

У складі повідомлень є директива Vue.JS у використанні у . Це петля через всі повідомлення та для кожного друкує екземпляр після складового компонента, що відображає їх у списку.

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

 V-for = "повідомлення в цьому. $ Store.state.posts" 

12. Робіть деяке домашнє господарство

Список повідомлень WordPress тепер повинен відображатися. Як ми більше не використовуємо локальні дані, давайте видалити SRC / дані . Потім у складі постів, видаліть Повідомлення: postdata.data Власність у компонентів локального магазину даних, а потім імпорт PostData.

13. Виправити пост-автор

Ви можете помітити, що для кожного повідомлення автор показує як номер. Це тому, що API WordPress повертає ідентифікатор автора, а не ім'я. Нам потрібно використовувати цей ідентифікатор для запиту WordPress для повної інформації автора. Почнемо, створивши місце для зберігання цього в нашому магазині Vuex разом з нашою інформацією про посаду, в магазин / index.js .

 Стан: {
  Автори: NULL,
  Повідомлення: NULL} 

14. Створіть дію GetAutors

Як і з посадами, ми створимо дію /store/index.js Щоб запустити запит AJAX на запит WordPress API. Після отримання успішної відповіді, обіцянка буде вирішувати та викликати магазини Мутація, яку ми створимо далі.

 GetAutors: Функція (контекст) {
  acios.get ('http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / Користувачі ')
  .then (функція (відповідь) {
  Context.8mit ("StoreAutors",
  response.data)
  })
} 

15. Створити мутацію магазину

В межах об'єкта мутації магазину VUEX створіть магазини Мутація за допомогою фрагмента нижче. Як з магазини З кроку 8 це вимагає корисного навантаження, який його пройшов і встановлює його як цінність власності авторів у державі нашого магазину.

 StoreAutors (стан, відповідь) {
  State.Authors = Відповідь} 

16. Тригер getauthors на вантаж

Нам потрібно отримати інформацію автора з WordPress, як тільки програма починає завантажувати. Давайте змінимо компонент верхнього рівня App.vue знову і відправка геть дія в тому ж Створено () Гачок життєвого циклу як getsposts дії.

 Створено () {
  Це. $ Store.dispatch ('getauthors')
   Це. $ Store.dispatch ('gettposts')} 

17. Створіть метод GetUSername

Тепер ми запитуємо WordPress для авторської інформації про навантаження, все, що нам потрібно зробити, це визначити метод у наших пости-компонентів, який дозволяє нам пройти авторський ідентифікатор і отримати ім'я в return. Скопіюйте фрагмент нижче в об'єкті компонентів постів, нижче існуючих gingsinglepost метод.

 Getusername: Функція (UserID) {
  var username = "невідомий";
  Це. $ Store.State.
  Автори.Фільтер (функція (користувач) {
  if (user.id === userid) {
  username = user.name
  }
  });
  повернути ім'я користувача;
} 

18. Виклик Метод GetUSername

Тепер нам просто потрібно зателефонувати гнуч . Ще у складі повідомлень, у шаблоні, замініть посилання на атрибут автора на post.author Таким чином, він відображає фрагмент нижче. Назва автора повинна бути правильно відображення для кожного повідомлення.

: Автор = "Getusername (Post.Author)" 

19. Завантаження блогу

Оскільки ми завантажуємо дані асинхронно, є момент до завершення запиту, де програма порожня. Щоб протистояти цьому, ми будемо реалізовувати стан завантаження, який активний, поки блог не буде повністю заповнений. У складі повідомлень вставте фрагмент нижче після відкриття & lt; сценарій & gt; Тег для імпорту значків ми будемо використовувати.

 Іконка імпорту з "@ / Components / Icons / Icon"
Імпортування завантаження від "./../..//
Активи / img / loading.svg '

20. Додайте значок до списку компонентів

Далі, ще в межах посад, додайте посилання на значок у об'єктах компонентів. Це робить компонент повідомлень, знаючи про нашу нещодавно імпортовану іконку.

 Компоненти: {
   значок,
   post} 

21. Створюйте завантаження елементів

Тепер ми просто повинні додавати завантажувальні елементи до шаблону постів, щоб він з'явиться на сторінці. По-перше, оберніть другий Div у фрагмент навколо двох dives з вітчизняний Директиви, щоб переконатися, що немає повідомлень, поки не буде завершено завантаження.

Потім додайте перший div від фрагмента над ним. Це містить значок завантаження та a вітчизняний Директива, яка означає, що вона буде видно тільки до точки, де додаток повністю завантажений. Після того, як це було зроблено, тепер завантаження має бути реалізована.

 & lt; div v-if = "! Це. $ Store.State.Posts"
Class = "U-Align-центр" & 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 ===" Один "" DIV, який обробляє відображення окремих посад.

 Перемикач "SinglePost.title" до "singlepost.title.rendered"
 Перемикач "singlepost.author" до "getusername (singlepost.author) '
 Перемикач "singlepost.fullimage" до "singlepost.acf.header_image"
 Перемикач "singlepost.content" до "singlepost. content.rendered '

23. Метод Refactor GetsingLepost

Ми також повинні рефактурувати компоненти постів gingsinglepost метод. Вона повинна повернути обіцянку, що відправляють getsposts дії. Наступний потім Функція, ми будемо шукати повідомлення Vuex Store для запису з Slug, що відповідає, пройшовши в URL-адресі. Якщо знайдено, ми скопіюємо дані до місцевої держави нашого компоненту та вирішити обіцянку. Якщо це не знайдено, обіцянка буде відхилена.

 GetsinglePost: Функція () {
   Поверніть нову обіцянку
   ((рішучість, відхилення) = & gt; {
  Це. $ Store.dispatch ('getposts')
  .then ((() = & gt; {
  var boundspost = false;
  Це. $ Store.State.Posts.
  фільтр ((post) = & gt; {
  if (post.slug ===
  Це. $ round.params.slug) {
  this.SinglePost = Post;
  findpost = true; }
  });
  findpost? вирішити (): відхилити ();
  })
  })
} 

24. Довідкові повідомлення, створені () Гачок

Далі ми повинні рефактора Створено () Гачок життєвого циклу в компоненті постів. Якщо нам потрібно відобразити один пост, гачок повинен викликати gingsinglepost Метод з попереднього кроку, і якщо його обіцянка відхилено, надішліть користувачеві до сторінки 404 ', не знайдено ». Це має облік сценаріїв, де користувачі вводять неіснуючу пост-шлак у URL-адресі.

 Створено () {
  if (this.type === 'single') {
  це.getsinglepost (). Потім (null, () = & gt; {null, () = & gt; {
  Це. $ router.push ({name: 'pagenotfound'})
  });
  }
} 

25. Додайте V-IF Директиву

Останній крок полягає в тому, щоб додати фрагмент нижче до поштового компонента в межах V-IF = "this.type ===" Один "" div у шаблоні. Ця Директива означає, що пост буде відображатися лише тоді, коли дані місцевого повідомлення доступні gingsinglepost Метод заповнюється. Це, щоб зупинити Vue від передчасно надання компоненту і, таким чином, спричиняє помилки.

 V-IF = "SinglePost" 

26. Побудуйте додаток

Тепер з усім робочим, в консолі, скасуйте npm run dev Команда або відкрийте нову консоль та запустіть команду нижче, щоб створити виробничу версію, щоб завантажити на свій власний сервер. Це з'явиться в відбуватися каталог.

 NPM Run Build 

Ця стаття з'явилася у випуску 268 веб-дизайнера, журналу Creative Web-дизайну - пропонуючи експертні підручники, найсучасніші тенденції та безкоштовні ресурси. Підпишіться на веб-дизайнера зараз.

Читати далі:

• 32 найкращі безкоштовні теми WordPress
• 10 найпопулярніших ресурсів WordPress
• Точний Найкращі безкоштовні платформи для блогів