Käytä WordPressia nimettömänä CMS

Feb 2, 2026

Miten tehdään

Kuulin ensimmäisen päättömän CMS lähestymistapaa puhua Seurasin Twin Cities Drupal. Pidin ajatuksesta huolenaiheiden erottamisesta kirjoittamisen sisällön ja sen katselun välillä.

Paras web hosting-palveluita vuonna 2019

Olin jo kokenut kuinka helposti yksi palvelin voi mennä alas, ottaa pois kaikki sivustot se, mikä minuutteja tai tunteja sydämen pysähtyminen paniikkia (oli 24 minun). Olin myös nähnyt kuinka monoliittinen CMS-pohjainen sivusto voi kärsiä turvallisuuden kompromissi ja vie paljon vaivaa korjaus (joka kesti yli kaksi päivää palkatonta työtä). Joukolle sivujen ylläpito tarjoaja vaihtoehtoja, tutustu oppaan.

23 suuri esimerkkejä WordPress sivustot

Olin nähnyt edut CDN (sisällön jakelun verkot), jotka voivat tallentaa kuvan, ääni- ja videotiedostoja palvelimilla optimoitu nopea toimitus ja voi kopioida kyseiset tiedostot eri puolilla maailmaa nopeat toimitukset niille alueille tarvittaessa. Mitä jos koko sivuston voisi hyötyä tästä lähestymistavasta?

Tarvitset…

● tietokone, jossa on internet-yhteys (obvs)
● Koodieditori (Atomi tai VS-koodi)
● Komento linja kuori / pääte
● ASENNUSTA (voit ladata & amp; asentaa tässä )
● WordPress sivuston saada sisältöä. Jos sinulla ei ole sitä, voit käyttää WordPress.com-alustalla tai tätä Heroku rakentaa pack .
● lähdetiedostot alkaen GitHub .

Päästä alkuun

WordPress tulee ulos laatikosta loput API ja juuri sitä, mitä aiomme käyttää kyselemään tietojasi. Joten emme oikeastaan tarvitse mitään muuta! Meidän esityspaikka on täysin erillään meidän sisältöä sivuston, joten meidän ei tarvitse WordPress-teemat tai muuta muokkausta ulkopuolella muutaman (lisävaruste) lisäosia. Vaikka tietenkin voit lisätä nämä, jos haluat.

Poikkeus on, jos tarvitset mukautettuja metapetteja ylimääräisille sisällön alueille. Käytät todennäköisesti Advanced Erikoiskentät tekemään niin; voit lisätä kyseiset tiedot WordPress API Tämän laajennuksen asentaminen .

Käytä staattista sivuston generaattoria

Use WordPress as a headless CMS: Gatsby starter screen — Gatsby Oletuksena Starter näyttö

Nyt kun meillä on sisältöä lähde, nyt hakea tiedot ja näyttää sen käyttämällä staattisen sivuston generaattori. Omat aseesi tässä valtakunnassa on Gatsby , Erinomainen staattinen sivusto generaattori, joka on rakennettu JavaScript. (Katso nämä Verkkosivuston rakentaja poimii yksinkertaisia tapoja rakentaa sivuston.)

Jos etsit hyvä tapa rakentaa JavaScript taitoja ja oppia reagoivat juutu johonkin koodia, suosittelen yrittää Gatsby tehdä niin. Olen oppinut paljon itseäni pelaamalla sen kanssa.

Ensimmäinen, nyt asentaa komentorivi työkalu, jonka avulla voimme luoda Gatsby sivustoja:

npm install -global gatsby-cli

Nyt Siirry kansioon, johon haluat pitää sivustosi ja suorita tämä komento:

gatsby new blog

Tämä luo uuden kansion nimeltä 'blog' ja asenna Gatsby ja sen riippuvuudet tähän kansioon. Avaa kansion haluamallasi tekstieditorilla. Siellä saattaa tuntua paljon tiedostoja siellä. Älä huoli, me vain suoran muokkaamisen gatsby-config.js , gatsby-solmu.js tiedostot ja src Kansio, jossa mallit elävät.

Jos sinulla on paljon tiedostoja tallentaa, se kannattaa päivittäminen pilvivarasto .

Getting meidän sisältöä

Ensimmäinen askel haluamme tehdä, on hakea meidän sisältöä WordPress sivuston API.

Tehdä niin, aiomme asentaa Gatsby-Source-WordPress , Prewritten-laajennus WordPressille. Tämä osoittaa yksi tärkeimmistä syistä rakastan Gatsby - voit saada tietoja useista eri lähteistä. Kohiseva sivuston generaattoreita rajoittuvat käyttävät Markdown tiedostoja, mutta Gatsby on hyvin joustava.

Gatsby on ampua ekosysteemi on erittäin kypsä. On kuormien prewritten tapoja saada tietosi ja paljon muita fiksu toiminnallisuutta, joka tulee hyödyllinen myös.

Asenna plugin, ensimmäinen muutoshakemisto uuteen Gatsby-sivustoosi käyttämällä tätä komentoa: CD blogi .

Nyt suorita tämä komento: NPM Install --Save gatsbysource-wordpres s.

Kun se on tehnyt, on aika avata GATSBY-CONFIG.JS-tiedosto. Näet, että on olemassa jo joitakin perusasetukset paikallaan että Gatsby antaa meille oletuksena. Aiomme rakentaa siihen, että konfiguroidaan plugin täällä:

 module.exports = {
 siteMetadata: {
  otsikko: 'Gatsby Default Starter'
 },
 plugins: [
  "Gatsby-plugin-reagoida kypärä",
  {
   Resolve: "Gatsby-Source-WordPress",
   Vaihtoehdot: {
    baseurl: "my-wordpress-site.com",
    protokolla: "https",
    hostingWPCOM: väärä,
    USEACF: TOSI,
    searchAndReplaceContentUrls: {
     sourceUrl: "https://my-wordpress-site.com",
     korvaava: "https://my-static-site.com",
    }
   },
  },
 ],
}

Toimiko se?

Voit tarkistaa avaamalla päätelaitteen, kirjoittamalla Gatsby kehittää Ja katsella mitä tapahtuu. Sinua on varoitettu! Vaikka sait asetukset oikein, saat joitakin varoituksia muutenkin - tämä voi olla Gatsby etsiä sisältöä, jota et ole vielä kirjoitettu.

Voit nyt tarkastella Gatsby-käynnistin-selaimessa oletuksena.

  http: // localhost: 8000 /

View GraphiQL, in-selaimella IDE, tutkia sivustosi tiedot ja skeema.

  http: // localhost: 8000 / ___ graphql

Huomaa, että kehitysrakennusta ei ole optimoitu. Voit luoda tuotanto rakentaa, käyttää Gatsby rakentaa.

Jos Gatsby oletuksena starer (oikealla) ei ole mitä saat, tarkista WordPress-sivusto ei ole aliverkkotunnus, että se on ehdottomasti HTTPS tai HTTP ja että sinulla on sama asetukset.

Nyt voimme mennä http: // localhost: 8000 / ja katso Gatsby site!

Voimmeko kyselytyä tietojemme?

Olet ehkä huomannut, että ei ole WordPress sisältö tähän. Tämä johtuu siitä, että emme ole kertonut Gatsby mitä tehdä sitä vielä. Ennen kuin teemme sen, tarkistamme vain, että olemme todella saaneet sisällön Gatsbyn käytettävissä. Voit tehdä sen, käy tällä url:

  http: // localhost: 8000 / ___ GRAPHQL

Tämä sisäänrakennettu työkalu on nimeltään Graphiql ja on toinen salainen voima Gatsbyn.

GraphQL on samanlainen kuin muiden: se on tapa kyselyn tiedot. Mutta GraphQL: llä voit olla vuorovaikutuksessa tietosi kanssa paljon helpommin. Graphiql (visuaalinen IDE GRAPHQL) voi näyttää meille joitain näistä temppuista. Vasemmassa paneelissa, yritä kirjoittaa seuraavaa:

 {
 AllWorpPresspost {
  reunat {
   solmu {
    id
    etana
    Tila
    sapluuna
    muoto
   }
  }
 }
}

Tämä saattaa näyttää vähän kuin JSON mutta se ei ole. Se on uusi kyselykieli, jonka mielestäni yksi päivä korvaa suurelta osin levätä keinona kommunikoida API: n kanssa.

Mitä sait kun painat Ctrl + Enter in Graphiql? Olet toivottavasti nähnyt WordPress virkaa ja sivun oikeassa reunassa.

Olemme todella aio käyttää kyselyn meidän seuraava askel, joten säilytä se helposti! Haluat ehkä nähdä, mitä muita tietoja voit saada GraphiQL kun olet täällä. Jos haluat tehdä sen, yritä siirtää kohdistinta ja kirjoittamalla joko CTRL + Space ja / tai Ctrl + Enter. Joka paljastaa muille ryhmille sisältöä.

Joten, meillä on nyt sisällön Gatsby. Seuraavaksi meidän täytyy näyttää sen.

Näyttö meidän viestiä

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby kehitys 404 sivua, jossa näkyvät kaikki meidän WordPress virkaa

Tämän seuraavaan vaiheeseen aiomme hyödyntää gatsby-solmu.js tiedosto.

gatsby-solmu.js Onko tiedosto, jota voit käyttää vuorovaikutuksessa Gatsbyn "solmun API" kanssa. Täällä voi tarkistaa, miten sivustosi syntyy ja luoda sivuja, virkaa ja enemmän.

Aiomme kirjoittaa joitakin ohjeita täällä kertoa Gatsby mitä tekemistä meidän tiedot:

 const polku = vaatia ( `path`);

exports.createPages = ({graphql, boundActionCreators})
= & gt; {
 const {createPage} = boundActionCreators
 palata uuden Promise ((ratkaista, hylkää) = & gt; {
  graphql (
   "
   {
    allWordpressPost {
     reunat {
      solmu {
       id
       etana
       Tila
       sapluuna
       muoto
      }
     }
    }
   }
  "
 ) .Tämän jälkeen (tulos = & gt; {
   jos (tulos.errors) {
    konsoli.log (tulos.Errors)
    Hylkää (tulos.Errors)
   }

   const posttemplate = Path.resolve (`./src/templates/
post.js`)

   tulos.data.allwordpresspost.edges.foreach (reuna = & gt; {
    luo sivu({
     polku: `/ $ {edge.node.slug} /`
     komponentti: postTemplate,
     yhteydessä: {
      id: edge.node.id,
     },
    }))
   }))
   ratkaista()
  }))
 }))
}

Tämä koodi luo sivuja meidän GraphQL kyselyn ja jokaiselle sivulle se tulee käyttää mallia olemme määritelty ( /src/templates/post.js ). Joten seuraavaksi meidän on luotava kyseisen tiedoston!

Luo postimalli

Sisällä / src / kansio, luo kansio nimeltä malleja ja tiedoston sisällä sitä kutsutaan post.js . Lisää se tämä koodi:

 tuonti Reagoi osoitteesta 'reagoivat'
Tuo kypärä "React-Helmet"

luokan postemplate laajentaa reagoivaa #Ponent {
 render () {
  const post = this.props.data.wordpressPost;
  const Slug = this.props.data.wordpressPost.slug;

  Paluu (
   & lt; div & gt;
   & Lt; Kypärä title = { `$ {titleString} | $ {SiteTitle} `} / & gt;
   & lt; h1 vaarallinenSeinnerhtml = {{__html: post.title}} / & gt;
   & Lt; div dangerouslySetInnerHTML = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

viedä oletus pageTemplate

vienti const kysely = graphql`
 kysely currentPost ($ id: String!) {
  wordpressPost (id: {eq: $ id}) {
   nimi
   sisältö
   etana
  }
  site {
   Sitemetadata {
    nimi
   }
  }
}

Tämä käyttää eri GraphQL kyselyn saada tietoa erityiset post se on syöttämät gatsbynode.js Tiedosto, käytä sitten reagoida, jotta voit tehdä selaimeen.

Jos haluat nopeasti nähdä luettelon kaikista viesteistäsi, voit kirjoittaa http: // localhost: 8000 / A selaimen osoiteriville. Tämä vie sinut kehitykseen 404-sivulle, jossa luetellaan kaikki viestisi. Valitse jokin käydä siellä!

Seuraavat vaiheet

Olemme pintaraapaisu siitä, miten käyttää WordPress kuin päätön CMS ja toivon olen esitteli teitä mielenkiintoisia käsitteitä ja työkaluja, saatat pystyä käyttämään ja kokeilemaan tulevaisuudessa.

Siellä on paljon enemmän tätä tarinaa ja kollegoilleni ja olen blogged siitä laajasti indigo Tree . Olen myös kirjoittanut enemmän henkilökohtaiseen blogiin, herkullinen Reverie .

Pidä yhteyttä minuun näiden kanavien kautta ja Twitterissä kuulla jännittävää kehitystä Headless CMS: n maailmassa!

Tämä artikkeli on julkaistu alunperin kysymys 308 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 308 täällä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

40 Brilliant WordPress Tutorials
6 vinkit CRO menestystä WordPress
10 Great WordPress Plugins suunnittelijoille

Käytä WordPressia nimettömänä CMS

Päästä alkuun

Käytä staattista sivuston generaattoria

Getting meidän sisältöä

Toimiko se?

Voimmeko kyselytyä tietojemme?

Näyttö meidän viestiä

Luo postimalli

Seuraavat vaiheet

Miten tehdään - Suosituimmat artikkelit

Adobe XD: Auto-animate-ominaisuuden käyttäminen

Piirrä kontrastin teho

Adobe XD: n avulla voit luoda mikro-vuorovaikutuksia

Vesimulaatioiden luominen

7 Top Vinkkejä oman liiketoiminnan aloittamiseen

Hanki päänsä reagoida näiden viiden tekijän kanssa

Kuinka siirtyä DAZ Studio ja Zbrush

13 Vinkkejä VR-pelaamisen maailman tekemiseen

Luokat