Как интегрировать существующий блог на Wordpres в веб приложение на Nuxt.js?

Есть блог (1) на одном домене, есть сайт (2) на другом домене.
Клиент принял решение "совместить" всё вместе, чтобы на сайте с доменом (2) появился роут /blog/, по которому будет доступен блог WordPress. Как это сделать и какое оптимальное решение?

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

В настройках nginx location /blog проксировать не на Nuxt, а на WordPress.

А я забыл про этот вариант. Чего то в голове сам придумал задание что фронт должен быть "един", типа это один сайт.
Да, пока что вариант оптимальный.
Фронт "един" как раз не рассматривается на данном этапе, не уточнил заранее)
Александр Талалаев, да я и сам сначала начал писать ответ в духе вашего 🙂

Ответы:

У вас два варианта.
1. Использлвовать REST API от вордпресса, плюс есть различные тематические плагины отдельно и API эндпоинты у разных популярных крупных плагинов.
2. Если на одном сервере и тп, делать прямые запросы к БД в самом NUXT допустим через Prisma

Хорошие варианты, но, к сожалению - такие варианты не рассмариваются, только как несвязанные платформы.

+ Заказать

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

Есть ответ
07.04.2024

Ответить

Для интеграции существующего блога на WordPress в веб-приложение на Nuxt.js, необходимо выполнить следующие шаги:

1. Установите и настройте плагин WP REST API на вашем WordPress сайте. Этот плагин добавляет RESTful API к вашему WordPress сайту, что позволит вам получать доступ к данным блога через API.

2. Создайте API запросы для получения данных из вашего блога. Например, вы можете создать запросы для получения списка всех постов, отдельного поста, категорий, тегов и т.д.

3. В вашем веб-приложении на Nuxt.js создайте соответствующие компоненты для отображения данных блога. Например, создайте компоненты для отображения списка постов, отдельного поста, категорий, тегов и т.д.

4. Используйте Axios или другую библиотеку для выполнения HTTP запросов к API вашего WordPress сайта. Например, вы можете использовать Axios для получения данных постов через API запросы.

5. Вставьте полученные данные в соответствующие компоненты вашего веб-приложения на Nuxt.js. Например, отобразите список постов с их заголовками, датами публикации и краткими описаниями.

Пример кода для получения списка постов через API и отображения их в вашем веб-приложении на Nuxt.js:

// pages/index.vue


  <div>
    <h1>Список постов</h1>
    <ul>
      <li>
        <h2>{{ post.title.rendered }}</h2>
        <p>{{ post.date }}</p>
        <p>{{ post.excerpt.rendered }}</p>
      </li>
    </ul>
  </div>



export default {
  data() {
    return {
      posts: []
    }
  },
  async asyncData({ $axios }) {
    const response = await $axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts')
    return { posts: response.data }
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// pages/index.vue

<div>

<h1>Список постов</h1>

<ul>

<li>

<h2>{{ post.title.rendered }}</h2>

<p>{{ post.excerpt.rendered }}</p>

</li>

</ul>

</div>

export default {

data() {

return {

posts: []

}

},

async asyncData({ $axios }) {

const response = await $axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts')

return { posts: response.data }

}

Этот код получает список постов с вашего WordPress сайта через API и отображает их на странице вашего веб-приложения на Nuxt.js. Подобным образом можно создать компоненты для отображения других данных блога, таких как отдельный пост, категории, теги и т.д.

Следуя этим шагам, вы сможете успешно интегрировать существующий блог на WordPress в ваше веб-приложение на Nuxt.js.

Как интегрировать существующий блог на Wordpres в веб приложение на Nuxt.js?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как интегрировать существующий блог на Wordpres в веб приложение на Nuxt.js?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно