Használja a WordPress fej nélküli CMS-t

Sep 12, 2025

kézikönyv

Először hallottam a fejetlen CMS-megközelítésről egy beszélgetésben, amit Drupal ikervárosokról figyeltem. Tetszett az ötlet, hogy a szerzői tartalom és a megtekintés közötti aggodalmak szétválasztása.

A legjobb web hosting szolgáltatások 2019-ben

Már megtapasztaltam, hogy könnyedén egy szerver leeshet, és kivéve az összes webhelyet, ami perceket vagy órányi szívmegállós pánikhoz vezet (24 volt az enyém). Azt is láttam, hogy egy monolitikus CMS-alapú helyszín olyan biztonsági kompromisszumot szenvedhet, és sok erőfeszítést tesz a javításra (ami több mint két napos fizetés nélküli munkát végzett). Egy sor web hosting Szolgáltató opciók, nézd meg útmutatójukat.

23 nagyszerű példa a Wordpress weboldalakra

Láttam a CDNS (tartalomszállító hálózatok) előnyeit, amelyek a gyors szállításhoz optimalizált kiszolgálókon, audió- és videofájlokat tárolhatnék, és szükség esetén megismételhetik ezeket a fájlokat a gyors szállítás érdekében. Mi van, ha az egész webhelyed részesülhetne e megközelítésből?

Szükséged lesz…

● Egy internetkapcsolattal rendelkező számítógép (obs)
● kódszerkesztő (Atom vagy VS kód)
● A parancssori héj / terminál
● A NODE.JS telepített verziója (letöltheti & amp; telepítheti itt )
● A Wordpress webhely a tartalom eléréséhez. Ha nincs ilyen, használhatja a WordPress.com platformot vagy ezt Heroku épít csomag .
● A forrásfájlok Githubból .

Elkezdeni

WordPress jön ki a dobozból a többi API-vel, és ez az, amit fogunk használni az adatok lekérdezéséhez. Tehát nem igazán szükségünk van másra! Kijelzőhelyünk teljesen elkülönül a tartalom webhelyünktől, így nem lesz szükségünk WordPress témák vagy bármely más testreszabás néhány (opcionális) bővítményen kívül. Bár természetesen hozzáadhatod ezeket, ha akarod.

A kivétel az, ha egyedi meta mezőkre van szüksége az extra tartalomterületekhez. Valószínűleg a fejlett egyéni mezőket használja erre; Hozzáadhatja ezt az adatokat a WordPress API-hez A plugin telepítése .

Használjon statikus helyfejlesztőt

Use WordPress as a headless CMS: Gatsby starter screen — A Gatsby alapértelmezett indító képernyő

Most, hogy van tartalmi forrásunk, kérjük, olvassuk be az adatokat, és megjelenítsük egy statikus helyfejlesztő segítségével. A te fegyverem ebben a területen van Gatsby , Kiváló statikus hely-generátor, amely JavaScript-mel épült. (Lásd ezeket weboldal építője a webhely építésének egyszerű módjait választja.)

Ha jó módot keresel a JavaScript készségeire építve, és megtanulod, hogy egy bizonyos kódba ragadt, nagyon ajánlom a Gatsby próbálkozását. Sokat megtanultam magammal játszani.

Először telepítsünk egy parancssori eszközt, amely lehetővé teszi számunkra, hogy Gatsby webhelyeket hozzunk létre:

npm install -global gatsby-cli

Most, keresse meg a mappát, ahol meg szeretné tartani webhelyét, és futtatja ezt a parancsot:

gatsby new blog

Ez létrehoz egy új mappát, az úgynevezett "blog", és telepíti a Gatsby és annak függőségeit a mappa. Nyissa meg ezt a mappát a kedvenc szövegszerkesztőben. Úgy tűnik, hogy sok fájl van ott. Ne aggódj, csak közvetlenül szerkesztünk gatsby-config.js , gatsby-node.js fájlok és a src Mappa, amely az, ahol a sablonok élnek.

Ha van egy csomó fájlt tárolni, érdemes frissíteni felhő tároló .

A tartalom megszerzése

Az első lépés azt akarjuk, hogy az, hogy letölteni a tartalmat a WordPress webhely API-t.

Ehhez telepítjük Gatsby-forrás-wordpress , a WordPress prirtitten plugin. Ez szemlélteti az egyik fő okot, amit szeretek Gatsby - kaphat adatokat különböző különböző forrásokból. Sok statikus site generátor korlátozódik a védjegyfájlok használatára, de a Gatsby nagyon rugalmas.

Gatsby plugin ökoszisztémája nagyon érett. Vannak rengeteg erõs módja annak, hogy megkapják az adatokat és sok más okos funkciót, amely hasznos.

A plugin telepítéséhez először módosítsa a könyvtárat az új Gatsby webhelyre a parancs használatával: CD-blog .

Most futtassa ezt a parancsot: NPM Install --Save GatsBysource-Wordpres s.

Ha ez megtörtént, itt az ideje megnyitni a Gatsby-config.js fájlt. Látni fogja, hogy van olyan alapvető beállítás, amelyet a Gatsby alapértelmezés szerint ad nekünk. Azt fogjuk építeni, hogy beállítjuk a pluginunkat itt:

 modul.exports = {
 siteMetadata: {
  Cím: "Gatsby alapértelmezett starter",
 },
 Plugins: [
  "Gatsby-plugin-reakt-sisak",
  {
   Megoldás: "Gatsby-Source-Wordpress",
   lehetőségek: {
    BaseURL: "My-wordpress-Site.com",
    Protokoll: "HTTPS",
    hostingwpcom: hamis,
    USEACF: Igaz,
    SearchAndrePlacecontenturls: {
     SourceURL: "https://my-wordpress-site.com",
     Képviselésburkolás: "https://my-static-site.com",
    }
   },
  },
 ],
}

Működött?

Ellenőrizheti a terminál megnyitásával, gépeléssel Gatsby fejlődik és nézd meg, mi történik. Figyelmeztetni kell! Még ha megvan a beállítások helyes, akkor is figyelmeztetéseket kapsz - ez lehet Gatsby, aki olyan tartalmat keres, amelyet még nem írt.

Mostantól képesek megtekinteni a Gatsby-Starter-alapértelmezett értéket a böngészőben.

  http: // localhost: 8000 /

A Graphiql, a böngésző IDE megtekintése, a webhely adatainak és sémájának felfedezéséhez.

  http: // localhost: 8000 / ___ Graphql

Ne feledje, hogy a fejlesztés építése nem optimalizált. Termelési építés létrehozásához használja a Gatsby építését.

Ha a Gatsby alapértelmezett starer (jobbra) nem az, amit kapsz, ellenőrizze, hogy a WordPress webhely nem egy aldomainen van, hogy határozottan https vagy http használata, és hogy ugyanaz a beállítások.

Most mehetünk a http: // localhost: 8000 / és lásd a Gatsby webhelyünket!

Tudjuk lekérdezni az adatokat?

Lehet, hogy észrevette, hogy itt nincs WordPress tartalom. Ez azért van, mert nem mondtuk meg Gatsby-nak, hogy mit tegyünk vele. Mielőtt ezt megtennénk, csak ellenőrizze, hogy ténylegesen megkaptuk a tartalmunkat a Gatsby számára. Ehhez látogassa meg ezt az URL-t:

  http: // localhost: 8000 / ___ Graphql

Ezt a beépített eszközt Graphiql-nak hívják, és a Gatsby egy másik titkos ereje.

A GraphQL hasonló a pihenéshez: Ez a módja annak lekérdezése, hogy lekérdezzük az adatokat. De a Graphql segítségével sokkal könnyebben kölcsönhatásba léphet az adatokkal. A GraphiqL (A Graphql vizuális IDE) megmutatja nekünk ezeket a trükköket. A bal oldalon próbálja meg gépelni a következőket:

 {
 AllwordPressPost {
  élek {
   csomópont {
    idézés
    meztelen csiga
    állapot
    sablon
    formátum
   }
  }
 }
}

Ez kicsit úgy néz ki, mint a JSON, de ez nem. Ez egy új lekérdezési nyelv, amit azt hiszem, egy nap nagymértékben helyettesíti a pihenést az API-vel való kommunikáció módjaként.

Mit kapott, amikor megnyomta a CTRL + ENTER-t a GraphiqL-ben? Remélhetőleg látta a WordPress hozzászólásokat és az oldalt a képernyő jobb oldalán.

Valójában ezt a lekérdezést fogjuk használni a következő lépésünkben, ezért tartsd meg, hogy hasznos legyen! Előfordulhat, hogy meg szeretné tekinteni, hogy milyen más adatokat kaphat a grafiql-hez, amíg itt vagy. Ha ezt szeretné megtenni, próbálja meg mozgatni a kurzort, és írja be a Ctrl + Space és / vagy a Ctrl + Enter gombot. Amely más tartalomcsoportokat fog felmutatni.

Tehát most van tartalmunk a Gatsby-ben. Ezután meg kell mutatnunk.

Megjeleníti a hozzászólásainkat

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 oldal, amely az összes WordPress hozzászólást mutatja

Ehhez a következő lépésre használjuk a gatsby-node.js fájl.

gatsby-node.js olyan fájl, amelyet használhat, hogy kölcsönhatásba léphessen a Gatsby "csomópont API" -jával. Itt ellenőrizheti, hogy webhelyét hozza létre, és hozzon létre oldalakat, hozzászólásokat és így tovább.

Itt fogunk írni néhány utasítást, hogy megmondja Gatsby, hogy mit tegyen az adatokkal:

 CONST PATH = igényel (`path");

exportálás. Createpages = ({Graphql, BoundctionCreators})
= & gt; {
 CONST {CREATEPAGE} = BoundActionCreators
 Új ígéret visszaadása ((megoldja, elutasítja) = & gt; {
  Graphql (
   `
   {
    AllwordPressPost {
     élek {
      csomópont {
       idézés
       meztelen csiga
       állapot
       sablon
       formátum
      }
     }
    }
   }
  `
 ) .hen (eredmény = & gt; {
   ha (eredmény.Errors) {
    console.log (eredmény.Errors)
    Elutasítás (Ered.Errors)
   }

   CONST POSTTEMLATE = PATH.RESOLVE (`./SRC/TEMPLATES/
post.js`)

   result.data.allwordpresspost.edges.foreach (él = & gt; {
    Oldal létrehozása({
     PATH: `/ $ {EDDE.NODE.SLUG} /`,
     Komponens: PostTemplate,
     kontextus: {
      ID: EDDE.NODE.ID,
     },
    })
   })
   elhatározás()
  })
 })
}

Ez a kód létrehozza az oldalakat a Graphql lekérdezéséről és minden oldalra, amelyet egy definiált sablont használ ( /src/templates/post.js ). Tehát a következő, meg kell teremteni ezt a fájlt!

Hozzon létre postsablont

A / SRC / mappa belsejében hozzon létre egy mappát sablonok és egy fájl belsejében post.js . Add hozzá ez a kód:

 Import reagál a "reagál"
import sisak a "reagálási sisak"

Az osztály PostTemplate kiterjeszti a reagálást {
 Vakol() {
  const post = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.slug;

  Visszatérés (
   & lt; div & gt;
   & lt; sisak cím = {`$ {titleestring} | $ {sitetitle} `} / & gt;
   & lt; h1 veszélyes andaleysetinnerhtml = {{__html: post.title}} / & gt;
   & lt; div veszélyesensetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Az alapértelmezett pagetemplate exportálása

Export Const Query = Graphql
 Query Appost ($ ID: string!) {
  WordPressPost (ID: {EQ: $ ID}) {
   cím
   tartalom
   meztelen csiga
  }
  webhely {
   siteMetadata {
    cím
   }
  }
}

Ez egy másik Graphql lekérdezést használ, hogy adatokat kapjon az adott hozzászólásról, amelyet a gatsbynode.js fájl, majd úgy használja, hogy reagáljon a böngészőbe.

Ha gyorsan szeretné látni az összes hozzászólás listáját, beírhatja http: // localhost: 8000 / a a böngésző címsorába. Ez egy olyan fejlesztési 404 oldalra vezet, amely felsorolja az összes hozzászólást. Kattintson az egyikre, hogy meglátogassa meg!

Következő lépések

Megkarcoltuk a WordPress használatának felületét, mint fej nélküli CMS-t, és remélem, bemutattam néhány érdekes fogalmat és eszközöket, amelyeket a jövőben lehet használni és kísérletezni.

Sokkal többet lehet erre a történetre és a kollégáimra, és széles körben blogoltam Indigó fa . Én is többet írtam a személyes blogomról, Ízletes reverie .

Kérjük, tartsa velem a csatornákon keresztül és a Twitteren, hogy meghallgasson több izgalmas fejleményeket a fej nélküli CMS világában!

Ezt a cikket eredetileg a 308. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon 308 kérdést itt vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

40 Brilliant Wordpress oktatóanyagok
6 Legjobb tipp a Cro Sikerre a WordPress-ben
10 Nagyszerű Wordpress plugins a tervezők számára

Használja a WordPress fej nélküli CMS-t

Elkezdeni

Használjon statikus helyfejlesztőt

A tartalom megszerzése

Működött?

Tudjuk lekérdezni az adatokat?

Megjeleníti a hozzászólásainkat

Hozzon létre postsablont

Következő lépések

kézikönyv - Most Popular Articles

Hogyan oldja meg a trükkös tervezési rövid

10 tipp az Apple fotók alkalmazásának elsajátításához

4 tipp a fejlesztői készségek fejlesztéséhez

Hogyan befolyásolhatjuk a Google ranglistáját a tartalommal

A Pro Útmutató 3D-s textúrák létrehozásához

A karikatúra készségeinek fejlesztése

Hogyan lehet kombinálni a festő akvarellkészleteit

Hozzon létre játékkész textúrákat az anyagfestővel

Kategóriák