Узнайте, как создать безголовый сайт WordPress с помощью Vue.js

WordPress был популярной системой управления контентом для разработчиков и неразработчиков, позволяющей быстро создавать и создавать потрясающие веб-сайты.

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

Благодаря безголовому подходу компании получают более детальный контроль над серверной частью управления контентом. Они также могут свободно использовать любой интерфейс по своему выбору, включая React, Vue, Angular и т. д.

В этом руководстве подробно рассматривается безголовый WordPress, что это такое, когда и почему вам следует рассмотреть возможность его использования. Наконец, мы рассмотрим создание безголовой среды WordPress, создание внешнего интерфейса с помощью Vue.js и развертывание безголового WordPress с помощью Kinsta.

Что такое безголовый WordPress?

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

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

Плюсы и минусы безголового WordPress

Далее мы рассмотрим плюсы и минусы безголового WordPress, чтобы дать вам лучшее понимание концепции.

Плюсы

Во-первых, мы начнем с изучения плюсов.

Сверхбыстрая производительность

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

Детальный контроль

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

Повышенная масштабируемость

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

Повышенная безопасность

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

Легкий дизайн

У вас будет больше контроля над структурой и макетом внешнего интерфейса. Кроме того, вы можете работать с интерфейсом с большей свободой и индивидуальным дизайном; благодаря вызовам REST API вы сможете воспользоваться преимуществами современных веб-инструментов и развернуть их во внешнем интерфейсе.

Публикация многоканального контента

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

Минусы

Мы рассмотрим недостатки безголового более подробно по мере продвижения, но его основными недостатками являются:

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

Когда безголовый WordPress может быть не лучшим вариантом

Поскольку безголовый WordPress — это невероятная инновация с большими преимуществами, есть некоторые вещи, которые вы должны учитывать, когда решаете, стоит ли вам использовать его.

1. Безголовый WordPress очень дорог в обслуживании. Вы будете поддерживать два разных экземпляра одного веб-сайта от инфраструктуры до нескольких разработчиков.
2. Безголовый WordPress не поддерживает все функции WordPress. Например, отличные функции WordPress, такие как редактор WYSIWYG и предварительный просмотр в реальном времени, не будут работать при использовании отдельного интерфейса.
3. Установка безголового WordPress обходится дороже. Следовательно, всегда помните о его повышенной стоимости.

Кому следует использовать безголовый WordPress?

Ниже приведены наиболее подходящие случаи, в которых вам может потребоваться безголовый WordPress:

1. Вам следует использовать безголовый WordPress, если безопасность вашего веб-сайта является вашей главной заботой и имеет первостепенное значение для вашей компании.
2. Далее, если ваш веб-сайт не нуждается в регулярном обновлении и обновлении, это будет отличным признаком того, что вам нужно использовать безголовую настройку.
3. Затем, если вы хотите иметь индивидуальный дизайн, который тема WordPress не может легко сделать, вы хотите оживить интерфейс своего веб-сайта уникальным дизайном. Тогда безголовый WordPress — ваш следующий вариант.
4. Наконец, если вы создаете веб-сайт с коротким сроком службы или демонстрационный сайт для презентаций и учебных пособий, вы можете попробовать безголовый подход.

Кому следует избегать использования безголового WordPress

Вот несколько случаев, когда использование безголового WordPress не является хорошим вариантом:

1. Когда ваш веб-сайт опирается исключительно на определенные плагины и функции, которые лучше всего контролируют интерфейс вашего приложения и работают с ним, вам следует придерживаться WordPress, если только плагины не предлагают варианты на основе API для использования данных.
2. Предположим, вы не заинтересованы в программировании своего веб-сайта, или ваш веб-сайт требует ежедневного обслуживания, и вы не нанимаете профессионала для текущего обслуживания из-за вашего небольшого бюджета. В этом случае WordPress — подходящий вариант для вас.
3. Если вы не являетесь опытным разработчиком и хотите создавать и управлять своим веб-сайтом в одиночку, вам следует использовать WordPress.

Как сделать WordPress безголовым (создать приложение)

В этом разделе будет рассмотрено создание и развитие новостного блога с безголовым WordPress для серверной части и Vue 3 в качестве пользовательского интерфейса.

Настройка безголового WordPress с помощью Devkinsta

Мы разработаем безголовый WordPress с DevKinsta, популярной локальной средой разработки WordPress для проектирования, разработки и развертывания сайтов WordPress, не выходя из вашего локального компьютера.

DevKinsta бесплатен навсегда и предлагает вам большие преимущества и комфорт при разработке и создании WordPress с его помощью.

Вы можете загрузить и установить DevKinsta с официального сайта и следовать инструкциям в документации, чтобы начать работу.

Поскольку у нас уже установлен DevKinsta, мы откроем его и выполним описанный ниже шаг, чтобы настроить наш первый безголовый WordPress.

На панели инструментов DevKinsta создайте новый сайт WordPress, используя Nginx, MySQL и любую доступную версию WordPress. Кроме того, вы можете импортировать существующий экземпляр WordPress или создать собственный экземпляр WordPress с панели управления.

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

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

Наконец, вы можете войти в панель администратора, перейдя по ссылке http://headless-wordpress-news-blog.local/wp-admin и введя учетные данные администратора, которые вы ввели при создании нового экземпляра.

Обратите внимание, что мы настроили наш безголовый WordPress локально с URL-адресом http://headless-wordpress-news-blog.local , а внешний интерфейс размещен локально по адресу http://news-blog.local , и мы будем использовать его повсюду. учебник.

Настройка нашего безголового WordPress

Затем, после успешного входа в панель управления WordPress, вы можете приступить к установке любых плагинов и конфигурации по вашему выбору.

Мы полностью отключим тему для этого руководства и получим доступ к контенту только через конечную точку на основе WordPress REST API, установив плагин Simple Website Redirect и настроив его.

Перейдите в Плагины > Добавить новый и найдите Simple Website Redirect, установите и активируйте его:

Затем нажмите « Настройки плагина» и введите URL-адрес вашего внешнего интерфейса (например, http://news-blog.local ), нажмите « Дополнительные параметры настройки» и добавьте следующие пути — /wp-admin , /wp-login.php , а /wp-json — в раздел «Исключить пути».

Наконец, включите плагин, выбрав « Включено » в раскрывающемся списке « Статус перенаправления »:

…и это все!

Кроме того, если ваш JSON API не включен при посещении http://headless-wordpress-news-blog.local/wp-json по умолчанию, вы можете включить его, открыв свои постоянные ссылки в настройках WordPress и выбрав Имя сообщения или любой другой. другой на ваш выбор, кроме Plain :

Теперь, когда вы посещаете свой http://headless-wordpress-news-blog.local/wp-json , он должен предоставить вам данные JSON, как показано ниже:

 { "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...

Настройка Vue.js (интерфейс)

Мы будем использовать инструмент веб-разработки Vite для создания нашего приложения Vue 3 для подключения к безголовому WordPress. Вы можете узнать больше об инструментах разработки Vue 3 и Vite.

В этой статье мы будем создавать новостной блог. Все внутреннее управление контентом проекта будет разработано и размещено на нашем безголовом WordPress с использованием Devkinsta.

Введите вместе с этими простыми командами:

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

Если у вас возникли проблемы с пробелами в вашем имени пользователя, попробуйте использовать:

 npx create-vite-app news-blog

Обратите внимание, что мы настроили наше приложение Vue 3 для прослушивания http://news-blog.local , но вы можете придерживаться значения по умолчанию http://localhost:3000 .

Наконец, откройте кодовую базу Vue 3 в любом редакторе кода по вашему выбору. Мы пойдем с VSCode и давайте запачкаем руки кодами.

Использование WordPress API

Мы приступили к разработке оставшейся части приложения Vue, чтобы сэкономить ваше время на чтение, но вы можете клонировать репозиторий с моего GitHub.

Показать компонент публикации приложения

Фрагмент кода ниже показывает, как мы реализуем WordPress REST API с нашим экземпляром Vue для отображения всех сообщений из безголового WordPress:

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

Отобразить одиночный пост-компонент

Фрагмент кода показывает, как мы получаем один пост с помощью WordPress REST API с безголовым WordPress и отображаем его в нашем экземпляре Vue:

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

Ниже представлен магазин, который делает вызовы API к безголовому API WordPress для содержимого бэкэнда:

 export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }

Развертывание безголового WordPress с помощью Kinsta

Наконец, развертывание безголового WordPress очень просто с DevKinsta с помощью службы хостинга Kinsta.

Чтобы развернуть безголовый WordPress на Kinsta, нажмите кнопку « Push to Staging » на панели инструментов DevKinsta и войдите в Kinsta, используя свои учетные данные. Вы можете создать новую учетную запись Kinsta, чтобы получить свои учетные данные для входа.

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

Наконец, вы можете развернуть свой экземпляр Vue.js у любого поставщика облачного хостинга по вашему выбору. Обязательно обновите свою безголовую конечную точку WordPress соответствующим образом, чтобы протестировать свое приложение в реальной производственной среде.

Резюме

Безголовый WordPress и его преимущества останутся надолго. Его популярность будет только расти по мере того, как все больше разработчиков и владельцев сайтов осознают преимущества безголового варианта.

В этом руководстве мы познакомили вас с преимуществами, плюсами и минусами безголового WordPress, а также показали, как создать и развернуть свой первый безголовый WordPress с помощью DevKinsta. Теперь вы на пути к реализации безголового WordPress.

Каковы ваши советы по развертыванию безголового сайта WordPress? Пожалуйста, поделитесь ими в разделе комментариев!