Apa itu WordPress Tanpa Kepala? Bagaimana Cara Membuatnya? [Tutorial]

Apa kelebihan dan kekurangan CMS tanpa kepala WordPress?

WordPress tanpa kepala hadir dengan banyak kelebihan dan kekurangan, yang masing-masing dapat memengaruhi pekerjaan Anda dalam skenario berbeda. Untuk mendapatkan gambaran yang lebih jelas, mari kita bandingkan Kelebihan dan Kekurangannya dalam format Tabel Perbandingan.

Apakah WordPress tanpa kepala bagus?

Jika Anda mengabaikan batasan yang kami sebutkan sebelumnya, ada skenario tertentu di mana penggunaan WordPress tanpa kepala mungkin bermanfaat bagi Anda.

• Jika keamanan website Anda adalah prioritas utama dan penanganan datanya sangat sensitif atau kritis.
• Jika Anda menyukai desain khusus dan kemungkinan tak terbatas tanpa batasan pilihan tema WordPress yang terbatas, dan Anda mencari desain frontend yang unik, pilih WordPress Headless.
• Jika Anda ingin situs web Anda tetap terisolasi dengan pembaruan dan peningkatan yang sering dilakukan WordPress.
• Jika Anda ingin membuat situs web atau aplikasi Anda siap menghadapi masa depan dan beradaptasi dengan teknologi, tren, dan perilaku pengguna baru tanpa harus merombak seluruh infrastruktur Anda, pertimbangkan WordPress tanpa kepala.
• Penyiapan Headless bisa menjadi pilihan yang baik jika Anda mencari situs web demo, proyek kecil atau jangka pendek, atau tutorial.

Bagaimana cara kerja WordPress Tanpa Kepala?

Berbicara tentang WordPress standar, ia hadir dengan antarmuka yang ramah pengguna dan panel admin yang mudah digunakan sehingga Anda dapat dengan mudah mengedit, membuat, dan menghapus konten serta mengelola situs web.

Untuk bagian depan, ia menyediakan ribuan opsi tema yang menggabungkan tema bawaan dan tema pihak ketiga untuk membuat situs web menarik secara visual di layar.

Namun saat Anda memisahkan WordPress, Anda dapat menikmati yang terbaik dari kedua dunia. Untuk memungkinkannya WordPress memiliki API yang disebut WordPress REST API.

Ini adalah antarmuka pemrograman yang memungkinkan pengembang mengakses dan berinteraksi dengan data situs WordPress menggunakan metode HTTP standar.

Hal ini memungkinkan pengembang untuk mengambil, membuat, memperbarui, dan menghapus konten WordPress dari jarak jauh, yang membuatnya lebih mudah untuk mengintegrasikan WordPress dengan platform aplikasi lain atau teknologi front-end lainnya seperti React.js, Angular.js, dll untuk membuat situs web khusus.

Bagaimana cara membuat WordPress tanpa kepala? (Tutorial WordPress Tanpa Kepala)

Ada berbagai cara untuk memisahkan WordPress standar, bergantung pada teknologi yang akan Anda gunakan, sumber daya, bahasa pilihan, dan kerangka kerja. Apa pun metode yang digunakan, Anda harus terbiasa dengan bahasa front-end serta WordPress Rest API.

Namun untuk saat ini, kami akan memilih metode yang paling sederhana karena mayoritas orang adalah pemula. Lihat langkah-langkah yang diberikan di bawah ini:

Langkah 1: Siapkan WordPress

Hal pertama yang perlu Anda lakukan adalah membuat situs WordPress seperti biasa di server Anda. Artinya, situs web tersebut harus aktif, memiliki domainnya sendiri, dan akun hosting web yang sesuai.

Namun memilih platform hosting WordPress yang tepat merupakan tugas yang sangat sulit dan bahkan merupakan langkah yang sangat penting saat menyiapkan WordPress dan membuat CMS tanpa kepala.

Hal ini sangat penting karena meskipun front end dan back end dipisahkan, back end tetap harus berada di server yang memerlukan hosting.

Server tidak hanya menyediakan rumah untuk menyimpan semua konten situs web Anda tetapi kinerja, keamanan, dan keandalannya juga sangat penting untuk mengirimkan konten situs web dengan lancar ke front-end, apa pun teknologi yang digunakannya.

Oleh karena itu, penting untuk memilih host yang menawarkan kinerja Server Sangat Cepat dan keamanan yang diperketat.

Mempertimbangkan hal ini, Anda dapat memilih WPOven, salah satu perusahaan hosting WordPress terkelola sepenuhnya tercepat dan terkemuka yang memberikan perpaduan kecepatan, keamanan tingkat perusahaan, dan dukungan pramutamu, memastikan perjalanan WordPress tanpa kepala Anda lebih lancar.

• Secara khusus, WPOven menyediakan hosting terkelola di penyedia cloud papan atas Linode yang memastikan kinerja dan skalabilitas berkecepatan tinggi.
• Platform ini menawarkan instalasi pra-WordPress, membuat pengaturan WordPress dan alat lainnya tidak merepotkan.
• Selain itu, Dengan sistem caching canggih bawaan dan jaringan pengiriman konten (CDN) Cloudflare, konten Anda terkirim lebih cepat, di mana pun lokasi pengguna.
• Selain itu, WPOven memastikan keamanan tingkat perusahaan yang kuat melalui firewall perlindungan web bawaan dan instalasi SSL, membantu melindungi data dan interaksi backend Anda.
• Pencadangan otomatis dan opsi pemulihan yang mudah memberikan lapisan tambahan perlindungan data dan ketenangan pikiran.
• Selain itu, dukungan pelanggan 24/7 WPOven dan basis pengetahuan yang luas memastikan bahwa setiap masalah ditangani dengan cepat, memungkinkan Anda untuk fokus membangun dan mengelola CMS tanpa kepala tanpa kerumitan terkait hosting.

Langkah 2: Aktifkan REST API

Hal berikutnya yang perlu Anda lakukan adalah memastikan bahwa REST API WordPress diaktifkan. Secara default, ini diaktifkan di semua instalasi WordPress baru.

Namun tetap saja, Anda perlu memverifikasi apakah itu diaktifkan di situs web Anda atau tidak. Anda dapat melakukan ini hanya dengan membuat permintaan API dengan memasukkan URL berikut di browser Anda,

https://example.com/wp-json/wp/v2/

Ubah 'example.com” dengan nama domain Anda yang sebenarnya dan jika API diaktifkan, ini akan menampilkan respons JSON dengan beberapa informasi tentang postingan situs web Anda.

Alternatifnya, Anda dapat mengambil bantuan plugin seperti plugin WP REST API.

Baca: REST API WordPress: Panduan Memulai

Langkah 3: Ambil Data Posting melalui API

Jika Anda ingin mengambil data postingan, ikuti langkah-langkah berikut:

• Buka dashboard WordPress Anda > Pengaturan > Permalinks dan pilih Nama postingan.

• Setelah itu, Anda perlu mengunduh alat pengujian Postman API.
• Sekarang di dalam alat Postman API masukkan URL seperti format di bawah ini.

https://mydomain.com/wp-json/wp/v2/posts

Ini akan mengambil data posting di dalam situs WordPress Anda.

Langkah 6: Siapkan Aplikasi React

Sekarang kita sudah selesai dengan backend, sekarang saatnya mulai mengerjakan front end. Pertama, kita membuat Aplikasi React dengan mengeksekusi kode di bawah ini di Terminal.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Perintah ini akan membuat aplikasi React baru menggunakan Vite dan juga menginstal perpustakaan atau paket eksternal yang diperlukan.

Selain itu, Anda juga perlu menyertakan Axios untuk menangani permintaan HTTP. Untuk ini jalankan perintah berikut untuk menginstalnya.

npm install axios

Sekarang, Anda dapat memulai server pengembangan lokal untuk aplikasi Anda dengan menjalankan perintah npm run dev di terminal atau command prompt Anda.

Saat Anda menjalankan perintah ini, ini akan memulai server di mesin lokal Anda, dan itu akan membuat aplikasi Anda tersedia di URL https://127.0.0.1:5173 .

Hal berikutnya yang perlu Anda lakukan adalah membuka proyek Anda di editor kode (mana saja yang Anda suka, Visual Studio Code, Subkline Text, Atom, dll.) dan juga menghapus file yang tidak diperlukan seperti index.css, app.css, dll.

Langkah 7: Ambil Postingan dari WordPress

Di file App.jsx Anda, di bagian atas, impor hook useState dari perpustakaan React. Ini memungkinkan Anda untuk menggunakan status dalam komponen fungsional Anda.

import React, { useState } from 'react';

Di dalam komponen fungsional Anda App , inisialisasi bagian status yang disebut posts menggunakan kait useState . Negara bagian ini akan menampung serangkaian postingan. useState([]) menginisialisasi posts dengan array kosong sebagai nilai awalnya.

const [posts, setPosts] = useState([]);

Setelah menginisialisasi status posts dengan array kosong menggunakan useState([]) , Anda perlu menambahkan kode untuk mengambil postingan dari REST API WordPress. Ini melibatkan pembuatan permintaan HTTP ke titik akhir API yang menyajikan data postingan.

Anda perlu menambahkan kode yang diperlukan untuk mengambil data postingan setelah deklarasi negara. Kode ini biasanya melibatkan penggunaan metode seperti fetch() atau perpustakaan seperti Axios untuk membuat permintaan HTTP GET ke titik akhir API WordPress yang menyediakan data postingan.

Selanjutnya, tambahkan kode berikut setelah deklarasi negara untuk mengambil data postingan dari REST API WordPress dan perbarui postingan yang sesuai.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Kode ini mengambil postingan dari REST API situs WordPress saat komponen dipasang, dan memperbarui status komponen dengan data yang diambil menggunakan fungsi setPosts hook useState .

Langkah 8: Membuat komponen Blog dan Merendernya

Sekarang buat folder baru bernama “components” di dalam folder src dan buat dua file baru Blog.jsx dan blog.css (di dalam komponen).

Selanjutnya tambahkan kode berikut pada file Blog.jsx terlebih dahulu:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

Komponen ini mengambil dan menampilkan judul, tanggal, kutipan, dan gambar unggulan dari postingan blog yang diteruskan sebagai prop.

Setelah itu tambahkan style berikut pada file blog.css,

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Terakhir, masukkan cuplikan kode berikut ke dalam pernyataan return file App.jsx . Di sinilah Anda menentukan struktur UI komponen Anda menggunakan sintaksis JSX.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Simpan file dan segarkan browser Anda. Sekarang Anda akan dapat melihat postingan blog yang dirender di layar.

Contoh WordPress Tanpa Kepala

Untuk referensi Anda dan untuk membangun kepercayaan diri, berikut kami memberi Anda beberapa Contoh WordPress Tanpa Kepala:

1. Krisis Teknologi

Jika Anda seorang penggila teknologi, Anda pasti sudah tidak asing lagi dengan TechCrunch. yang merupakan outlet media teknologi dan situs berita terkemuka. Mereka mendesain ulang bagian depan situs webnya untuk memberikan pengalaman pengguna yang lancar.

Untuk mencapai hal ini, mereka menggunakan pendekatan WordPress Tanpa Kepala dan menggunakan aplikasi React untuk membuat WordPress ujung depan dan WordPress tanpa kepala untuk bagian belakang.

2. Pusat Sumber Daya Merek Facebook

Facebook sekarang dikenal sebagai Meta, raksasa media sosial menggunakan pendekatan WordPress Tanpa Kepala ini di situs web Pusat Sumber Daya Merek mereka sebagai panduan gaya untuk aset mereknya.

Situs web ini menggunakan perpaduan unik antara desain web yang unik dan elegan dengan pengalaman pengguna yang lancar. Jika Facebook/Meta seperti raksasa teknologi besar bisa. percayalah pada WordPress tanpa kepala, Anda juga bisa.

Kesimpulan

Kesimpulannya, terlepas dari keterbatasan, kekurangan, atau kekurangan tertentu. Pendekatan tanpa kepala dapat menghasilkan keajaiban jika diterapkan dengan benar. Hal ini khususnya dapat sangat menguntungkan bagi pengembang atau pembuat konten yang suka membuat aplikasi web tanpa kepala.

Tidak diragukan lagi, memisahkan WordPress standar dapat membuka banyak kemungkinan seperti mendapatkan kebebasan mendesain UI situs web menggunakan React dan juga mengelola konten menggunakan WordPress.

Teknologi ini memungkinkan Anda menikmati kekuatan penuh dari setiap teknologi beserta manfaat fleksibilitas, skalabilitas, dan optimasi SEO.

Di seluruh blog ini, kami telah mencoba menjawab semua pertanyaan umum mengenai WordPress tanpa kepala dan juga memberi Anda beberapa langkah tentang cara membuat WordPress tanpa kepala untuk referensi Anda. (Namun, ada beberapa cara untuk memisahkan WordPress, jadi ikuti mana yang menurut Anda paling mudah).

Pertanyaan yang Sering Diajukan

Rahul

Rahul Kumar adalah penggemar web, dan ahli strategi konten yang berspesialisasi dalam WordPress & hosting web. Dengan pengalaman bertahun-tahun dan komitmen untuk selalu mengikuti perkembangan tren industri, dia menciptakan strategi online efektif yang mengarahkan lalu lintas, meningkatkan keterlibatan, dan meningkatkan konversi. Perhatian Rahul terhadap detail dan kemampuannya membuat konten yang menarik menjadikannya aset berharga bagi merek mana pun yang ingin meningkatkan kehadiran online-nya.