WordPress с Vuejs, как ссылки на страницы сайта

Question

Я пытаюсь обновить сайт с помощью фреймворка vuejs, и в настоящее время я использую этот шаблон для дальнейшего развития. Я чрезвычайно новичок в vuejs, как 3 дня, и я пытаюсь выяснить, как создавать ссылки на конкретные страницы на моем WordPress сайте. Я успешно смог создать ссылки на различные компоненты, которые работают, однако я понятия не имею, как создать компонент для конкретной страницы (например, шаблона) и отобразить эту страницу в WordPress.

Мой маршрутизатор для моих текущих компонентов выглядит следующим образом -

import _ from "lodash";

import Vue from "vue";

import Router from "vue-router";



// Components

import Home from "../components/Home.vue";

import Post from "../components/Post/Post.vue";

import Page from "../components/Page/Page.vue";


import StatSearch from "../components/StatSearch.vue";
import CurrentShop from "../components/CurrentShop.vue";

import GameNews from "../components/GameNews.vue";

import UpcomingItems from "../components/UpcomingItems.vue";
import Challenges from "../components/Challenges.vue";




Vue.use(Router);


const router = new Router({

routes: [


{


path: "/",

name: "Home",

component: Home
},

{

path: "/CurrentShop",

name: "CurrentShop",

component: CurrentShop
},

{

path: "/Challenges",

name: "Challenges",

component: Challenges
},

{

path: "/UpcomingItems",

name: "UpcomingItems",

component: UpcomingItems
},

{

path: "/GameNews",

name: "GameNews",

component: GameNews
},

{


// Assuming you're using the default permalink structure for posts

path: "/:year/:month/:day/:postSlug",

name: "Post",

component: Post

},


{

path: 
"/:pageSlug",

name: "Page",

component: Page

}
,
],

mode: "history",

base: "",



// Prevents window from scrolling back to top

// when navigating between components/views

scrollBehavior(to, from, savedPosition) {

if (savedPosition) {

return savedPosition;

} else {

return { x: 0, y: 0 };

}

}
});



router.afterEach((to, from) => {

// Add a body class specific to the route we're viewing

let body = document.querySelector("body");

let bodyClasses = body.className.split(" ");


if (bodyClasses.length > 0) {

const newBodyClasses = bodyClasses.filter(theClass =>

theClass.startsWith("vue--page--")

);

}


const slug = _.isEmpty(to.params.postSlug)

? to.params.pageSlug

: to.params.postSlug;

body.classList.add("vue--page--" + slug);
});

export default router;

И мой заголовок для этих ссылок, как обычно, -

<li><router-link class="nav-link" to="/CurrentShop">Current Shop</router-link></li>

Как мне вызватьстраница, которая первоначально использовала пользовательский шаблон php?

Answer 1

WordPress предоставляет интерфейс API REST, который можно использовать для получения сообщений и другого контента с веб-сайта WordPress в формате JSON. Затем вы можете манипулировать этим JSON так, как вам хочется.

Доступ к остальному API можно получить по адресу,

https://example.url/wp-json             -> Gives all available namespaces for the API.
https://example.url/wp-json/wp/v2/      -> The built-in WordPress API Namespace. Contains all built-in routes for posts, pages, users, etc.

Доступ к записям и страницам можно получить по адресу

https://example.url/wp-json/wp/v2/posts  -> Access all Publicly published posts
https://example.url/wp-json/wp/v2/pages  -> Access all Publicly published pages

You can find more routes over at the REST API Handbook  -> Link given below.

Вы можете использовать следующий URL-адрес GET, чтобы получить сообщение с определенным слагом

https://example.url/wp-json/wp/v2/posts?slug=post-slug  -> This will return a post with the given slug
https://example.url/wp-json/wp/v2/posts?author=1        -> This will return all posts published by an author with the Author Id of 1

Подробнее о WordPress Rest API можно прочитать в REST API Handbook предоставляется разработчиками WordPress.