Šta je headless WordPress i kako da napravite svoj prvi headless WordPress web sajt

Headless WordPress sigurno nije pojam sa kojim se često susrećete u svom svakodnevnom radu sa WordPress-om. Ipak, headless arhitektura vremenom postaje sve popularnija, posebno među developerima koji žele veću kontrolu nad frontend stranom WordPress sajta.

Headless WordPress je koncept koji omogućava da koristite WordPress kao backend za upravljanje sadržajem, dok istovremeno za kreiranje frontend-a možete da koristite neku drugu tehnologiju.

Zvuči komplikovano?

Ne brinite, u nastavku ćemo detaljno objasniti šta je tačno headless WordPress, koje prednosti nudi, gde je najpraktičniji i kako možete da implementirate jedan takav projekat, uz konkretne primere.

Šta je Headless WordPress?

Ako ste do sada već koristili WordPress, onda znate da on tradicionalno dolazi kao kompletno rešenje u kojem u jednom paketu imate backend (admin panel) i frontend (ono što vide posetioci vašeg sajta).

Za razliku od ovog klasičnog WordPress koncepta, headless WordPress u neku ruku odvaja backend od frontend-a. U njemu WordPress koristite samo za upravljanje sadržajem – pišete članke, pravite stranice, dodajete slike, onako kako to uobičajeno radite sa WordPress-om.

Razlika je što se taj sadržaj ne prikazuje direktno od strane WordPress-a. Umesto toga, vi možete koristiti moderne frontend tehnologije, kao što su React, Vue.js ili Angular, kako biste sadržaj koji ste uneli u WordPress prikazali na sajtu, odnosno na njegovom frontend-u.

Podaci iz WordPress-a šalju se putem REST API-ja ili GraphQL-a, i frontend ih obrađuje na svoj način.

Dakle, glavna razlika između tradicionalnog i headless WordPress-a je ta što tradicionalni WordPress upravlja i backend-om i frontend-om, dok kod headless modela WordPress služi isključivo za upravljanje sadržajem. Takođe, kod headless modela frontend je uglavnom napravljen u nekoj drugoj tehnologiji, i u tom smislu je potpuno odvojen od WordPress backend-a.

Prednosti Headless WordPress-a

Fleksibilnost u frontend razvoju

Jedna od najvećih prednosti headless WordPress-a je to što niste ograničeni na WordPress teme i plugin-e. Umesto toga, možete da koristite bilo koju frontend tehnologiju koju želite, što vam pruža potpunu slobodu u kreiranju sadržaja i funkcionalnosti za posetioce vašeg sajta.

Skalabilnost i održavanje

Kako vaša kompanija raste, verovatno će rasti i vaš web sajt, uključujući i neka nova dizajnerska rešenja i funkcionalnosti. Headless WordPress vam omogućava da skalirate backend i frontend nezavisno jedan od drugog.

To znači da, ukoliko primetite povećanje broja korisnika vašeg sajta, možete da se odlučite da skalirate frontend, a da backend pritom ostane stabilan. Ova fleksibilnost je ključna za sajtove sa velikim brojem posetilaca ili sajtova koji zahtevaju visok nivo personalizacije.

Bolja sigurnost

Jedan od najvećih izazova kod WordPress-a je sigurnost. Tradicionalni WordPress sajtovi su često meta brute force napada ili DDoS napada.

Pošto je u headless arhitekturi frontend potpuno odvojen od WordPress-a, ovi napadi postaju mnogo teži za realizaciju. Krajnji korisnici nemaju direktan pristup WordPress-u, što znači da je manje verovatno da će potencijalno uspešan napad ugroziti ceo sistem.

Mane headless WordPress-a

Naravno, headless WordPress nije savršeno rešenje za sve. Postoji nekoliko činjenica koje morate imati u vidu ukoliko planirate da radite headless WordPress sajt.

Složenija implementacija

Za razliku od klasičnog WordPress-a, gde možete instalirati temu i odmah pokrenuti sajt, headless pristup zahteva više tehničkog znanja. Potrebno je da znate kako funkcionišu API-ji i kako frontend alati poput React-a komuniciraju sa backend-om. Ako nemate dovoljno iskustva sa ovim alatima, prelazak na headless može biti ozbiljan izazov.

Gubitak “Out-of-the-Box” funkcionalnosti

Jedna od najboljih stvari kod WordPress-a je to što dolazi sa mnogo unapred ugrađenih funkcionalnosti – teme, plugin-i i SEO alati koji rade odmah nakon što ih instalirate i aktivirate.

U headless WordPress-u, mnoge od tih funkcionalnosti neće raditi podrazumevano. Umesto toga, potrebno je da ih prilagodite ili da razvijete nove kako bi odgovarale vašem specifičnom frontend rešenju.

Viši troškovi održavanja

Održavanje headless WordPress sajta zahteva dodatne resurse. Pošto imate dva sistema (backend i frontend) koja moraju da komuniciraju međusobno, potrebno je više pažnje posvetiti sinhronizaciji i održavanju. To može povećati troškove i vreme potrebno za održavanje vašeg web sajta.

Kada ima smisla primeniti Headless WordPress?

Headless WordPress nije rešenje za svaki projekat, ali postoje situacije u kojima je njegova primena poželjna, čak i neophodna. Evo nekoliko primera gde headless WordPress može biti dobro rešenje.

Višeplatformska distribucija sadržaja

Ako vaš sadržaj treba da bude prisutan na više platformi (web, mobilne aplikacije, pametni uređaji), headless WordPress vam omogućava da koristite jedan backend za sve te kanale.

Umesto da razvijate poseban sistem za svaki kanal, vi možete koristiti WordPress za unos i upravljanje sadržajem, a zatim taj sadržaj isporučivati putem API-ja na različite uređaje.

Zamislite da recimo kreirate blog post na svom WordPress sajtu, i taj isti članak se automatski pojavljuje na vašoj mobilnoj aplikaciji i glasovnom asistentu poput Alexa. Sve to možete postići bez pisanja istog sadržaja više puta. Tako štedite i vreme i trud!

Potreba za interaktivnim i prilagođenim korisničkim interfejsom

Ako vam je za vaš web sajt potreban složeniji i dinamičniji interfejs od onoga što nude standardne WordPrese teme, onda je headless pristup bez sumnjer dobro rešenje.

On vam omogućava veću slobodu u kreiranju prilagođenih i interaktivnih funkcionalnosti i dizajna vašeg web sajta, koristeći moderne frontend alate kao što su na primer React ili Vue.js.

Zamislite da recimo kreirate platformu za online kurseve i želite da implementirate neke dinamične funkcionalnosti poput interaktivnih testova, prilagođenih profila ili personalizovanih preporuka kurseva.

Korišćenjem headless WordPress-a, vi možete da upravljate sadržajem kurseva u WordPress-u, dok u nekoj drugoj tehnologiji možete da kreirate frontend koji će odgovarati vašim specifičnim potrebama.

Skalabilnost za velike sajtove sa mnogo korisnika

Kada neki web sajt postane dovoljno veliki da počne da dobija dosta posetilaca koji generišu veliki saobraćaj, onda je vreme da se on skalira i prilagodi novim uslovima. Headless arhitektura vam omogućava da backend (WordPress) i frontend skalirate zasebno, dajući vam tako veću fleksibilnost pri upravljanju resursima i performansama.

Jedinstveni dizajn i specifične potrebe korisničkog interfejsa

Ako vaš brend zahteva jedinstven dizajn ili specifične funkcionalnosti koje ne možete tako lako da napravite pomoću klasičnih WordPress tema i plugin-a, headless rešenje vam daje slobodu da kreirate bilo kakav frontend bez ograničenja.

Recimo da vaš klijent želi da njegov sajt ima potpuno prilagođen dizajn i animacije koje vam nije lako da napravite pomoću tradicionalnog WordPress-a. Korišćenjem headless pristupa možete da postavite WordPress kao CMS za unos sadržaja, a da frontend napravite koristeći neke druge alate koji omogućavaju kreiranje dinamičkih animacija, poput Three.js i React-a.

Kako Implementirati Headless WordPress?

Headless WordPress zahteva nekoliko koraka za postavljanje, ali ne brinite – uz prava uputstva i alate, proces može biti ne toliko komlikovan. Evo kako možete implementirati headless WordPress sa korišćenjem React-a, koji je bez sumnje jedan od najpopularnijih frontend alata danas.

Instalacija i podešavanje WordPress-a

Ukoliko još niste instalirali WordPress ili ako niste sigurni kako to da uradite, na našem blogu vas čeka nekoliko detaljnih upustava na tu temu. Ukoliko želite da instalirate WordPress na produkcionom serveru, predlažemo da u tom slučaju pročiitate Kako da instalirate WordPress pomoću WordPress Toolkit alata.

Ukoliko želite da instalirate WordPress u lokalnom testnom okruženju, onda preporučujemo da pročitate Kako da instalirate WordPress na lokalnom računaru (local server/localhost).

Omogućite REST API

REST API je alat koji omogućava komunikaciju između WordPress-a i drugih sistema (kao što je frontend aplikacija koju ćemo kreirati u React-u). To znači da WordPress može da šalje sadržaj na frontend sajt koristeći ovaj API.

Od WordPress verzije 4.7, REST API je podrazumevano omogućen. Da biste proverili da li vaš WordPress pravilno funkcioniše kao headless sistem, možete testirati REST API. Učinite to tako što ćete otići na sledeći URL:

https://vaš-domen.rs/wp-json/wp/v2/posts

Zamenite vaš-domen.rs sa nazivom domena vašeg WordPress sajta. Ako vidite JSON podatke (to su podaci koji izgledaju kao skupovi tekstova, brojeva i simbola u zagradama), onda je REST API omogućen i spreman za rad.

Ako koristite lokalnu instalaciju, umesto naziva vašeg domena, koristite localhost.

Kreirajte React Aplikaciju

React je JavaScript biblioteka koju je razvila kompanija Facebook (Meta), i koristi se za izradu brzih i interaktivnih korisničkih interfejsa. U kontekstu headless WordPress-a, React će služiti kao frontend alat koji prikazuje sadržaj sa WordPress-a. Dok WordPress čuva i upravlja vašim sadržajem, React ga prikazuje korisnicima.

Instalacija Node.js i npm

Da biste pokrenuli React, potrebno je da imate instalirane Node.js i npm. Evo šta su oni:

• Node.js: Platforma koja vam omogućava da pokrećete JavaScript kod izvan browser-a.
• npm (Node Package Manager): Alat koji omogućava preuzimanje i upravljanje JavaScript paketima (malim delovima koda) koje ćete koristiti za razvoj svoje aplikacije.

Node.js i npm možete preuzeti sa zvaničnog sajta Node.js. Kada ih instalirate, proverite da li su ispravno postavljeni pokretanjem sledećih komandi u terminalu ili komandnoj liniji:

node -v
npm -v

Ove komande će vam prikazati verziju Node.js-a i npm-a koje ste instalirali. Ako sve radi kako treba, možete preći na sledeći korak.

Kreiranje React projekta

Najjednostavniji način da pokrenete React aplikaciju je korišćenje alata create-react-app, koji automatski postavlja sve što vam je potrebno za početak rada. Da biste kreirali React aplikaciju, otvorite terminal ili komandnu liniju i pokrenite sledeću komandu:

npx create-react-app headless-wp-frontend

Ova komanda kreira direktorijum pod nazivom headless-wp-frontend i postavlja sve što je potrebno za pokretanje React aplikacije. Kada je instalacija završena, pređite u novi direktorijum i pokrenite aplikaciju:

cd headless-wp-frontend
npm start

Sada bi vaša aplikacija trebalo da bude pokrenuta i dostupna na localhost:3000.

Povežite React sa WordPress API-jem

Sada kada imate osnovnu React aplikaciju i WordPress kao backend, potrebno je povezati ova dva sistema kako bi React mogao da prikazuje podatke iz WordPress-a.

Dohvatanje podataka iz WordPress-a

React koristi JavaScript funkcije za komunikaciju sa WordPress REST API-jem. Dodajte novu komponentu koja će preuzimati postove iz WordPress-a i prikazivati ih na stranici.

Evo primera kako da to uradite:

1. U vašoj React aplikaciji, idite do src foldera.
2. Kreirajte novi fajl pod nazivom Posts.js.
3. Unesite sledeći kod:

import React, { useState, useEffect } from 'react';

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://vaš-domen.com/wp-json/wp/v2/posts')
      .then(response => response.json())
      .then(data => setPosts(data))
      .catch(error => console.error('Greška:', error));
  }, []);

  return (
    <div>
      <h1>WordPress Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title.rendered}</h2>
            <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

Ovaj kod omogućava vašem React sajtu da preuzme postove sa WordPress-a putem REST API-ja i prikaže ih na stranici.

Prikazivanje postova u aplikaciji

Da biste prikazali postove na početnoj stranici vaše React aplikacije, potrebno je da uključite Posts komponentu u App.js:

1. U src/App.js fajlu, zamenite postojeći kod sledećim:

import React from 'react';
import Posts from './Posts';

function App() {
  return (


 <div className="App">
      <header className="App-header">
        <h1>Headless WordPress sa React-om</h1>
      </header>
      <main>
        <Posts />
      </main>
    </div>
  );
}

export default App;

Kada pokrenete aplikaciju (npm start), na vašem React sajtu bi trebalo da vidite listu postova koji dolaze iz vašeg WordPress-a.

Kreirajte prilagođeni dizajn

Sada kada vaša React aplikacija prikazuje podatke iz WordPress-a, možete je stilizovati i dodati više funkcionalnosti.

Stilizacija i prilagođavanje

Možete stilizovati vašu aplikaciju koristeći CSS, ili instalirati popularne biblioteke kao što je Bootstrap. Bootstrap je jednostavan za korišćenje i omogućava vam da brzo kreirate lepo stilizovane elemente.

Da biste instalirali Bootstrap, pokrenite sledeću komandu:

npm install bootstrap

Zatim, u src/App.js, dodajte liniju za učitavanje Bootstrap stilova:

import 'bootstrap/dist/css/bootstrap.min.css';

Sada možete koristiti Bootstrap klase za stilizovanje elemenata. Na primer, možete stilizovati listu postova:

<ul className="list-group">
  {posts.map(post => (
    <li className="list-group-item" key={post.id}>
      <h2>{post.title.rendered}</h2>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </li>
  ))}
</ul>

Dodavanje interakcija

Jedna od glavnih prednosti React-a je sposobnost da kreira interaktivne komponente. Na primer, možete dodati funkciju pretrage kako biste korisnicima omogućili da pretražuju postove po ključnim rečima.

U Posts.js, dodajte sledeći kod:

const [searchTerm, setSearchTerm] = useState('');

const filteredPosts = posts.filter(post =>
  post.title.rendered.toLowerCase().includes(searchTerm.toLowerCase())
);

return (
  <div>
    <h1>WordPress Posts</h1>
    <input
      type="text"
      placeholder="Pretraži postove"
      onChange={e => setSearchTerm(e.target.value)}
    />
    <ul>
      {filteredPosts.map(post => (
        <li key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </li>
      ))}
    </ul>
  </div>
);

Sada će korisnici moći da pretražuju postove dok kucaju u polje za pretragu.

Deploy (postavljanje) aplikacije

Kada budete spremni da objavite svoj headless WordPress sajt, možete ga postaviti na svoj hosting nalog. Više o tome pročitajte u tekstu sa našeg bloga Migracija WordPress web-sajta sa lokalnog računara (localhost) na produkcioni server (live server) – 2.deo.

Deploy React aplikacije

React aplikaciju možete objaviti na platformama kao što su Netlify ili Vercel, koje su posebno prilagođene za hosting frontend aplikacija.

Da biste postavili aplikaciju na Netlify, pratite ove korake:

1. Inicijalizujte Git repozitorijum:

   git init
   git add .
   git commit -m "Initial commit"

2. Povežite aplikaciju sa GitHub-om (ili bilo kojim drugim sistemom za verzionisanje).
3. Na Netlify-u kreirajte novi sajt i povežite ga sa vašim GitHub repozitorijumom.
4. Netlify će automatski pokrenuti proces izrade i objave aplikacije. Nakon toga, vaša aplikacija će biti dostupna na Internetu!

Zaključak

Kao što ste videli, kreiranje headless WordPress sajta pruža vam veliku fleksibilnost, omogućavajući vam da koristite sve prednosti WordPress CMS-a dok istovremeno gradite frontend koristeći moderne alate kao što je npr. React.

Iako ovaj proces zahteva više tehničkog znanja u poređenju sa tradicionalnim WordPress sajtom, prednosti su značajne i to u vidu bržih performansi, bolje skalabilnosti i veće fleksibilnosti.

Ukoliko ste dovoljno iskusni u radu sa WordPress-om i imate potrebno predznanje u nekoj od pomenutih frontend tehnologija, onda verujemo da ćete uz ovaj vodič uspeti da napravite svoju prvu wordpress headless aplikaciju.

Nenad Mihajlović