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

Ссылка скопирована
Nuxt.js WordPress Веб-разработка
1 ответ

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

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

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

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

Ответы:

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

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

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Ирина WP Ответ

Для интеграции существующего блога на 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 }
  }
}

// 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 } } }

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

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ