Pelajari Cara Membuat Situs WordPress Tanpa Kepala Dengan Vue.js

WordPress telah menjadi sistem manajemen konten masuk untuk pengembang dan non-pengembang untuk dengan cepat membangun dan membuat situs web yang menakjubkan.

Menggunakan arsitektur layanan mikro, di mana backend manajemen konten terpisah dari frontend, memungkinkan kontrol maksimum dari kedua "ujung". Masalah pemisahan inilah yang coba dipecahkan oleh sistem manajemen konten tanpa kepala, termasuk solusi WordPress tanpa kepala.

Dengan pendekatan tanpa kepala, bisnis memiliki kontrol yang lebih terperinci atas backend manajemen konten. Mereka juga bebas menggunakan frontend pilihan mereka, termasuk React, Vue, Angular, dll.

Panduan ini akan mengeksplorasi secara rinci WordPress tanpa kepala, dan tentang apa itu, kapan dan mengapa Anda harus mempertimbangkan untuk menggunakannya. Terakhir, kita akan mengeksplorasi pembuatan lingkungan WordPress tanpa kepala, membangun frontend dengan Vue.js, dan menerapkan WordPress tanpa kepala menggunakan Kinsta.

Apa itu WordPress Tanpa Kepala?

WordPress adalah aplikasi monolit di mana backend dan bagian frontend dililit erat. Backend adalah tempat manajemen masuk, tempat Anda dapat membuat, mengedit, menambah, dan menghapus konten, termasuk mengubah konfigurasi tampilan. Sebaliknya, frontend bertanggung jawab untuk menampilkan konten kepada pengguna.

WordPress tanpa kepala adalah istilah yang digunakan untuk menggambarkan WordPress yang dipisahkan. Bagian backend (manajemen) terpisah dari bagian frontend CMS WordPress. Anda dapat mengembangkan dan mengelola frontend sebagai aplikasi mandiri dengan kerangka kerja frontend pilihan Anda.

Pro dan Kontra WordPress Tanpa Kepala

Selanjutnya, kami akan mengeksplorasi pro dan kontra dari WordPress tanpa kepala untuk memberi Anda pemahaman yang lebih baik tentang konsep tersebut.

Pro

Pertama, kita akan mulai dengan menjelajahi pro.

Performa Super Cepat

Di era aplikasi berkinerja super cepat ini, situs web Anda tidak boleh lebih dari beberapa detik untuk memuat dan menghindari kehilangan pengunjung. Karena frontend terpisah dari WordPress dan dapat dikembangkan dengan kinerja tinggi dan skalabilitas dalam pikiran menggunakan alat frontend modern, menggunakan pendekatan WordPress tanpa kepala sangat bermanfaat bagi keseluruhan pengalaman pengguna situs web Anda.

Kontrol Granular

Memilih arsitektur tanpa kepala memberi Anda kontrol lebih besar atas tata letak desain, presentasi konten, dan cara pengguna berinteraksi dengan frontend aplikasi Anda. Ini juga memungkinkan konten backend Anda diamankan dan diakses dari lokasi pusat.

Peningkatan Skalabilitas

Penskalaan WordPress terkadang bisa rumit karena Anda tidak memiliki kendali penuh atas semua komponen dan kode yang mendukung WordPress, terutama jika Anda bukan seorang pengembang. Tetapi dengan decoupling WordPress, mudah untuk menskalakan setiap bagian secara terpisah, dan Anda dapat dengan mudah mendeteksi bagian mana yang perlu diskalakan.

Keamanan Lebih Ketat

Kami tidak dapat cukup menekankan manfaat keamanan WordPress tanpa kepala karena WordPress yang dipisahkan memiliki manfaat keamanan tinggi terhadap peretas dan serangan DDoS. Pendekatan WordPress tanpa kepala mempersulit peretas untuk mengakses data backend sensitif Anda karena terpisah dari frontend Anda, situs web yang menghadap pengguna.

Desain Ringan

Anda akan memiliki kontrol lebih besar atas struktur dan tata letak desain frontend Anda. Selain itu, Anda dapat bekerja di frontend dengan lebih banyak kebebasan dan desain yang disesuaikan; berkat panggilan REST API, Anda akan dapat memanfaatkan alat web modern dan menerapkannya di frontend.

Penerbitan Konten Multi-Saluran

Karena WordPress tanpa kepala menggunakan sistem berbasis API untuk mengomunikasikan konten Anda ke frontend, Anda dapat menampilkan konten Anda di mana saja dan di platform apa pun, termasuk desktop, situs web, aplikasi seluler, dan kios layar sentuh. Dimungkinkan juga untuk memanfaatkan sepenuhnya perangkat Augmented Reality, Virtual Reality, dan Internet of Things untuk menampilkan dan menyajikan konten Anda yang berasal dari sistem berbasis API.

Kekurangan

Kami akan mengeksplorasi kontra headless secara lebih mendalam, tetapi kelemahan utamanya adalah:

1. Memisahkan backend dan frontend memberi Anda beban ekstra saat mengelola berbagai instance situs web.
2. Ini bisa mahal untuk diterapkan karena membutuhkan anggota tambahan di tim Anda dan modal tambahan untuk menjalankan berbagai instance.
3. Membuat konten Anda tersedia di platform yang berbeda dapat menyebabkan pengalaman yang tidak konsisten bagi pengguna Anda jika konten tidak disajikan secara konsisten di semua platform.

Ketika WordPress Tanpa Kepala Mungkin Bukan Pilihan Terbaik

Karena WordPress tanpa kepala adalah inovasi luar biasa dengan manfaat luar biasa, ada beberapa hal yang perlu Anda ingat saat memutuskan apakah Anda harus menggunakannya atau tidak.

1. WordPress tanpa kepala sangat mahal perawatannya. Anda akan memelihara dua contoh berbeda dari satu situs web dari infrastruktur hingga beberapa pengembang.
2. WordPress tanpa kepala tidak mendukung semua fitur WordPress. Misalnya, fitur WordPress yang hebat seperti editor WYSIWYG dan pratinjau langsung tidak akan berfungsi saat menggunakan frontend yang terpisah.
3. Lebih mahal untuk menyiapkan WordPress tanpa kepala. Oleh karena itu, selalu ingat kenaikan biayanya.

Siapa yang Harus Menggunakan WordPress Tanpa Kepala?

Di bawah ini adalah kasus paling cocok yang mungkin Anda perlukan WordPress tanpa kepala:

1. Anda harus menggunakan WordPress tanpa kepala jika keamanan situs web Anda adalah perhatian utama dan terpenting bagi perusahaan Anda.
2. Selanjutnya, jika situs web Anda tidak memerlukan peningkatan dan pembaruan rutin, itu akan menjadi pertanda bagus bahwa Anda perlu menggunakan pengaturan tanpa kepala.
3. Selanjutnya, jika Anda ingin memiliki desain khusus yang tidak mudah dilakukan oleh tema WordPress, Anda ingin membumbui bagian depan situs web Anda dengan desain yang unik. Kemudian, WordPress tanpa kepala adalah pilihan Anda berikutnya.
4. Terakhir, jika Anda sedang membangun situs web yang berumur pendek atau situs demo untuk presentasi dan tutorial, maka Anda dapat mencoba pendekatan tanpa kepala.

Siapa yang Harus Hindari Menggunakan WordPress Tanpa Kepala

Berikut adalah beberapa kasus di mana menggunakan WordPress tanpa kepala bukanlah pilihan yang baik:

1. Ketika situs web Anda hanya mengandalkan plugin dan fungsi tertentu yang mengontrol dan bekerja paling baik dengan frontend aplikasi Anda, Anda harus tetap menggunakan WordPress kecuali jika plugin menawarkan opsi berbasis API untuk menggunakan data.
2. Misalkan Anda tidak tertarik untuk mengkodekan situs web Anda, atau situs web Anda memerlukan pemeliharaan harian, dan Anda tidak mempekerjakan seorang profesional untuk pemeliharaan rutin karena anggaran Anda yang rendah. Dalam hal ini, WordPress adalah pilihan yang cocok untuk Anda.
3. Jika Anda bukan pengembang berpengalaman dan ingin membuat dan mengelola situs web Anda sendiri, Anda harus menggunakan WordPress.

Cara Membuat WordPress Headless (Membangun Aplikasi)

Bagian ini akan mengeksplorasi membangun dan mengembangkan blog berita dengan WordPress tanpa kepala untuk backend dan Vue 3 sebagai frontend yang menghadap pengguna.

Menyiapkan WordPress Tanpa Kepala Dengan Devkinsta

Kami akan mengembangkan WordPress tanpa kepala dengan DevKinsta, lingkungan pengembangan lokal WordPress yang populer untuk merancang, mengembangkan, dan menyebarkan situs WordPress dari kenyamanan mesin lokal Anda.

DevKinsta gratis selamanya dan menawarkan manfaat dan kenyamanan luar biasa dalam mengembangkan dan membangun WordPress dengannya.

Anda dapat mengunduh dan menginstal DevKinsta dari situs web resmi dan mengikuti petunjuk dalam dokumentasi untuk memulai.

Karena kami telah menginstal DevKinsta, kami akan membukanya dan mengikuti langkah di bawah ini untuk menyiapkan WordPress tanpa kepala pertama kami.

Di dasbor DevKinsta, buat situs WordPress baru menggunakan Nginx, MySQL, dan versi WordPress apa pun yang tersedia. Selain itu, Anda dapat mengimpor instans WordPress yang ada atau membuat instans WordPress kustom dari dasbor.

Selanjutnya, beri nama, nama pengguna admin, dan kata sandi untuk instance WordPress yang baru Anda buat, lalu klik Buat dan salin detailnya sementara DevKinsta membuat instance WordPress baru di mesin lokal Anda.

Selanjutnya, klik Open Site untuk membuka instance WordPress yang baru Anda buat di browser default Anda.

Terakhir, Anda dapat masuk ke dasbor admin dengan mengakses tautan http://headless-wordpress-news-blog.local/wp-admin dan mengetikkan kredensial login admin yang Anda masukkan saat membuat instance baru.

Perhatikan bahwa kami telah menyiapkan WordPress headless kami secara lokal dengan URL http://headless-wordpress-news-blog.local dengan frontend di-host secara lokal di http://news-blog.local , dan kami akan menggunakannya di seluruh tutorialnya.

Mengonfigurasi WordPress Tanpa Kepala Kami

Selanjutnya, setelah berhasil masuk ke dashboard WordPress Anda, Anda dapat melanjutkan untuk menginstal plugin dan konfigurasi pilihan Anda.

Kami akan menonaktifkan tema sepenuhnya untuk tutorial ini dan hanya mengakses konten melalui titik akhir berbasis REST API WordPress dengan menginstal plugin Simple Website Redirect dan mengaturnya.

Buka Plugins > Add new dan cari Simple Website Redirect, instal dan aktifkan:

Selanjutnya, klik pada Pengaturan plugin dan masukkan URL berbasis frontend Anda (misalnya http://news-blog.local ), klik pada opsi Pengaturan lanjutan dan tambahkan jalur berikut — /wp-admin , /wp-login.php , dan /wp-json — ke bagian Kecualikan Jalur.

Terakhir, aktifkan Plugin dengan memilih Diaktifkan di dropdown Redirect Status :

…dan hanya itu!

Selain itu, jika JSON API Anda tidak diaktifkan saat Anda mengunjungi http://headless-wordpress-news-blog.local/wp-json secara default, Anda dapat mengaktifkannya dengan membuka Permalinks Anda di bawah Pengaturan WordPress dan memilih Post Name atau satu lagi pilihan Anda kecuali Plain :

Sekarang ketika Anda mengunjungi http://headless-wordpress-news-blog.local/wp-json Anda, itu akan memberi Anda data JSON seperti di bawah ini:

 { "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...

Menyiapkan Vue.js (Frontend)

Kami akan menggunakan alat pengembangan web Vite untuk membuat aplikasi Vue 3 kami untuk terhubung dengan WordPress tanpa kepala. Anda dapat membaca lebih lanjut tentang alat pengembangan Vue 3 dan Vite.

Pada artikel ini, kita akan membangun sebuah blog berita. Semua manajemen konten backend proyek akan dikembangkan dan dihosting dengan WordPress tanpa kepala kami menggunakan Devkinsta.

Ketik bersama dengan perintah sederhana ini:

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

Jika Anda mengalami masalah dengan spasi di nama pengguna Anda, coba gunakan:

 npx create-vite-app news-blog

Perhatikan bahwa kami telah mengonfigurasi aplikasi Vue 3 kami untuk mendengarkan http://news-blog.local , tetapi Anda dapat tetap menggunakan http://localhost:3000 default.

Terakhir, buka basis kode Vue 3 Anda dengan editor kode pilihan Anda. Kami akan menggunakan VSCode, dan biarkan tangan kami kotor dengan kode.

Mengkonsumsi API WordPress

Kami telah mengembangkan bagian yang tersisa dari aplikasi Vue untuk menghemat waktu membaca Anda, tetapi Anda dapat melanjutkan untuk mengkloning repositori dari GitHub saya.

Tampilkan Komponen Posting Aplikasi

Cuplikan kode di bawah ini menunjukkan bagaimana kami mengimplementasikan WordPress REST API dengan instance Vue kami untuk menampilkan semua posting dari WordPress tanpa kepala:

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

Tampilkan Komponen Posting Tunggal

Cuplikan kode menunjukkan bagaimana kami mengambil satu posting dengan WordPress REST API dengan WordPress tanpa kepala dan menampilkannya dalam contoh Vue kami:

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

Di bawah ini adalah toko yang membuat panggilan API ke API WordPress tanpa kepala untuk konten backend:

 export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }

Menyebarkan WordPress Tanpa Kepala Dengan Kinsta

Terakhir, menerapkan WordPress tanpa kepala Anda menjadi sangat mudah dengan DevKinsta menggunakan layanan hosting Kinsta.

Untuk menyebarkan WordPress tanpa kepala Anda ke Kinsta, klik tombol Push to Staging di dasbor DevKinsta Anda dan masuk ke Kinsta dengan kredensial login Anda. Anda dapat membuat akun Kinsta baru untuk mendapatkan kredensial login Anda.

Anda dapat mempelajari cara mendorong perubahan ke lingkungan staging untuk menerapkan WordPress tanpa kepala Anda ke layanan hosting Kinsta dalam satu klik.

Terakhir, Anda dapat menerapkan instance Vue.js ke penyedia cloud hosting pilihan Anda. Pastikan untuk memperbarui titik akhir WordPress tanpa kepala Anda sesuai untuk menguji aplikasi Anda di lingkungan produksi langsung.

Ringkasan

WordPress tanpa kepala dan manfaatnya akan tetap ada untuk sementara waktu. Popularitasnya hanya akan terus tumbuh karena semakin banyak pengembang dan pemilik situs memahami sisi positif dari opsi tanpa kepala.

Dalam panduan ini, kami telah memperkenalkan Anda tentang manfaat, pro, dan kontra WordPress tanpa kepala, dan kami telah menunjukkan kepada Anda cara membuat dan menerapkan WordPress tanpa kepala pertama Anda dengan DevKinsta. Anda sekarang sudah siap untuk menerapkan WordPress tanpa kepala.

Apa tips Anda untuk menerapkan situs WordPress tanpa kepala? Silakan bagikan di bagian komentar!