Создание сайта на WordPress с помощью Vue

WordPress стал основной системой управления контентом для разработчиков и пользователей, желающих быстро создать потрясающий сайт. При использовании WordPress без фронт-энда, компании получают более качественный контроль над бэк-эндом CMS. Они также могут использовать любой фронт-энд по своему выбору и дизайну, например, Angular, React или Vue. Цель этой статьи — подробно рассказать о WordPress без использования фронт-энд системы. В последнем разделе мы рассмотрим настройку среды WordPress и использование Vue.js для создания фронт-энда.

Angular — это открытый фреймворк разработки веб-приложений, который создан и поддерживается командой разработчиков Google. Он позволяет разрабатывать динамические одностраничные приложения (SPA) и веб-приложения с богатым пользовательским интерфейсом. Angular предоставляет инструменты и структуру для разработки клиентских приложений, использующих языки HTML, CSS и TypeScript.

Что такое WordPress

Знание того, что WordPress считается «единой» CMS, предполагает, что вы уже некоторое время работаете с ним, иначе вам не понять, о том, что будет написано дальше в этой статье. WordPress надежная платформа, в которой вы можете создавать и изменять контент, не забывая при этом о внешнем интерфейсе. WordPress использует темы и плагины для интегрирования функций вывода, соединяя фронтальную и бэк стороны приложения.

WordPress — это фантастическая система управления контентом. Использование REST API, разработанного для WordPress, позволит вам увеличить контроль над файлами за пределами вашей темы.

Очевидно, чем Headless WordPress отличается от обычной версии платформы, которая является более активной и работает преимущественно на браузерные сайты. При использовании Headless WordPress можно по-прежнему пользоваться внутренними функциями платформы. Однако они переходят в режим проактивной системы, то есть контент будет изменяться автоматически в зависимости от возможностей браузера, в котором просматривается сайт.

Что такое VueJs

Vue.js — это прогрессивный фреймворк JavaScript для создания пользовательских интерфейсов. Он часто используется для разработки одностраничных веб-приложений (SPA) и интерактивных веб-сайтов. В отличие от Angular и React, Vue.js является более легким и имеет более простой функционал чтобы изучить его, что делает его привлекательным для начинающих и опытных разработчиков. В сочетании с современными инструментами и вспомогательными библиотеками, такими как WordPress, Vue прекрасно справляется с созданием сложных одностраничных приложений.

Зачем использовать CMS без фронта

Вместо того, чтобы создавать одновременно несколько экземпляров системы управления контентом, например, для поддержки веб- и мобильных версий, один экземпляр CMS без фронта может работать с неограниченным количеством трафика.
В CMS без фронта код и контент разделены, что позволяет разработчикам не обращать внимания на код и полностью сосредоточиться на контенте, находящемся под их управлением. Разработчики могут использовать все новейшие инструменты и фреймворки для разработки контента на любой современной платформе, а не ограничиваться проприетарным языком или другими особенностями конкретной системы управления контентом.

Интеграция сайта WordPress с VueJs

Настройка сайта WordPress — это первое, что необходимо сделать, поскольку он будет основным источником данных для всех используемых нами фронтенд-технологий. Программисты могут взаимодействовать с интерфейсами различных технологий с помощью Rest API, если обе стороны умеют работать с JSON. Данные, генерируемые Rest API, имеют формат JSON. По умолчанию Rest API будет включен. Однако при желании можно ограничить доступ к Rest API. Для данного проекта мы не будем ничего изменять.

Необходимые требования

• Установленный/работающий активный WordPress
• знание основ VueJs

В дашборде WordPress перейдите в раздел Настройки, выберите раздел Постоянные ссылки и отметьте либо Название записи или Произвольно.

Теперь, когда мы используем вызов API, необходимо загрузить расширение Postman Chrome или скачать программу Postman для отладки запросов . После этого откройте расширение Postman и введите URL, используя приведенные ниже рекомендации.

https://example.com/wp-json/wp/v2/posts

Если же вы работаете на локальной машине localhost, то введите приведенный ниже URL в программу для Windows Postman не в расширение Chrome.

http://localhost/wordpress/wp-json/wp/v2/posts

В результате мы получили данные из REST API в формате JSON. Вот структура, которую вы должны увидеть после GET-запроса:

{
      "id": 5,
      "date": "2022-10-01T12:57:47",
      "date_gmt": "2022-10-01T12:57:47",
      "guid": {
          "rendered": "http://localhost/wordpress/?p=5"
      },
      "modified": "2022-10-01T15:19:58",
      "modified_gmt": "2022-10-01T15:19:58",
      "slug": "ejiro-thankgod",
      "status": "publish",
      "type": "post",
      "link": "http://localhost/wordpress/ejiro-thankgod/",
      "title": {
          "rendered": "Ejiro ThankGod"
      },
      "content": {
          "rendered": "\nHello! just trying things out alright\n",
          "protected": false
      },
      "excerpt": {
          "rendered": "</p>
<p>Hello! just trying things out alright</p>
<p>\n",
          "protected": false
      },
      "author": 1,
      "featured_media": 0,
      "comment_status": "open",
      "ping_status": "open",
      "sticky": false,
      "template":"  ",
      "format": "standard",
      "meta": [],
      "categories": [
          1
      ],
}

Как вы могли заметить, уже есть данные, которые можно настраивать для фронта на VueJs, а также id, slug, date и title.

Настройка VueJs для фронта

Все управление контентом проекта будет осуществляться с помощью WordPress, а VueJs — с помощью фронтального интерфейса.

Что нужно:

• NodeJS и NPM
• Vue CLI
• Текстовый редактор или программа работающая с кодом VSC, phpStorm и другие

Выполните следующую команду в терминале и, следуя подсказкам, создайте приложение VueJs после настройки среды с помощью командной строки Vue.

vue create <app name>

После создания проекта выполните следующую команду для просмотра вывода проекта vue js app по адресу http://localhost:8080.

npm run serve

Эта команда часто используется в проектах, созданных с помощью инструмента Vue CLI (Vue Command Line Interface). Она запускает встроенный сервер разработки, который предоставляет локальное окружение для разработки Vue.js-приложения. Когда вы используете команду npm run serve, приложение обычно будет доступно по локальному адресу, например, http://localhost:8080.

Этот сервер обычно также предоставляет функции, такие как авто-перезагрузка (live-reload), срочная перезагрузка (hot-reload) и вывод сообщений об ошибках в консоль разработчика.

Далее откройте исходный код проекта в удобном для вас редакторе кода; именно с этого момента мы начнем писать код.

Теперь ваш файл App.vue должен содержать следующий код:

<template>
  </p>
<div><p>
    </p>
<ul v-for=" post in posts" v-bind:key=" post.id">
      </p>
<li>
<br />
<h2>{{ post.title.rendered }}</h2>
<p>
      </li>
<p>
      </p>
<p>{{ post.content.rendered }}</p>
<p>
    </ul>
<p>
  </div>
<p>
</template>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Aexport%20default%20%7B%0A%20%20data()%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20posts%3A%20%5B%5D%2C%0A%20%20%20%20%7D%3B%0A%20%20%7D%2C%0A%20%20methods%3A%20%7B%0A%20%20%20%20async%20getData()%20%7B%0A%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20let%20response%20%3D%20await%20fetch(%0A%20%20%20%20%20%20%20%20%20%20%22http%3A%2F%2Flocalhost%2Fwordpress%2Fwp-json%2Fwp%2Fv2%2Fposts%22%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20this.posts%20%3D%20await%20response.json()%3B%0A%20%20%20%20%20%20%7D%20catch%20(error)%20%7B%0A%20%20%20%20%20%20%20%20console.log(error)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%20%20created()%20%7B%0A%20%20%20%20this.getData()%3B%0A%20%20%7D%2C%0A%7D%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

Теперь мы можем увидеть опубликованный нами пост с сайта WordPress, если проверим наш VueJs-фронт. По сути, все, что нам нужно сделать, — это усовершенствовать наш фронтенд сайта и увеличить количество вызовов API.

Заключение

Мы создали просто приложение. Все преимущества платформы для редактирования материалов, подобно WordPress, плюс преимущества VueJs с точки зрения производительности и безопасности. Вы можете создать собственное приложение с помощью современного JavaScript-фреймворка и развивающейся экосистемы, когда генерация контента отделена от стека разработки. Благодаря back-end функционалу WordPress и front-end функционалу Vue вы получите доступ ко всем возможностям, необходимым для развития вашего сайта.