Cum să creezi un site WordPress fără cap cu Faust.js (în 9 pași)

Dacă trebuie să rulați WordPress fără cap, un cadru de calitate este obligatoriu. Cu toate acestea, chiar și cu puțin ajutor din partea unui cadru modern, s-ar putea să vă lupți în continuare să previzualizați eficient conținutul.

Aici intervine Faust.js. Acest nou cadru valorifică puterea Next.js și React și combină aceasta cu funcții convenabile de previzualizare post. Cu Faust.js, vă puteți vizualiza conținutul înainte de a apăsa Publicare , exact la fel ca și în cazul unui site web WordPress tradițional.

În acest articol, vom explora de ce ați putea dori să utilizați Faust.js pentru următorul proiect WordPress fără cap. Apoi vă vom arăta cum să configurați acest nou cadru și să construiți un front end simplu. Să începem!

De ce ați putea dori să rulați un site WordPress fără cap

Sistemul tipic de management al conținutului (CMS) constă dintr-un front-end și un back-end, iar WordPress nu face excepție. Cu toate acestea, este posibil să rulați WordPress fără cap.

„Capul” se referă la stratul de prezentare, în timp ce „corpul” este locul în care conținutul este stocat și creat. Îndepărtând partea din față (capul) din partea din spate (corp), puteți rula WordPress fără cap.

Cu un proiect fără cap, veți continua să utilizați tabloul de bord și instrumentele familiare WordPress. Cu toate acestea, sunteți liber să vă proiectați propriul front end, independent de constrângerile obișnuite ale WordPress. Acest lucru vă oferă control complet asupra modului în care este afișat conținutul dvs.

Crearea propriului front end poate fi o perspectivă interesantă, dar nu este deosebit de simplă. Din fericire, există instrumente care pot efectua o mare parte din ridicarea greutății pentru tine.

Mulți utilizatori de CMS fără cap aleg să solicite ajutorul unui instrument precum Frontity, framework-ul Gatsby sau Next.js bazat pe React. Cu toate acestea, în mod tradițional, a fost dificil să previzualizați postările și paginile pe un site fără cap, chiar și atunci când utilizați un cadru. Aici intervine Faust.js:

Acest cadru este construit pe lângă Next.js și React și se străduiește să ofere o experiență de publicare care să fie în concordanță cu WordPress tradițional. Pentru a realiza acest lucru, Faust.js oferă previzualizări fără întreruperi de conținut.

Faust.js folosește și un client GraphQL. Acest lucru vă permite să interogați API-ul WordPress WPGraphQL fără a fi nevoie să cunoașteți interogările GraphQL din timp.

În plus, Faust.js oferă mecanisme încorporate pentru autentificarea back-end-ului WordPress. Acest lucru facilitează crearea de conținut închis și site-uri de comerț electronic cu CMS-ul tău fără cap.

Cum să creezi un site WordPress fără cap cu Faust.js (în 9 pași)

Acum că am acoperit ce este Faust.js și unele dintre beneficiile sale majore, să vedem cum puteți începe cu acest cadru. Iată cum să creați un CMS fără cap cu Faust.js, în nouă pași.

Pasul 1: Pregătiți-vă mediul de dezvoltare

Înainte de a începe, va trebui să instalați Node.js și Node Package Manager (NPM). De asemenea, veți avea nevoie de o instalare WordPress, pe care o puteți găzdui fie local, fie pe un server web.

Veți folosi și câteva pluginuri WordPress. În primul rând, pluginul WPGraphQL va transforma WordPress într-un API GraphQL, gata pentru ca proiectul dvs. să fie consumat.

Veți avea nevoie și de WPE Headless. Acest plugin oferă câteva funcții suplimentare care vă ajută să vă asigurați că WordPress funcționează corect ca un CMS fără cap. Puteți descărca cea mai recentă versiune a acestui plugin și apoi o puteți încărca în tabloul de bord WordPress.

Pentru a vă ajuta să începeți cu cadrul Faust.js, veți folosi proiectul de pornire create-next-app. Acest lucru generează o aplicație Bootstrap Next.js cu toate configurațiile și fișierele necesare deja la locul lor. Apoi, puteți folosi acest lucru ca bază pentru proiectul dvs. Faust.js fără cap.

Puteți instala create-next-app folosind instrumentul npx, care este inclus cu NPM. În terminalul local sau în fereastra Prompt de comandă, rulați următoarele:

 npx create-next-app faust-headless-demo

Acest lucru va crea un proiect demonstrativ faust-headless- în directorul de utilizatori locali al computerului. Odată ce acest proces este finalizat, Terminalul vă va solicita să porniți aplicația Next.js folosind următoarele comenzi:

 cd faust-headless-demo npm run dev

Felicitări – tocmai ați creat cu succes un proiect Next.js! Pentru a arunca o privire asupra acestei aplicații, mergeți la „http://localhost:3000” în browser:

Ar trebui să vedeți acum site-ul de pornire Next.js. Dacă întâmpinați un mesaj de eroare, încercați să rulați din nou comanda npm run dev , care poate rezolva problema.

Pasul 2: Configurați TypeScript

Faust.js folosește TypeScript, care este un superset tip de JavaScript care adaugă verificarea tipului la compilare. Acest lucru vă permite să detectați erori în timpul compilării, mai degrabă decât să așteptați până la timpul de execuție. Pentru a instala TypeScript, rulați următoarele comenzi în terminal:

 npm install --save-dev @types/react npm install typescript --save-dev

Acum, trebuie să generați un fișier tsconfig.json . Acest fișier specifică opțiunile compilatorului care sunt necesare pentru a rula proiectul dvs.:

 npx tsc --init

Odată ce ați configurat TypeScript, va trebui să convertiți câteva fișiere JavaScript în formatul TypeScript. Navigați la directorul local de utilizatori , care ar trebui să conțină un nou director faust-headless-demo :

În faust-headless-demo , deschideți directorul paginilor . Acum puteți redenumi fișierul _app.js în _app.tsx și înlocuiți conținutul acestuia cu următoarele:

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

Apoi, redenumiți pages/index.js în pages/index.tsx . Aplicația dvs. Next.js este acum configurată corect pentru TypeScript.

Pasul 3: Creați o componentă React reutilizabilă

În acest moment, vă puteți pune proiectul la încercare afișând un conținut fals. În directorul de pagini locale, creați un fișier posts.tsx :

În acest fișier, veți introduce ceva text. Dacă următorul conținut apare în browser, veți ști că aplicația dvs. Next.js este configurată corect:

 export default function PostsPage() { return <h1>The posts page</h1>; }

În browser, navigați la „http://localhost:3000/posts”. Acum ar trebui să vedeți acest conținut inactiv:

După ce v-ați verificat configurația, următorul pas este crearea unei componente React de bază. În cele din urmă, veți folosi această componentă pentru a afișa o listă cu toate postările dvs. WordPress.

Este cea mai bună practică să adăugați toate componentele dvs. React într-un director dedicat. Având în vedere acest lucru, navigați la rădăcina proiectului și creați un folder de componente :

În acest director, creați un fișier post.tsx . O componentă React poate primi date de la componenta părinte prin elemente de recuzită ale componentei. În acest exemplu, veți transmite titlul și conținutul fiecărei postări către componenta de postare.

În TypeScript, puteți realiza acest lucru prin crearea unei interfețe pentru a mapa datele pe care doriți să le transmiteți. În fișierul posts.tsx , adăugați următoarele:

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

Acum aveți o componentă React reutilizabilă. Următorul pas este utilizarea acestei componente în pagina de postări.

Pasul 4: Afișează o listă de postări

Pentru a începe, deschideți fișierul pages/posts.tsx . În acest moment, veți furniza pur și simplu niște date false, pe care le veți afișa într-un format de listă:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

Puteți crea o listă de postări parcurgând în buclă matricea de postări. Acest lucru necesită să randați o componentă Post pentru fiecare articol:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Salvați modificările și închideți acest fișier. Apoi, mergeți la „http://localhost:3000/posts”:

Această filă ar trebui să afișeze acum o listă de postări false. După ce ați conectat Faust.js la back-end-ul WordPress, veți folosi această componentă React pentru a afișa o listă a postărilor din viața reală a site-ului dvs. web.

Pasul 5: Configurați cadrul Faust.js

În sfârșit, sunteți gata să configurați cadrul Faust.js. Pentru a începe, instalați dependențele de producție și dezvoltare rulând următoarele comenzi:

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

Apoi navigați la directorul rădăcină al proiectului. În interiorul acestui folder, creați un nou fișier faust.config.js :

Veți folosi acest fișier pentru a conecta Faust.js la back-end-ul dvs. WordPress. Acum puteți introduce următorul cod:

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

În interiorul acestui director, va trebui, de asemenea, să creați un fișier .env.local . Aceasta va păstra toate variabilele de mediu:

În .env.local , adăugați următorul cod. Asigurați-vă că înlocuiți site-ul dvs. cu propria adresă URL:

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

De asemenea, va trebui să înlocuiți YOUR_PLUGIN_SECRET cu secretul fără cap al site-ului dvs. Puteți găsi aceste informații navigând la Setări > Headless în tabloul de bord WordPress:

Faust.js va folosi acest secret fără cap pentru a-și autentifica solicitările către WordPress. Acest lucru face posibilă previzualizarea conținutului nefinalizat pe front-end.

Pasul 6: Configurați clientul GraphQL pentru Faust.js

Faust.js folosește GQty ca client GraphQL. Pentru a configura GQty, creați un fișier gqty.config.js în directorul rădăcină al proiectului:

Acum puteți deschide acest fișier pentru editare. În gqty.config.js , copiați și inserați următoarele:

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

Următorul pas este crearea unui client GQty, pe care îl veți folosi pentru a interoga datele site-ului dvs. În rădăcina proiectului, creați un nou director client . În interiorul acestui folder, creați un fișier index.ts care conține următorul cod:

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

Acum puteți salva modificările și închide fișierul index.ts . Acum că aveți toate piesele la locul lor, sunteți gata să generați schema GraphQL.

Pasul 7: Rulați Scriptul Generare

Următorul pas este adăugarea unui script de generare la fișierul package.json . Acest script va genera schema necesară pe baza structurii site-ului dvs. WordPress.

Pentru a adăuga acest script, navigați la folderul rădăcină al proiectului și deschideți fișierul package.json . Acum puteți adăuga scriptul de generare la primul bloc de cod:

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

Înainte de a rula acest script, va trebui să activați temporar Introspecția publică pentru site-ul dvs. web. În tabloul de bord WordPress, navigați la GraphQL > Setări . Apoi derulați la Activare introspecție publică și bifați caseta de selectare aferentă:

Faceți clic pe Salvare modificări . Acum puteți rula scriptul de generare introducând următoarea comandă în terminal:

 npm run generate

Acest script va crea un fișier client/schema.generated.ts . În acest moment, puteți dezactiva Introspecția publică în tabloul de bord WordPress.

Pasul 8: Definiți o componentă și un cârlig FaustProvider

Acum, trebuie să împachetați aplicația Next.js folosind componenta încorporată <FaustProvider> . Această componentă React Higher-Order va oferi lui Faust.js contextul de care are nevoie pentru a prelua și stoca datele în cache.

Pentru a realiza acest lucru, deschideți fișierul pages/_app.tsx al proiectului. Apoi, puteți înlocui conținutul acestuia cu următoarele:

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

Acum sunteți gata să interogați date din back-end-ul WordPress. Veți folosi cârligul usePosts , care oferă o interfață standard care preia o listă de postări din API-ul WordPress fără cap.

Deschideți directorul pages/posts.tsx și ștergeți întregul cod Lorem Lipsum . Apoi puteți implementa cârligul usePosts :

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Fișierul de schemă pe care l-ați generat exportă un tip Post. Aceasta înseamnă că puteți utiliza acest tip pentru a defini elementele de recuzită ale componentei Post. Pentru a accepta un post prop, deschideți fișierul components/post.tsx și adăugați următoarele:

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

Puteți specifica dacă doriți să primiți conținutul redat sau conținutul brut. În codul de mai sus, optați pentru conținut redat.

Pasul 9: Conectați Faust.js la site-ul dvs. WordPress

Pasul final este crearea unei legături între datele dvs. și componenta Post. Acest lucru necesită să adăugați o singură linie de cod la fișierul posts.tsx :

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

După efectuarea acestor modificări, încărcați „http://localhost:3000/posts” în browser. Ar trebui să vedeți acum o listă cu toate postările de pe site-ul dvs. WordPress:

Dacă postările dvs. nu apar, închideți procesul de rulare închizând terminalul. Apoi deschideți o nouă fereastră și utilizați comanda de modificare a directorului, astfel încât Terminalul să indice proiectul local Faust.js (de exemplu: cd /Users/username/faust-headless-demo ). Apoi puteți porni serverul de dezvoltare ( npm run dev ) și încercați să reîmprospătați pagina „http://localhost:3000/posts”.

Concluzie

Mulți dezvoltatori WordPress fără cap aleg să folosească un cadru. Cu toate acestea, când este timpul să previzualizați conținutul, o mulțime de cadre vă obligă să vă conectați la un site extern sau să vizualizați pagina de previzualizare într-un cadru.

Faust.js își propune să ofere o experiență de previzualizare coerentă, fără întreruperi. Când configurați acest cadru, veți putea să vă vizualizați conținutul folosind fluxul de lucru familiar WordPress. De asemenea, veți avea acces la seturile de instrumente cunoscute React și Node.js.

Aveți întrebări despre cadrul Faust.js? Anunțați-ne în secțiunea de comentarii de mai jos!