Co to jest bezgłowy WordPress? Jak go stworzyć? [Instruktaż]

Jakie są zalety i wady bezgłowego CMS-a WordPress?

Headless WordPress ma wiele zalet i wad, z których każda może mieć wpływ na Twoją pracę w różnych scenariuszach. Aby uzyskać jasny obraz, porównajmy jego zalety i wady w formacie tabeli porównawczej.

Czy bezgłowy WordPress jest dobry?

Jeśli zignorujesz ograniczenia, o których wspomnieliśmy wcześniej, istnieją pewne scenariusze, w których korzystanie z bezgłowego WordPressa może być dla Ciebie korzystne.

• Jeśli bezpieczeństwo Twojej witryny internetowej jest najwyższym priorytetem, a przetwarzanie danych jest bardzo wrażliwe lub krytyczne.
• Jeśli lubisz niestandardowe projekty i nieograniczone możliwości bez ograniczeń związanych z ograniczonymi opcjami motywu WordPress i szukasz unikalnego projektu frontendu, wybierz Headless WordPress.
• Jeśli chcesz odizolować swoją witrynę dzięki częstym aktualizacjom i ulepszeniom WordPress.
• Jeśli chcesz przygotować swoją witrynę lub aplikację na przyszłość i dostosować się do nowych technologii, trendów i zachowań użytkowników bez konieczności przebudowy całej infrastruktury, rozważ bezgłowy WordPress.
• Konfiguracja bezgłowa może być dobrym rozwiązaniem, jeśli szukasz witryn demonstracyjnych, małych lub krótkoterminowych projektów lub samouczków.

Jak działa Headless WordPress?

Jeśli chodzi o standardowy WordPress, ma on przyjazny dla użytkownika interfejs i łatwy w obsłudze panel administracyjny, za pomocą którego możesz łatwo edytować, tworzyć i usuwać treści, a także zarządzać witryną.

W przypadku interfejsu zapewnia tysiące opcji motywów, łączących motywy wbudowane i motywy innych firm, aby stworzyć atrakcyjną wizualnie stronę internetową na ekranie.

Ale kiedy oddzielisz WordPressa, możesz cieszyć się tym, co najlepsze z obu światów. Aby było to możliwe, WordPress posiada API o nazwie WordPress REST API.

Jest to interfejs programistyczny, który umożliwia programistom dostęp do danych witryny WordPress i interakcję z nimi przy użyciu standardowych metod HTTP.

Umożliwia programistom zdalne pobieranie, tworzenie, aktualizowanie i usuwanie treści WordPress, co ułatwia integrację WordPressa z innymi platformami aplikacji lub innymi technologiami front-end, takimi jak React.js, Angular.js itp. w celu stworzenia niestandardowej witryny internetowej.

Jak sprawić, by WordPress był bezgłowy? (Bezgłowy samouczek WordPressa)

Istnieją różne sposoby oddzielenia standardowego WordPressa, w zależności od technologii, której będziesz używać, zasobów, preferowanych języków i frameworków. Bez względu na to, która metoda zostanie użyta, powinieneś znać języki frontonu i interfejs API WordPress Rest.

Ale na razie wybierzemy najprostszą metodę, ponieważ większość osób to osoby początkujące. Sprawdź kroki podane poniżej:

Krok 1: Skonfiguruj WordPressa

Pierwszą rzeczą, którą musisz zrobić, to utworzyć witrynę WordPress, tak jak zwykle na swoim serwerze. Oznacza to, że witryna powinna działać, posiadać domenę i odpowiednie konto hostingowe.

Jednak wybór odpowiedniej platformy hostingowej WordPress sam w sobie jest bardzo trudnym zadaniem, a nawet bardzo ważnym krokiem podczas konfiguracji WordPressa i tworzenia bezgłowego CMS-a.

Jest to tak ważne, ponieważ mimo że front i backend są od siebie oddzielone, backend nadal musi znajdować się na serwerze wymagającym hostingu.

Serwer nie tylko zapewnia miejsce do przechowywania całej zawartości witryny, ale jego wydajność, bezpieczeństwo i niezawodność są również bardzo istotne dla sprawnego dostarczania zawartości witryny do interfejsu użytkownika, niezależnie od używanej technologii.

Dlatego niezbędny staje się wybór hosta oferującego niesamowitą wydajność serwera Blazing Fast i zwiększone bezpieczeństwo.

Biorąc to pod uwagę, możesz wybrać WPOven, jedną z najszybszych i wiodących w pełni zarządzanych firm hostingowych WordPress, która zapewnia połączenie szybkości, bezpieczeństwa na poziomie przedsiębiorstwa i wsparcia concierge, dzięki czemu Twoja podróż do WordPressa bez głowy będzie płynniejsza.

• W szczególności WPOven zapewnia zarządzany hosting na najwyższej klasy dostawcy usług chmurowych Linode , zapewniając wysoką wydajność i skalowalność.
• Platforma oferuje instalację przed WordPressem, dzięki czemu konfiguracja WordPressa i innych narzędzi jest bezproblemowa.
• Ponadto dzięki wbudowanemu zaawansowanemu systemowi buforowania i sieci dostarczania treści (CDN) Cloudflare Twoje treści są dostarczane szybciej, niezależnie od lokalizacji użytkownika.
• Dodatkowo WPOven zapewnia solidne bezpieczeństwo na poziomie korporacyjnym dzięki wbudowanym zaporom sieciowym i instalacji SSL, pomagając chronić dane i interakcje zaplecza.
• Automatyczne kopie zapasowe i opcje łatwego przywracania zapewniają dodatkową warstwę ochrony danych i spokój ducha.
• Co więcej, całodobowa obsługa klienta WPOven i obszerna baza wiedzy zapewniają szybkie rozwiązywanie wszelkich problemów, dzięki czemu możesz skupić się na budowaniu i zarządzaniu bezgłowym CMS-em bez kłopotów związanych z hostingiem.

Krok 2: Włącz interfejs API REST

Następną rzeczą, którą musisz zrobić, to upewnić się, że API REST WordPress jest włączone. Domyślnie jest ona włączona we wszystkich nowych instalacjach WordPress.

Ale nadal musisz sprawdzić, czy jest ona włączona w Twojej witrynie, czy nie. Możesz to zrobić, po prostu wysyłając żądanie API, wpisując następujący adres URL w przeglądarce,

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

Zmień „example.com” na rzeczywistą nazwę swojej domeny, a jeśli API jest włączone, wyświetli odpowiedź JSON z pewnymi informacjami o postach w Twojej witrynie.

Alternatywnie możesz skorzystać z wtyczki, takiej jak wtyczka WP REST API.

Przeczytaj: Interfejs API REST WordPress: Przewodnik wprowadzający

Krok 3: Pobierz dane pocztowe za pośrednictwem interfejsu API

Jeśli chcesz pobrać dane postów, wykonaj następujące kroki:

• Otwórz pulpit nawigacyjny WordPress > Ustawienia > Łącza bezpośrednie i wybierz Nazwa wpisu.

• Następnie musisz pobrać narzędzie do testowania API Postman.
• Teraz w narzędziu Postman API wprowadź adres URL w podanym poniżej formacie.

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

Spowoduje to pobranie danych postów z Twojej witryny WordPress.

Krok 6: Skonfiguruj aplikację React

Backend mamy już za sobą, czas zabrać się za frontend. Najpierw tworzymy aplikację React, wykonując poniższy kod w terminalu.

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

To polecenie utworzy nową aplikację React przy użyciu Vite, a także zainstaluje niezbędne zewnętrzne biblioteki lub pakiety.

Ponadto musisz także uwzględnić Axios do obsługi żądań HTTP. W tym celu uruchom następujące polecenie, aby je zainstalować.

npm install axios

Teraz możesz uruchomić lokalny serwer programistyczny dla swojej aplikacji, uruchamiając polecenie npm run dev w terminalu lub w wierszu poleceń.

Uruchomienie tego polecenia spowoduje uruchomienie serwera na komputerze lokalnym i udostępnienie aplikacji pod adresem URL https://127.0.0.1:5173 .

Następną rzeczą, którą musisz zrobić, to otworzyć swój projekt w edytorze kodu (jakim chcesz, Visual Studio Code, Subkline Text, Atom itp.), A także usunąć niepotrzebne pliki, takie jak Index.css, app.css itp.

Krok 7: Pobierz posty z WordPress

W pliku App.jsx na górze zaimportuj hak useState z biblioteki React. Pozwala to na użycie stanu w komponencie funkcjonalnym.

import React, { useState } from 'react';

Wewnątrz komponentu funkcjonalnego App zainicjuj element stanu zwany posts używając haka useState . Ten stan będzie zawierał tablicę postów. useState([]) inicjuje posts z pustą tablicą jako wartością początkową.

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

Po zainicjowaniu stanu posts pustą tablicą za pomocą useState([]) , musisz dodać kod, aby pobrać posty z API REST WordPress. Wiąże się to z wysłaniem żądania HTTP do punktu końcowego API, który obsługuje dane postów.

Musisz dodać kod niezbędny do pobrania danych postów po deklaracji stanu. Ten kod będzie zazwyczaj wymagał użycia metody takiej jak fetch() lub biblioteki takiej jak Axios w celu wykonania żądania HTTP GET do punktu końcowego interfejsu API WordPress, który dostarcza dane postów.

Następnie dodaj następujący kod po deklaracji stanu, aby pobrać dane postów z interfejsu API REST WordPress i odpowiednio zaktualizować posty.

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()
}, [])

Ten kod pobiera posty z interfejsu API REST witryny WordPress podczas montowania komponentu i aktualizuje stan komponentu za pomocą pobranych danych za pomocą funkcji setPosts haka useState .

Krok 8: Tworzenie komponentu bloga i renderowanie go

Teraz utwórz nowy folder o nazwie „components” w folderze src i utwórz dwa nowe pliki Blog.jsx i blog.css (wewnątrz komponentów).

Następnie dodaj najpierw następujący kod do pliku 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>
);
}

Ten komponent pobiera i wyświetla tytuł, datę, fragment i wyróżniony obraz wpisu na blogu przekazanego jako rekwizyt.

Następnie dodaj następujący styl do pliku 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;
}

Na koniec wstaw następujący fragment kodu do instrukcji return pliku App.jsx . W tym miejscu definiujesz strukturę interfejsu użytkownika komponentu przy użyciu składni 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>
)
}

Zapisz plik i odśwież przeglądarkę. Teraz będziesz mógł zobaczyć wyrenderowane wpisy na blogu na ekranie.

Bezgłowe przykłady WordPressa

W celach informacyjnych i budowania zaufania przedstawiamy kilka przykładów Headless WordPress:

1. Techcrunch

Jeśli jesteś entuzjastą technologii, musisz znać TechCrunch. który jest wiodącym medialnym portalem technologicznym i serwisem informacyjnym. Przeprojektowali interfejs swojej witryny, aby zapewnić bezproblemową obsługę użytkownika.

Aby to osiągnąć, wybrali podejście Headless WordPress i wykorzystali aplikację React do stworzenia frontonu i bezgłowego WordPressa dla back-endu.

2. Centrum zasobów dotyczących marki Facebooka

Facebook, obecnie znany jako Meta, gigant mediów społecznościowych, wykorzystuje podejście Headless WordPress w swojej witrynie Brand Resource Center jako przewodnik po stylu dla zasobów swojej marki.

Witryna internetowa wykorzystuje unikalne połączenie unikalnego i eleganckiego projektu internetowego z płynną obsługą użytkownika. Jeśli Facebook/Meta może być wielkim gigantem technologicznym. zaufaj bezgłowemu WordPressowi, więc Ty też możesz.

Wniosek

Podsumowując, poza pewnymi ograniczeniami, wadami lub wadami. Podejście bezgłowe może zdziałać cuda, jeśli zostanie prawidłowo wdrożone. Szczególnie może to być bardzo korzystne dla programistów lub twórców treści, którzy lubią tworzyć bezobsługowe aplikacje internetowe.

Bez wątpienia oddzielenie standardowego WordPressa może otworzyć świat możliwości, takich jak uzyskanie swobody projektowania interfejsu użytkownika witryny internetowej za pomocą React, a także zarządzania treścią za pomocą WordPress.

Technologia ta pozwala cieszyć się pełną mocą każdej technologii wraz z korzyściami w postaci elastyczności, skalowalności i optymalizacji SEO.

Na tym blogu staraliśmy się odpowiedzieć na wszystkie ogólne zapytania dotyczące bezgłowego WordPressa, a także przedstawiliśmy kilka kroków, jak stworzyć bezgłowy WordPress w celach informacyjnych. (Jednakże może istnieć wiele sposobów oddzielenia WordPressa, więc postępuj zgodnie z tym, który uważasz za najłatwiejszy).

Często Zadawane Pytania

Rahul

Rahul Kumar jest entuzjastą sieci i specjalistą ds. strategii treści, specjalizującym się w WordPressie i hostingu. Dzięki wieloletniemu doświadczeniu i chęci bycia na bieżąco z trendami branżowymi tworzy skuteczne strategie online, które generują ruch, zwiększają zaangażowanie i zwiększają konwersję. Dbałość Rahula o szczegóły i umiejętność tworzenia atrakcyjnych treści czyni go cennym nabytkiem dla każdej marki chcącej poprawić swoją obecność w Internecie.