Ce este WordPress fără cap? Cum să creez unul? [Tutorial]

Care sunt avantajele și dezavantajele pentru CMS fără cap WordPress?

WordPress fără cap vine cu o mulțime de avantaje și dezavantaje, fiecare dintre acestea putând afecta munca în diferite scenarii. Pentru a obține o imagine clară, să comparăm avantajele și dezavantajele sale în formatul Tabel de comparație.

WordPress fără cap este bun?

Dacă ignorați limitările pe care le-am menționat anterior, există anumite scenarii în care utilizarea WordPress fără cap ar putea fi benefică pentru dvs.

• Dacă securitatea site-ului dvs. este o prioritate maximă și gestionarea datelor este foarte sensibilă sau critică.
• Dacă vă bucurați de design personalizat și posibilități nelimitate, fără constrângerile opțiunilor limitate ale temei WordPress și sunteți în căutarea unui design frontal unic, atunci alegeți WordPress Headless.
• Dacă doriți să vă păstrați site-ul web izolat cu actualizările și upgrade-urile frecvente ale WordPress.
• Dacă doriți să vă pregătiți site-ul sau aplicația pentru viitor și să vă adaptați la noile tehnologii, tendințe și comportamente ale utilizatorilor fără a fi nevoie să vă revizuiți întreaga infrastructură, luați în considerare WordPress fără cap.
• O configurare Headless poate fi o opțiune bună dacă căutați site-uri web demonstrative, proiecte mici sau pe termen scurt sau tutoriale.

Cum funcționează WordPress Headless?

În timp ce vorbim despre WordPress standard, vine cu o interfață ușor de utilizat și un panou de administrare ușor de utilizat prin care puteți edita, crea și șterge cu ușurință conținutul, precum și gestiona site-ul web.

Pentru front-end, oferă mii de opțiuni de teme care combină teme încorporate, precum și teme terțe pentru a crea un site web atrăgător din punct de vedere vizual pe ecran.

Dar atunci când decuplați WordPress, vă puteți bucura de tot ce este mai bun din ambele lumi. Pentru a face posibil, WordPress are un API numit WordPress REST API.

Este o interfață de programare care permite dezvoltatorilor să acceseze și să interacționeze cu datele site-ului WordPress folosind metode HTTP standard.

Permite dezvoltatorilor să recupereze, să creeze, să actualizeze și să ștergă conținutul WordPress de la distanță, ceea ce facilitează integrarea WordPress cu alte platforme de aplicații sau cu alte tehnologii front-end precum React.js, Angular.js etc. pentru a crea un site web personalizat.

Cum fac WordPress fără cap? (Tutorial WordPress fără cap)

Pot exista diverse moduri prin care decuplați WordPress standard, în funcție de tehnologia pe care o veți utiliza, resurse, limbi preferate și cadre. Indiferent de metoda folosită, ar trebui să vă simțiți confortabil cu limbile front-end, precum și cu WordPress Rest API.

Dar pentru moment, vom alege cea mai simplă metodă, deoarece majoritatea indivizilor sunt începători. Consultați pașii de mai jos:

Pasul 1: Configurați WordPress

Primul lucru pe care trebuie să-l faceți este să creați un site web WordPress așa cum ați face de obicei pe serverul dvs. Înseamnă că site-ul ar trebui să fie live, să aibă domeniul său și un cont de găzduire web adecvat.

Dar alegerea platformei de găzduire WordPress potrivită este în sine o sarcină foarte dificilă și chiar este un pas foarte crucial atunci când configurați WordPress și creați un CMS fără cap.

Este atât de important pentru că, chiar dacă front-end-ul și back-end-ul sunt decuplate, back-end-ul trebuie să locuiască pe un server care necesită găzduire.

Serverul nu numai că oferă o casă pentru a stoca tot conținutul site-ului dvs., dar performanța, securitatea și fiabilitatea acestuia sunt, de asemenea, foarte esențiale pentru livrarea fără probleme a conținutului site-ului către front-end, indiferent de tehnologia pe care o folosește.

Prin urmare, devine esențial să alegeți o gazdă care oferă performanță Blazing Fast Server și securitate sporită.

Având în vedere acest lucru, puteți alege WPOven, una dintre cele mai rapide și lideri companii de găzduire WordPress complet gestionate, care oferă o combinație de viteză, securitate la nivel de întreprindere și suport de concierge, asigurându-vă că călătoria dvs. WordPress fără cap este mai lină.

• Mai exact, WPOven oferă găzduire gestionată pe furnizorul de cloud de top Linode , asigurând performanță și scalabilitate de mare viteză.
• Platforma oferă o instalare pre-WordPress, făcând configurarea WordPress și a altor instrumente fără probleme.
• De asemenea, cu sistemul avansat de stocare în cache încorporat și rețeaua de livrare a conținutului (CDN) Cloudflare, conținutul dvs. este livrat mai rapid, indiferent de locația utilizatorului.
• În plus, WPOven asigură securitate robustă la nivel de întreprindere prin firewall-uri de protecție web integrate și instalare SSL, ajutând la protejarea datelor și interacțiunilor backend.
• Backup-urile automate și opțiunile ușoare de restaurare oferă un nivel suplimentar de protecție a datelor și liniște sufletească.
• În plus, asistența clienților WPOven 24/7 și baza extinsă de cunoștințe asigură soluționarea rapidă a oricăror probleme, permițându-vă să vă concentrați pe construirea și gestionarea CMS-ului dvs. fără cap fără probleme legate de găzduire.

Pasul 2: Activați API-ul REST

Următorul lucru pe care trebuie să-l faceți este să vă asigurați că API-ul REST WordPress este activat. În mod implicit, este activat pe toate noile instalări WordPress.

Dar totuși, trebuie să verificați dacă este activat pe site-ul dvs. web sau nu. Puteți face acest lucru prin simpla solicitare API introducând următoarea adresă URL în browser,

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

Schimbați „example.com” cu numele real de domeniu și, dacă API-ul este activat, va afișa un răspuns JSON cu câteva informații despre postările site-ului dvs.

Alternativ, puteți lua ajutorul unui plugin, cum ar fi pluginul WP REST API.

Citiți: API-ul REST WordPress: Ghid de pornire

Pasul 3: Preluați datele postării prin API

Dacă doriți să preluați datele postării, urmați acești pași:

• Deschideți tabloul de bord WordPress > Setări > Legături permanente și selectați Nume postare.

• După aceea, trebuie să descărcați instrumentul de testare Postman API.
• Acum, în instrumentul Postman API, introduceți adresa URL ca în formatul de mai jos.

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

Aceasta va prelua datele postării în site-ul dvs. WordPress.

Pasul 6: Configurați aplicația React

Acum am terminat cu backend-ul, este timpul să începem să lucrăm la front-end. Mai întâi, creăm o aplicație React executând codul de mai jos în Terminal.

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

Această comandă va crea o nouă aplicație React folosind Vite și, de asemenea, va instala bibliotecile sau pachetele externe necesare.

În plus, trebuie să includeți și Axios pentru a gestiona solicitările HTTP. Pentru aceasta, rulați următoarea comandă pentru a o instala.

npm install axios

Acum, puteți porni un server de dezvoltare local pentru aplicația dvs. rulând comanda npm run dev în terminalul sau promptul de comandă.

Când rulați această comandă, va porni un server pe mașina dvs. locală și va face aplicația dvs. disponibilă la adresa URL https://127.0.0.1:5173 .

Următorul lucru pe care trebuie să-l faceți este să vă deschideți proiectul în editorul de cod (orice doriți, Visual Studio Code, Subkline Text, Atom etc.) și, de asemenea, să eliminați fișierele inutile, cum ar fi index.css, app.css etc.

Pasul 7: Preluați postări de pe WordPress

În fișierul App.jsx , în partea de sus, importați cârligul useState din biblioteca React. Acest lucru vă permite să utilizați starea în componenta dumneavoastră funcțională.

import React, { useState } from 'react';

În interiorul App componente funcționale, inițializați o parte de stare numită posts folosind cârligul useState . Această stare va deține o serie de postări. useState([]) inițializează posts cu o matrice goală ca valoare inițială.

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

După inițializarea stării posts cu o matrice goală folosind useState([]) , trebuie să adăugați cod pentru a prelua postările din API-ul REST WordPress. Aceasta implică efectuarea unei cereri HTTP către punctul final API care servește datele postărilor.

Trebuie să adăugați codul necesar pentru a prelua datele postărilor după declarația de stat. Acest cod va implica de obicei utilizarea unei metode precum fetch() sau a unei biblioteci precum Axios pentru a face o solicitare HTTP GET către punctul final al API-ului WordPress care furnizează date postări.

Apoi, adăugați următorul cod după declarația de stat pentru a prelua datele postărilor din API-ul REST WordPress și actualizați postările în consecință.

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

Acest cod preia postări de la API-ul REST al unui site web WordPress atunci când componenta se montează și actualizează starea componentei cu datele preluate folosind funcția setPosts a hook useState .

Pasul 8: Crearea unei componente Blog și redarea acesteia

Acum creați un nou folder numit „components” în folderul src și creați două fișiere noi Blog.jsx și blog.css (în interiorul componentelor).

Apoi, adăugați mai întâi următorul cod în fișierul 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>
);
}

Această componentă preia și afișează titlul, data, fragmentul și imaginea prezentată a unei postări pe blog trecută ca recuzită.

După aceea, adăugați următorul stil în fișierul 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;
}

În cele din urmă, introduceți următorul fragment de cod în declarația return a fișierului App.jsx . Aici definiți structura interfeței de utilizare a componentei dvs. folosind sintaxa 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>
)
}

Salvați fișierul și reîmprospătați browserul. Acum veți putea vedea postările de blog redate pe ecran.

Exemple WordPress fără cap

Pentru referință și pentru a construi încredere, aici vă oferim câteva exemple de WordPress fără cap:

1. Techcrunch

Dacă ești un pasionat de tehnologie, trebuie să fii familiarizat cu TechCrunch. care este un punct de media tehnologic de vârf și un site de știri. Ei și-au reproiectat front-end-ul site-ului lor pentru a oferi o experiență perfectă pentru utilizator.

Pentru a realiza acest lucru, au optat pentru abordarea Headless WordPress și au folosit aplicația React pentru a crea front-end și headless WordPress pentru back-end.

2. Facebook Brand Resource Center

Facebook cunoscut acum sub numele de Meta, un gigant al rețelelor sociale folosește această abordare Headless WordPress pe site-ul său Brand Resource Center ca ghid de stil pentru activele sale de marcă.

Site-ul web folosește un amestec unic de design web unic și elegant, cu o experiență de utilizator fluidă. Dacă Facebook/Meta ca un mare gigant tehnologic poate. ai încredere în WordPress fără cap, la fel și tu.

Concluzie

În concluzie, în afară de anumite limitări, contra sau dezavantaje. O abordare fără cap poate face minuni dacă este implementată corect. În special, poate fi foarte avantajos pentru dezvoltatorii sau creatorii de conținut cărora le place să creeze aplicații web fără cap.

Fără îndoială, decuplarea WordPress standard poate deschide o lume de posibilități, cum ar fi obținerea libertății de a proiecta o interfață de utilizare a site-ului web folosind React și, de asemenea, gestionarea conținutului folosind WordPress.

Această tehnologie vă permite să vă bucurați de puterea completă a fiecărei tehnologii împreună cu beneficiile flexibilității, scalabilității și optimizării SEO.

Pe parcursul acestui blog, am încercat să rezolvăm toate întrebările generice referitoare la WordPress fără cap și v-am oferit, de asemenea, câțiva pași despre cum să creați un WordPress fără cap pentru referință. (Cu toate acestea, pot exista mai multe moduri de a decupla WordPress, așa că urmați oricare credeți că este mai ușor pentru dvs.).

întrebări frecvente

Rahul

Rahul Kumar este un pasionat de web și un strateg de conținut specializat în WordPress și găzduire web. Cu ani de experiență și angajamentul de a rămâne la curent cu tendințele din industrie, el creează strategii online eficiente care generează trafic, stimulează implicarea și cresc conversiile. Atenția lui Rahul pentru detalii și capacitatea de a crea conținut convingător îl fac un atu valoros pentru orice brand care dorește să-și îmbunătățească prezența online.