Gunakan WordPress sebagai CMS tanpa kepala

Sep 15, 2025

Bagaimana caranya

Saya pertama kali mendengar tentang pendekatan CMS tanpa kepala dalam pembicaraan yang saya tonton dari kota kembar Drupal. Saya menyukai gagasan pemisahan kekhawatiran antara konten penulis dan melihatnya.

Layanan Web Hosting Terbaik di 2019

Saya sudah mengalami betapa mudahnya satu server dapat turun, mengambil semua situs di atasnya, yang mengarah ke menit atau jam panik heart-hentikan (ada 24 di tambang). Saya juga telah melihat bagaimana sebuah situs berbasis CMS monolitik dapat menderita kompromi keamanan dan mengambil banyak upaya untuk memperbaiki (yang membawaku lebih dari dua hari pekerjaan yang belum dibayar). Untuk berbagai hosting web. Pilihan penyedia, lihat panduan kami.

23 Contoh bagus dari situs web WordPress

Saya telah melihat manfaat CDN (jaringan pengiriman konten) yang dapat menyimpan file gambar, audio dan video Anda di server yang dioptimalkan untuk pengiriman cepat dan dapat menduplikasi file-file tersebut di seluruh dunia untuk pengiriman yang cepat ke wilayah tersebut jika diperlukan. Bagaimana jika seluruh situs web Anda dapat mengambil manfaat dari pendekatan ini?

Anda akan perlu…

● Komputer dengan koneksi Internet (OBV)
● editor kode (atom atau kode vs)
● Shell baris perintah / terminal
● versi node.js terbaru diinstal (Anda dapat mengunduh & amp; instal sini )
● Situs WordPress untuk mendapatkan konten. Jika Anda tidak memilikinya, Anda dapat menggunakan platform WordPress.com atau ini Heroku Build Pack. .
● File sumber dari github. .

Mulai

WordPress keluar dari kotak dengan API sisanya dan itulah yang akan kita gunakan untuk menanyakan data Anda. Jadi kita tidak benar-benar membutuhkan yang lain! Situs tampilan kami benar-benar terpisah dari situs konten kami, jadi kami tidak perlu Tema WordPress. atau kustomisasi lain di luar plugin beberapa (opsional). Meskipun tentu saja Anda dapat menambahkan ini jika Anda mau.

Pengecualiannya adalah jika Anda memerlukan bidang META khusus untuk area konten tambahan. Anda mungkin menggunakan bidang khusus canggih untuk melakukannya; Anda dapat menambahkan data itu ke API WordPress oleh Menginstal plugin ini .

Gunakan generator situs statis

Use WordPress as a headless CMS: Gatsby starter screen — Layar Starter Default Gatsby

Sekarang kami memiliki sumber konten kami, mari kita ambil data dan menampilkannya menggunakan generator situs statis. Senjata pilihan saya di ranah ini adalah Gatsby. , generator situs statis yang sangat baik yang dibangun dengan JavaScript. (Lihat ini Pembangun Situs Web Pilih untuk cara sederhana untuk membangun situs.)

Jika Anda mencari cara yang baik untuk membangun keterampilan JavaScript Anda dan belajar bereaksi dengan terjebak ke dalam beberapa kode, saya sangat merekomendasikan mencoba Gatsby untuk melakukannya. Saya telah belajar banyak diri dengan bermain dengannya.

Pertama, mari kita instal alat baris perintah yang memungkinkan kita untuk membuat situs Gatsby:

npm install -global gatsby-cli

Sekarang, navigasikan ke folder tempat Anda ingin menyimpan situs Anda dan menjalankan perintah ini:

gatsby new blog

Ini akan membuat folder baru yang disebut 'blog' dan instal Gatsby dan dependensinya ke folder ini. Buka folder ini di editor teks favorit Anda. Tampaknya mungkin ada banyak file di sana. Jangan khawatir, kami hanya akan langsung mengedit gatsby-config.js. , gatsby-node.js. file, dan src folder, yang mana template kami hidup.

Jika Anda punya banyak file untuk disimpan, ada baiknya meningkatkan penyimpanan awan .

Mendapatkan konten kami

Langkah pertama yang ingin kami ambil adalah mengambil konten kami dari API situs WordPress.

Untuk melakukan itu, kita akan menginstal gatsby-sumber-wordpress , sebuah plugin Prewritten untuk WordPress. Ini menggambarkan salah satu alasan utama saya suka Gatsby - Anda bisa mendapatkan data Anda dari berbagai sumber yang berbeda. Banyak generator situs statis dibatasi untuk menggunakan file Markdown tetapi Gatsby sangat fleksibel.

Ekosistem plugin Gatsby sangat matang. Ada banyak cara sebelumnya untuk mendapatkan data Anda dan banyak fungsi pintar lainnya yang berguna juga.

Untuk menginstal plugin, ubah direktori pertama ke situs Gatsby baru Anda dengan menggunakan perintah ini: Blog CD. .

Sekarang jalankan perintah ini: npm instal --save gatsbysource-wordpres s.

Setelah selesai, saatnya untuk membuka file gatsby-config.js. Anda akan melihat bahwa sudah ada beberapa pengaturan dasar di tempat yang Gatsby memberi kami secara default. Kami akan membangunnya untuk mengkonfigurasi plugin kami di sini:

 module.exports = {
 Sitemetadata: {
  Judul: 'Gatsby Default Starter',
 },
 Plugin: [
  'gatsby-plugin-react-helm',
  {
   Putuskan: "Gatsby-Source-WordPress",
   pilihan: {
    basah: "my-wordpress-site.com",
    Protokol: "HTTPS",
    HostingWPCOM: Salah,
    USEACF: Benar,
    SearchAndReplacecontenturls: {
     Sumoururl: "https://my-wordpress-site.com",
     penggantian: "https://my-static-site.com",
    }
   },
  },
 ,
}

Apa itu bekerja?

Anda dapat memeriksa dengan membuka terminal Anda, mengetik Gatsby berkembang dan perhatikan apa yang terjadi. Diperingatkan! Bahkan jika Anda mendapatkan pengaturan Anda benar, Anda akan mendapatkan beberapa peringatan - ini mungkin gatsby mencari konten yang belum Anda tulis.

Anda sekarang dapat melihat gatsby-starter-default di browser.


    http: // localhost: 8000 /

Lihat Graphiql, IDE di browser, untuk menjelajahi data dan skema situs Anda.


  http: // localhost: 8000 / ___ graphql

Perhatikan bahwa pembangunan pengembangan tidak dioptimalkan. Untuk membuat build produksi, gunakan Gatsby Build.

Jika Starer Default Gatsby (kanan) bukanlah yang Anda dapatkan, periksa situs WordPress Anda tidak pada subdomain, bahwa itu pasti menggunakan HTTPS atau HTTP dan Anda memiliki hal yang sama dalam pengaturan Anda.

Sekarang kita bisa pergi ke http: // localhost: 8000 / dan lihat situs gatsby kita!

Bisakah kita menanyakan data kita?

Anda mungkin telah memperhatikan bahwa tidak ada konten WordPress di sini. Ini karena kami belum memberi tahu Gatsby apa yang harus dilakukan dengannya. Sebelum kita melakukan itu, mari kita periksa kita benar-benar mendapatkan konten kita untuk Gatsby. Untuk melakukan itu, kunjungi URL ini:


  http: // localhost: 8000 / ___ graphql

Alat bawaan ini disebut Graphiql dan merupakan kekuatan rahasia Gatsby lainnya.

Graphql mirip dengan istirahat: Ini adalah cara untuk menanyakan data. Tetapi dengan Graphql, Anda dapat berinteraksi dengan data Anda jauh lebih mudah. Graphiql (IDE visual untuk GraphQL) dapat menunjukkan kepada kami beberapa trik ini. Di panel kiri, coba ketikkan yang berikut:

 {
 allwordpresspost {
  tepi {
   node {
    Indo
    siput
    status
    template.
    format
   }
  }
 }
}

Ini mungkin terlihat sedikit seperti JSON tetapi tidak. Ini adalah bahasa kueri baru yang menurut saya sebagian besar akan menggantikan sisanya sebagai cara berkomunikasi dengan API.

Apa yang Anda dapatkan ketika Anda menekan Ctrl + Enter di graphiql? Anda mudah-mudahan akan melihat posting WordPress Anda dan halaman di sisi kanan layar.

Kami sebenarnya akan menggunakan kueri ini di langkah kami berikutnya, jadi tetap berguna! Anda mungkin ingin melihat data lain apa yang bisa Anda dapatkan dengan GraphiQL saat Anda di sini. Jika Anda ingin melakukan itu, cobalah memindahkan kursor di sekitar dan mengetik Ctrl + Space dan / atau Ctrl + Enter. Yang akan mengungkapkan kelompok konten lain.

Jadi, kami sekarang memiliki konten di Gatsby. Selanjutnya, kita perlu menampilkannya.

Tampilkan posting kami

Use WordPress as a headless CMS: Gatsby development 404 screen — Halaman Pengembangan Gatsby 404 menunjukkan semua posting WordPress kami

Untuk langkah selanjutnya kita akan memanfaatkan gatsby-node.js. mengajukan.

gatsby-node.js. adalah file yang dapat Anda gunakan untuk berinteraksi dengan "Node API" Gatsby. Di sini Anda dapat mengontrol bagaimana situs Anda dihasilkan dan membuat halaman, pos, dan lainnya.

Kami akan menulis beberapa instruksi di sini untuk memberi tahu Gatsby apa yang harus dilakukan dengan data kami:

 const path = membutuhkan (`path`);

ekspor.createpages = ({graphql, batasancreator})
= & gt; {
 Const {createPage} = BoundActionCreator
 kembalikan janji baru ((tekad, tolak) = & gt; {
  Graphql (
   `
   {
    allwordpresspost {
     tepi {
      node {
       Indo
       siput
       status
       template.
       format
      }
     }
    }
   }
  `
 ). Kemudian (hasil = & gt; {
   If (Hasil.Errors) {
    konsol.log (hasil.Errors)
    Tolak (Hasil.Errors)
   }

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

   Hasil.data.allwordpresspost.edges.foreach (edge = & gt; {
    membuat halaman({
     path: `/ $ {edge.node.slug} /`,
     Komponen: Posttemplate,
     Konteks: {
      ID: edge.node.id,
     },
    })
   })
   menyelesaikan()
  })
 })
}

Kode ini membuat halaman dari kueri graphql kami dan untuk setiap halaman itu akan menggunakan templat yang telah kami tetapkan ( /src/templates/post.js. ). Jadi selanjutnya, kita perlu membuat file itu!

Buat Template Post.

Di dalam / src / folder, buat folder yang disebut template dan file di dalam yang disebut post.js. . Tambahkan ke dalam kode ini:

 Impor bereaksi dari 'REACT'
Impor helm dari 'reaksi-helm'

Kelas Posttemplate Memperpanjang REECT.CONTONSON {
 render () {
  const pos = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.slug;

  kembali (
   & lt; div & gt;
   & lt; title helm = {`$ {titlestring} | $ {sitetitle} `} / & gt;
   & lt; h1 dangerouslysetinnerhtml = {{__html: post.title}} / & gt;
   & lt; div daverigysetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Ekspor PageTemplate default.

Ekspor Const Query = GraphQL`
 Query CurrentPost ($ ID: String!) {
  wordpresspost (id: {EQ: $ id}) {
   judul
   kandungan
   siput
  }
  situs {
   sitemetadata {
    judul
   }
  }
}

Ini menggunakan kueri graphql yang berbeda untuk mendapatkan data tentang posting spesifik itu telah diumpankan oleh gatsbynode.js. File, maka gunakan REACT untuk membuatnya keluar ke browser.

Jika Anda ingin melihat dengan cepat semua posting Anda, Anda dapat mengetik http: // localhost: 8000 / a ke bilah alamat browser Anda. Ini akan membawa Anda ke halaman pengembangan 404, yang mencantumkan semua posting Anda. Klik pada satu untuk mengunjunginya!

Langkah selanjutnya

Kami telah menggaruk permukaan cara menggunakan WordPress sebagai CMS tanpa kepala dan saya harap saya memperkenalkan Anda untuk beberapa konsep dan alat yang menarik yang mungkin dapat Anda gunakan dan bereksperimen di masa depan.

Ada lebih banyak untuk cerita ini dan kolega saya dan saya telah membuat blog tentang itu secara luas di Pohon indigo. . Saya juga menulis lebih banyak di blog pribadi saya, Lezat lezat. .

Harap tetap berhubungan dengan saya melalui saluran-saluran itu dan di Twitter untuk mendengar perkembangan yang lebih menarik di dunia CMS tanpa kepala!

Artikel ini awalnya diterbitkan dalam masalah 308 dari bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Beli masalah 308 di sini atau berlangganan di sini .

Artikel terkait:

40 tutorial WordPress yang brilian
6 Tips Top untuk Keberhasilan CRO di Wordpress
10 Plugin WordPress hebat untuk desainer

Gunakan WordPress sebagai CMS tanpa kepala

Mulai

Gunakan generator situs statis

Mendapatkan konten kami

Apa itu bekerja?

Bisakah kita menanyakan data kita?

Tampilkan posting kami

Buat Template Post.

Langkah selanjutnya

Bagaimana caranya - Artikel Terpopuler

Jelajahi visualisasi data dengan p5.js

Cara Mengubah WordPress ke dalam Builder Visual

Cara Membuat Rumput 3D

Bagaimana cara mengubah font di Bio Twitter Anda

Buat awan dengan fumefx untuk 3DS MAX

Bangun aplikasi seluler lintas platform dengan flutter Google

Buat set ikon produk di Illustrator

4 langkah ke VDM yang lebih baik dengan ZBrush

Kategori