Преглед на Wordpress и Vue.Js: Router Edition

Headless WordPress или Head-ish WordPress?

Опитах се да обясня кода на WordPress тема на човек, който не е маниак (да, приятелката). Аналогии, които опитах: Смесено смути, супа минестроне и зомби. Зомбитата спечелиха. Ето го:

Wordpress има 2 части: живот и смърт, смесени заедно. Това е зомби, малко бавно и не много умно, не много чисто. Хаос, наистина.

Напоследък всички готини деца разделят живота и смъртта, както трябва да бъде. Край на зомбитата: Само живите (React/Angular/Vue) и мъртвите (данни на Wordpress REST API).

Headless WordPress е много работа. Мятате се в навигацията на сайта? По-добре проверете отново маршрута. Добавихте ли плъгин? Може да се наложи да пренапишеш всичко. По принцип трябва да пресъздадете „списъка с шаблонни етикети“ с API еквиваленти. По-голямата част от времето ви ще бъде изразходвано за разработване в Javascript на това, което WordPress вече прави извън кутията.

Ще бягам с „хибридния“ подход на Pantheon. Все още използвам WordPress за изграждане на всеки URI, както обикновено. Това разбира се е ненужно извън роботите обхождащи. Моята цел е да има разумно припокриване, при което всеки URI във Vue също може да се обработва от WordPress. Считайте го за параноичен подход, като WordPress е всеобхватен.

В крайна сметка Vue може би ще засенчи темата на WordPress, завършвайки пълния SPA подход. Засега имам нужда от сигурността на предоставянето на функционалност на широкомащабни добавки като WooCommerce и Event Ticketing.

#RouterGoals

Wordpress има собствено „вътрешно маршрутизиране“. Ако сте били повече от колене в Wordpress, това лесно се пропуска, така че ето няколко напомняния:

Файлът .htaccess: Има само файл index.php. Всичко останало е виртуално.
Структура на постоянната връзка: Използване на get_the_permalink($post-›ID) вместо ръчно въвеждане на връзка.

API за пренаписване на Wordpress основно покрива всичко в йерархията на шаблона:

Типове публикации: публикации, страници, прикачени файлове и др

Архиви: Автор, Дата, Таксономия-термини

Еднократни: Търсене, 404, първа страница.

И така, какво покрива VueRouter?

Първоначално не много. VueRouter има таг ‹router-link›, еквивалентен на get_permalink().

Но за да използвате този маркер, ще трябва сами да добавите във всеки URI формат на пътя. Повечето теми на Vue-WordPress стават доста оскъдни, когато става въпрос за URI пътища. Внедряването на вашия рутер започва да изглежда така от Майкъл Сориано, в най-добрия случай:

Но това използва нестандартен URI префикс за публикации и страници, а други реализации използват твърде много идентификатори вместо охлузи. Тези „хубави постоянни връзки“ са много по-често срещани и SEOy:

/page-name
/parent-page/page-name
/category/category-name
/category-name/post-title
/2017/10/
/author/wiley-coyote/

„Единственият автоматизиран подход, който видях“ се свеждаше до изброяване на всички публикации и страници. Доблестни усилия на Гилбърт Пелегром за прост начален удар преди 2 години в първия рунд.

Но какво да кажем за категориите? Персонализирани таксономии? ..и какво ще стане, ако инсталирам плъгин за събития или галерии? Те ще използват повече персонализирани таксономии и типове публикации. Няма да въвеждам ръчно всеки.

Въведете: Вмъкващ се инструмент за създаване на маршрути на WordPress-Vue.

Вярвате или не, всъщност бях измислил подобен подход като г-н Пелегром, когато попаднах на кода му. Вече бях кодирал повече от половината от WordPress Rewrites, така че започвам „с неговата проста тема“ (актуализирана за Vue2) като демонстрация.

fadingdust/wp-rest-theme
wp-rest-theme — WordPress тема, поддържана от WordPress REST API и Vue.jsgithub.com

Фундаменталният подход се състои в разгръщането на това, което е известно (охлюви за категории, родителски страници и т.н.). В противен случай „Категория“ може да бъде объркана като родителска страница, а родителска страница може да бъде таксономия или термин!

Единствените наистина „ръчни“ записи са пътищата по подразбиране на WordPress за архиви за търсене, автор и дата. Вдигнах ги направо от WP Rewrites dump.

Ползи

Единствените маршрути, които трябва да модифицирате, са вашите собствени персонализирани.
Поддържа общи имена на компоненти: Страница, Блог, Начало, Архив, Публикация, Търсене, Автор, Дата на архив. Какво ще прикачите към тях зависи от вас.
Извлича имена на шаблони на страници като имена на компоненти за страницата, която го използва.

Разрешими URI

Pages:
/about/
/about/page-image-alignment/
Archive: 
/category-three/
/category/category-three/
/post_tag/
/custom-taxonomy/custom-term/
Archive by Date:
/2017/10/
Single Post:
/uncategorized/hello-world/
/custom-post-type/post-name/
Author:
/author/road-runner/
Search:
/search/markup+formatting
404:
/XYZ

Използване

Високо ниво

Имате инсталиран WordPress? Познавате ли NPM? „Давай“!

fadingdust/wp-rest-theme
wp-rest-theme — WordPress тема, поддържана от WordPress REST API и Vue.jsgithub.com

Средно ниво

Ако имате собствена WP тема с помощта на Vue, просто хвърлете във файла vue-router.php и проверете интеграциите:

PHP: functions.php

$wp_vue= new WP_Vue_Router_Context();
wp_localize_script( 'rest-theme-vue', 'wp', 
  array(  
  'root'      => esc_url_raw( rest_url() ),  
  'base_url'  => $base_url,  
  'components'=> $wp_vue->get_components(),  
  'routes'    => $wp_vue->get_routes(), 
  ) 
);

JS: rest-theme/src/main.js

var router = new VueRouter({  mode: 'history'});
for (var key in wp.routes) {    
  var route = wp.routes[key];    
  router.addRoutes([ {        
    path: wp.base_path + route.slug,        
    component: Vue.component(capitalize(route.type)),        
    props: {default: true, postId: route.id}    
  }]);
}

Заключителни мисли

Все още не съм сигурен дали току-що създадох патерица или поставих първата настилка. Така или иначе, планирам да разширя тази основна тема в нещо, което мога да използвам за клиентски сайтове с много плъгини, както и да я създам за работа с кеширане и т.н. като Бил Ставрулакис PWA сайт.

Ако имате проблеми с маршрутизирането на настоящата си WP тема с помощта на Vue, ще се радвам да чуя вашите проблеми.

Следващи стъпки

Има няколко маршрута, които все още липсват. Отказах да обработвам Post-Attachments и Comment-Paging, тъй като те често се обработват по други начини. Също така ще отложа на WordPress за обработка на RSS емисии за всяка категория.

Точно сега тегля списък с компоненти; Бих искал да му дам списък с регистрирани компоненти на Vue, вместо да премахвам настройката и да добавям отново.
Опции за кои типове обекти или категории.
Все още не съм тествал това с различни добавки.

Заявките за изтегляне вече са отворени!