Użyj WordPress jako bezgłowego CMS

Sep 15, 2025

Jak

Po raz pierwszy usłyszałem o bezgłowym podejściu CMS w rozmowie, jak oglądałem z dwustronnych miast. Podobał mi się pomysł rozdzielenia obaw między treścią tworzącą i oglądać go.

Najlepsze usługi hostingowe w 2019 roku

Doświadczyłem już, jak łatwo jeden serwer może zejść, wyjmując wszystkie miejsca na nim, co prowadzi do minut lub godzin paniczki w sercach (było 24 na moich). Widziałem również, jak monolityczna strona internetowa oparta na CMS może cierpieć na kompromis bezpieczeństwa i wziąć dużo wysiłku na naprawę (co zajęło mi więcej niż dwa dni nieodpłatnej pracy). Dla zakresu hosting Opcje dostawcy, sprawdź nasz przewodnik.

23 Świetne przykłady stron WordPress

Widziałem korzyści płynących z CDNS (sieci dostarczania treści), które mogą przechowywać obraz, pliki audio i wideo na serwerach zoptymalizowanych do szybkiej dostawy i mogą zduplikować te pliki na całym świecie do szybkiej dostawy do tych regionów w razie potrzeby. Co jeśli cała strona może skorzystać z tego podejścia?

Będziesz potrzebować…

● Komputer z połączeniem internetowym (oczywiste)
● Edytor kodu (kod Atom lub VS)
● Powłoka linii poleceń / terminal
● Zainstalowana wersja Node.js (możesz pobrać i pobrać tutaj )
● Witryna WordPress, z której można uzyskać zawartość. Jeśli go nie masz, możesz użyć platformy WordPress.com lub to Pakiet budowy Heroku .
● Pliki źródłowe z Githuba .

Pierwsze kroki

WordPress wychodzi z pudełka z reszta API i to jest, że będziemy używać do zapytania o swoje dane. Więc nie potrzebujemy niczego innego! Nasza strona wyświetlania jest całkowicie oddzielona od naszej witryny treści, więc nie będziemy potrzebować Tematy WordPress. lub dowolne inne dostosowanie poza kilkoma (opcjonalnymi) wtyczkami. Chociaż oczywiście możesz je dodać, jeśli chcesz.

Wyjątkiem jest, jeśli potrzebujesz niestandardowych pól meta dla dodatkowych obszarów treści. Prawdopodobnie używasz zaawansowanych niestandardowych pól do tego; Możesz dodać te dane do interfejsu API WordPress Instalowanie tej wtyczki. .

Użyj generatora witryn statycznych

Use WordPress as a headless CMS: Gatsby starter screen — Domyślny ekran startowy Gatsby

Teraz, gdy mamy źródło treści, pobraćmy dane i wyświetlmy go za pomocą statycznego generatora witryny. Moja broń wyboru w tej dziedzinie jest Gatsby. , doskonały statyczny generator witryny, który jest zbudowany z JavaScript. (Zobacz te. Kreator strony internetowej wybiera proste sposoby zbudowania witryny.)

Jeśli szukasz dobrego sposobu na budowę umiejętności JavaScript i nauczyć się reagować, utknąłem w jakimś kodzie, bardzo polecam próbowanie Gatsby, aby to zrobić. Dowiedziałem się dużo, bawiąc się z tym.

Najpierw zainstalujmy narzędzie wiersza poleceń, które pozwala nam tworzyć strony Gatsby:

npm install -global gatsby-cli

Teraz przejdź do folderu, w którym chcesz zachować witrynę i uruchomić to polecenie:

gatsby new blog

Spowoduje to utworzenie nowego folderu o nazwie "Blog" i zainstalowanie Gatsby i jej zależności w tym folderze. Otwórz ten folder w swoim ulubionym edytorze tekstu. Może być tam wiele plików. Nie martw się, będziemy bezpośrednio edytować gatsby-config.js. , gatsby-node.js. Pliki i src. Folder, w którym żyją nasze szablony.

Jeśli masz wiele plików do przechowywania, warto aktualizować magazyn w chmurze .

Zdobycie naszej treści

Pierwszym krokiem, który chcemy podjąć, jest pobranie naszej zawartości z interfejsu API WordPress.

Aby to zrobić, zamierzamy zainstalować Gatsby-source-WordPress , przedwczesna wtyczka do WordPress. Ilustruje jeden z głównych powodów, dla których kocham Gatsby - możesz uzyskać swoje dane z różnych źródeł. Wiele statycznych generatorów witryn jest ograniczony do użycia plików Markdown, ale Gatsby jest bardzo elastyczny.

Ekosystem wtyczki Gatsby jest bardzo dojrzały. Istnieją mnóstwo wstępnych sposobów uzyskania danych i wielu innych sprytnych funkcjonalności, które są również przydatne.

Aby zainstalować wtyczkę, najpierw zmień katalog do nowej witryny Gatsby przy użyciu tego polecenia: Blog CD. .

Teraz uruchom to polecenie: NPM Install --Save Gatsbysource-Wordpres s.

Po zakończeniu, nadszedł czas, aby otworzyć plik Gatsby-config.js. Zobaczysz, że istnieje już kilka podstawowych konfiguracji, które Gatsby daje nam domyślnie. Będziemy budować na tym, aby skonfigurować naszą wtyczkę tutaj:

 MODULE.EXPORTS = {
 SiteMetadata: {
  Tytuł: "Domyślny rozrusznik Gatsby",
 },
 Wtyczki: [
  "Gatsby-Plugin-React-Helmet",
  {
   Rozwiązuj: "Gatsby-Source-WordPress",
   Opcje: {
    Baseurl: "My-lubpress-site.com",
    Protokół: "HTTPS",
    HostingWPCOM: FAŁSZ,
    UseAcf: True,
    SearchandReplaceConTenturls: {
     SourceCurl: "https://my-lubpress-site.com",
     wymiennik: "https://my-static-site.com",
    }
   },
  },
 ],
}

Zadziałało?

Możesz sprawdzić, otwierając terminal, pisanie Rozwój Gatsby. i obserwuj, co się dzieje. Być ostrzeżonym! Nawet jeśli masz poprawne ustawienia, dostaniesz jakieś ostrzeżenia w każdym razie - może to być Gatsby, szukając treści, których jeszcze nie napisałeś.

Teraz możesz wyświetlić domyślne domyślne Gatsby-Starter w przeglądarce.

  http: // localhost: 8000 /

Wyświetl grafiql, IDE w przeglądarce, aby zbadać dane i schemat witryny.

  http: // localhost: 8000 / ___ Graphql

Zauważ, że budowa rozwoju nie jest zoptymalizowana. Aby utworzyć budowę produkcji, użyj budowy Gatsby.

Jeśli domyślny gatsby (po prawej) nie jest to, co dostajesz, sprawdź, czy witryna WordPress nie jest na poddonomianie, że jest na pewno korzystając z HTTPS lub HTTP i że masz to samo w ustawieniach.

Teraz możemy przejść do http: // localhost: 8000 / i zobacz naszą stronę Gatsby!

Czy możemy zapytać nasze dane?

Być może zauważyłeś, że nie ma tu treści WordPress. Dzieje się tak dlatego, że nie powiedzieliśmy Gatsby, co z tym zrobić. Zanim to zrobimy, po prostu sprawdź, że mamy naszą treść dostępną do GatSBY. Aby to zrobić, odwiedź ten adres URL:

  http: // localhost: 8000 / ___ Graphql

Ten wbudowany narzędzie nazywany jest grafiql i jest kolejną tajną mocą Gatsby.

Graphql jest podobny do odpoczynku: jest to sposób na dane zapytania. Ale z Graphql możesz wchodzić w interakcje z twoimi łatwiej łatwiejszymi. Graphiql (wizualny IDE dla Graphql) może pokazać nam niektóre z tych sztuczek. Na lewym panelu spróbuj wpisać:

 {
 AllWordressPost {
  krawędzie {
   węzeł {
    ID
    ślimak
    status
    szablon
    format
   }
  }
 }
}

To może wyglądać trochę jak JSON, ale nie jest. To nowy język zapytania, który myślę, że pewnego dnia będzie w dużej mierze zastąpić odpoczynek jako sposób komunikowania się z API.

Co dostałeś po naciśnięciu Ctrl + Enter w Graphiql? Mam nadzieję, że zobaczysz swoje posty wordpress i stronę po prawej stronie ekranu.

W rzeczywistości będziemy korzystać z tego zapytania w naszym następnym kroku, więc trzymaj go przydatny! Możesz zobaczyć, jakie inne dane można uzyskać z Graphiql, gdy jesteś tutaj. Jeśli chcesz to zrobić, spróbuj przesunąć kursor wokół i wpisując Ctrl + Space i / lub Ctrl + Enter. To ujawni inne grupy treści.

Więc mamy teraz treść w GatSBY. Następnie musimy go wyświetlić.

Wyświetl nasze posty

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Strona Wyświetlono wszystkie nasze posty WordPress

W tym następnym kroku będziemy korzystać z gatsby-node.js. plik.

gatsby-node.js. jest plikiem, którego można użyć do interakcji z "węzłem węzł" GatSBY. Tutaj możesz kontrolować, jak twoja witryna jest generowana i tworzyć strony, posty i więcej.

Piszę tutaj instrukcje, aby powiedzieć Gatsby, co zrobić z naszymi danymi:

 Const Path = wymagać (ścieżka ");

EXPORTS.Createpages = ({Graphql, ConnectatorCreatory})
= & gt; {
 Const {Creatpage} = ContactatorCreatory
 zwróć nową obietnicę ((rozwiązać, odrzucić) = & gt; {
  Graphql (
   `
   {
    AllWordressPost {
     krawędzie {
      węzeł {
       ID
       ślimak
       status
       szablon
       format
      }
     }
    }
   }
  `
 ) .then (wynik = & gt; {
   if (exssish.errors) {
    Console.log (Ressaged.erors)
    Odrzuć (wynik.
   }

   Const PostTemplate = PATH.Resolve (`./src/templates/
post.js`)

   Rezultat.Data.allWordrespost.edges.Foreach (Edge = & GT; {{
    Stwórz stronę({
     ścieżka: `/ $ {Edge.node.slug} /`,
     Komponent: PostTemplate,
     kontekst: {
      ID: Edge.node.id,
     },
    })
   })
   rozwiązać()
  })
 })
}

Ten kod tworzy strony z naszej zapytania Graphql i dla każdej strony użyje szablonu, który zdefiniowaliśmy ( /src/templates/post.js. ). Więc dalej musimy stworzyć ten plik!

Utwórz szablon pocztowy

Wewnątrz / SRC / folder należy utwórz folder o nazwie szablony i plik wewnętrzny post.js. . Dodaj do niego Ten kod:

 Import reaguje z "reagowania"
Importuj kask z "reagowania hełmu"

Klasa PostTemplate rozszerza React.comPonent {
 renderowanie() {
  Const Post = this.props.data.wordressPost;
  const slug = this.props.data.wordressPost.slug;

  powrót (
   & lt; div & gt;
   & LT; Helmet Title = {`$ {TitLestring} | $ {sitetitle} `} / & gt;
   & LT; H1 DangerlySetinnerHTML = {{__HTML: Post.title}} / & GT;
   & lt; Div DangerlySetinnerHTML = {{__HTML: Post.Content}} / & GT;
   & lt; / div & gt;
  )
 }
}

Eksportuj domyślny pagetemplate.

Eksportuj Query = Graphql`
 Query CurrentPOST ($ ID: String!) {
  WordPressPost (ID: {EQ: $ ID}) {
   tytuł
   zawartość
   ślimak
  }
  teren {
   sitemetadata {
    tytuł
   }
  }
}

Wyznacza to inne zapytanie Graphql, aby uzyskać dane o określonym stanowisku, który został karmiony przez gatsbynode.js. Plik, a następnie używa reakcji, aby wykonać to w przeglądarce.

Jeśli chcesz szybko zobaczyć listę wszystkich swoich postów, możesz wpisać http: // localhost: 8000 / a na pasek adresu przeglądarki. To zabierze Cię na stronę Rozwój 404, która zawiera listę wszystkich swoich postów. Kliknij jeden, aby go odwiedzić!

Następne kroki

Podrapaliśmy się na powierzchnię, jak korzystać z WordPress jako bezgłowych CMS i mam nadzieję, że wprowadziłem Cię do pewnych ciekawych koncepcji i narzędzi, które możesz być w stanie wykorzystać i eksperymentować w przyszłości.

W tej historii jest o wiele więcej do tej historii i moich kolegów i jestem blogowani o to intensywnie Drzewo indygo . Napisałem też więcej na moim osobistym blogu, Pyszny reverie. .

Prosimy o kontakt ze mną za pomocą tych kanałów i na Twitterze, aby usłyszeć bardziej ekscytujące rozwój w świecie bezgłowych CMS!

Ten artykuł został pierwotnie opublikowany w wydaniu 308 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 308 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

40 Brilliant WordPress Tutoriale
6 najlepszych wskazówek na sukces CRO w WordPress
10 Świetne wtyczki WordPress dla projektantów

Użyj WordPress jako bezgłowego CMS

Pierwsze kroki

Użyj generatora witryn statycznych

Zdobycie naszej treści

Zadziałało?

Czy możemy zapytać nasze dane?

Wyświetl nasze posty

Utwórz szablon pocztowy

Następne kroki

Jak - Najpopularniejsze artykuły

Jak uniknąć Amazon Prime Day 2020 Fail

Utwórz chmury z Fumefx dla 3DS max

Dodaj animacje UI na witrynę

Jak malować jak XIX-wieczny master

Jak zaprojektować rysunki graficzne

Utwórz efekt tekstu chwiejnego za pomocą JavaScript

4 Wskazówki dotyczące optymalizacji obrazu

Jak malować atmosferyczny portret w Photoshopie

Kategorie