Что такое безголовый WordPress? Как создать его? [Руководство]

Каковы плюсы и минусы безголовой CMS WordPress?

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

Хорош ли безголовый WordPress?

Если вы проигнорируете ограничения, о которых мы упоминали ранее, есть определенные сценарии, в которых использование Headless WordPress может быть вам полезно.

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

Как работает Headless WordPress?

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

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

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

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

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

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

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

Но сейчас мы выберем самый простой метод, поскольку большинство людей — новички. Ознакомьтесь с шагами, приведенными ниже:

Шаг 1: Настройте WordPress

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

Но выбор подходящей хостинговой платформы WordPress сам по себе является очень сложной задачей и даже очень важным шагом при настройке WordPress и создании headless CMS.

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

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

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

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

• В частности, WPOven предоставляет управляемый хостинг у ведущего облачного провайдера Linode , обеспечивающего высокую скорость и масштабируемость.
• Платформа предлагает предварительную установку WordPress, что упрощает настройку WordPress и других инструментов.
• Кроме того, благодаря встроенной усовершенствованной системе кэширования и сети доставки контента (CDN) Cloudflare ваш контент доставляется быстрее, независимо от местоположения пользователя.
• Кроме того, WPOven обеспечивает надежную безопасность на уровне предприятия посредством встроенных брандмауэров веб-защиты и установки SSL, помогая защитить ваши серверные данные и взаимодействия.
• Автоматизированное резервное копирование и простые возможности восстановления обеспечивают дополнительный уровень защиты данных и душевное спокойствие.
• Кроме того, круглосуточная поддержка клиентов WPOven и обширная база знаний гарантируют быстрое решение любых проблем, позволяя вам сосредоточиться на создании и управлении вашей автономной CMS без проблем, связанных с хостингом.

Шаг 2. Включите REST API

Следующее, что вам нужно сделать, это убедиться, что WordPress REST API включен. По умолчанию он включен во всех новых установках WordPress.

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

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

Замените «example.com» на свое фактическое доменное имя, и если API включен, он отобразит ответ JSON с некоторой информацией о сообщениях вашего веб-сайта.

Альтернативно вы можете воспользоваться плагином, например плагином WP REST API.

Прочтите: WordPress REST API: руководство по началу работы.

Шаг 3. Получите данные публикации через API

Если вы хотите получить данные публикации, выполните следующие действия:

• Откройте панель управления WordPress > Настройки > Постоянные ссылки и выберите Имя публикации.

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

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

Это позволит получить данные публикации на вашем веб-сайте WordPress.

Шаг 6. Настройте приложение React

Теперь мы закончили с бэкэндом, пора приступить к работе над фронтендом. Сначала мы создаем приложение React, выполнив приведенный ниже код в терминале.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Эта команда создаст новое приложение React с использованием Vite, а также установит необходимые внешние библиотеки или пакеты.

Кроме того, вам также необходимо включить Axios для обработки HTTP-запросов. Для этого выполните следующую команду, чтобы установить его.

npm install axios

Теперь вы можете запустить локальный сервер разработки для своего приложения, выполнив команду npm run dev в терминале или командной строке.

Когда вы запустите эту команду, она запустит сервер на вашем локальном компьютере и сделает ваше приложение доступным по URL-адресу https://127.0.0.1:5173 .

Следующее, что вам нужно сделать, это открыть свой проект в редакторе кода (какой вам нравится, Visual Studio Code, Subkline Text, Atom и т. д.), а также удалить ненужные файлы, такие как index.css, app.css и т. д.

Шаг 7. Получение сообщений из WordPress

В файле App.jsx вверху импортируйте перехватчик useState из библиотеки React. Это позволяет вам использовать состояние в вашем функциональном компоненте.

import React, { useState } from 'react';

Внутри вашего функционального компонента App инициализируйте часть состояния, называемую posts используя хук useState . В этом штате будет храниться множество постов. useState([]) инициализирует posts пустым массивом в качестве начального значения.

const [posts, setPosts] = useState([]);

После инициализации состояния posts пустым массивом с помощью useState([]) вам необходимо добавить код для получения сообщений из REST API WordPress. Это включает в себя выполнение HTTP-запроса к конечной точке API, которая обслуживает данные сообщений.

Вам необходимо добавить код, необходимый для получения данных сообщений после объявления состояния. Этот код обычно включает использование такого метода, как fetch() , или библиотеки, такой как Axios, для выполнения HTTP-запроса GET к конечной точке API WordPress, которая предоставляет данные сообщений.

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

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Этот код извлекает сообщения из REST API веб-сайта WordPress при монтировании компонента и обновляет состояние компонента полученными данными с помощью функции setPosts ловушки useState .

Шаг 8. Создание компонента блога и его рендеринг

Теперь создайте новую папку с именем «компоненты» внутри папки src и создайте два новых файла Blog.jsx и blog.css (внутри компонентов).

Затем сначала добавьте следующий код в файл Blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

Этот компонент извлекает и отображает заголовок, дату, отрывок и изображение записи блога, переданной в качестве реквизита.

После этого добавьте в файл blog.css следующий стиль:

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Наконец, вставьте следующий фрагмент кода в оператор return файла App.jsx . Здесь вы определяете структуру пользовательского интерфейса вашего компонента, используя синтаксис JSX.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Сохраните файл и обновите браузер. Теперь вы сможете видеть отрисованные сообщения блога на экране.

Примеры безголового WordPress

Для справки и для укрепления уверенности мы предоставляем вам несколько примеров Headless WordPress:

1. Техкранч

Если вы энтузиаст технологий, вы должны быть знакомы с TechCrunch. которое является ведущим технологическим СМИ и новостным сайтом. Они изменили внешний вид своего веб-сайта, чтобы обеспечить удобство работы с пользователем.

Чтобы добиться этого, они выбрали подход Headless WordPress и использовали приложение React для создания внешнего интерфейса и Headless WordPress для серверной части.

2. Ресурсный центр бренда Facebook

Facebook, широко известный как Meta, гигант социальных сетей, использует этот подход Headless WordPress на своем веб-сайте Центра ресурсов бренда в качестве руководства по стилю для своих брендовых активов.

На веб-сайте используется уникальное сочетание уникального и элегантного веб-дизайна с удобством для пользователя. Если Facebook/Meta, как большой технологический гигант, сможет. доверяйте безголовому WordPress, так же можете и вы.

Заключение

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

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

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

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

Часто задаваемые вопросы

Рахул

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