Gunakan WordPress dengan Bereaksi untuk Membuat CMS Tanpa Kepala untuk Aplikasi Web Anda

WordPress Rest API adalah salah satu dari banyak fitur hebat yang ditawarkan WordPress. Ini memungkinkan pengembang untuk membuat plugin dan tema yang menarik dan memungkinkan mereka untuk mendukung aplikasi pihak ketiga dengan CMS WordPress.

Sistem manajemen konten juga dikembangkan untuk mengelola konten situs web dalam aplikasi web modern. Hal ini dapat menambah beban kerja ekstra bagi para pengembang. Dengan begitu banyak kemungkinan yang ditawarkan oleh Rest API , seseorang juga dapat berpikir untuk menggunakan WordPress dengan React sebagai CMS tanpa kepala untuk aplikasi web berbasis JavaScript mereka.

Apa itu WordPress Tanpa Kepala?

Situs web WordPress tanpa kepala adalah situs yang terutama menggunakan WordPress untuk manajemen konten dan menggunakan teknologi lain untuk membangun front-end dan menampilkan konten kepada pengunjung situs web.

Rest API memungkinkan pengembang berinteraksi dengan antarmuka lintas teknologi selama keduanya berbicara dalam bahasa JSON yang sama. WordPress Rest API mengeluarkan data dalam format JSON, yang dapat dimengerti oleh sejumlah besar teknologi web. JSON adalah representasi berbasis teks dari objek JavaScript yang berisi data dalam pasangan nilai kunci.

 "teman-teman": [
      {
        "id": 0,
        "nama": "Harriet Stanley"
      },
      {
        "id": 1,
        "nama": "Benton Odom"
      },
      {
        "id": 2,
        "nama": "Jackie Edwards"
      }
    ],

Hari ini, saya akan mendemonstrasikan kekuatan WordPress Rest API dengan menggunakannya dengan React dan WordPress sebagai CMS tanpa kepala untuk aplikasi web dasar saya.

Manfaat Menggunakan CMS WordPress Tanpa Kepala

Menjadi platform sumber terbuka, WordPress menawarkan fleksibilitas luar biasa untuk membuat situs web apa pun. Menggunakan WordPress sebagai CMS tanpa kepala memungkinkan Anda membuat front-end aplikasi web Anda menggunakan teknologi web apa pun dan mengelola kontennya menggunakan salah satu CMS paling populer.

Anda mungkin menemukan situasi di mana Anda perlu menambahkan fitur blog di aplikasi web yang ada yang dibuat dengan React atau Angular. Alih-alih mengkodekan sistem manajemen konten lengkap dalam kerangka asli, gunakan CMS WordPress tanpa kepala untuk mengelola konten menggunakan Rest API.

Cara Mengatur Situs WordPress untuk ReactJS

Mari kita mulai dengan menyiapkan situs WordPress, karena ini akan bertindak sebagai sumber data untuk aplikasi React front-end kita.

Unduh file zip plugin WP-Rest API dari git dan unggah folder zip di dalam folder plugin WordPress Anda. Setelah file diunggah, aktifkan plugin. Ini akan mengaktifkan WordPress Rest API di dalam situs WordPress Anda.

Buka Pengaturan → Permalinks dan pilih Nama posting atau Struktur Kustom.

Karena kami bekerja dengan panggilan API, unduh ekstensi chrome untuk Postman . Di dalam Postman, masukkan URL dalam format berikut:

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

URL di atas akan mengambil data posting di dalam situs WordPress Anda.

Unduh plugin Custom Post Type UI untuk membuat jenis posting khusus. Custom post ini akan ditampilkan saat kita menggunakan WordPress dengan React di langkah selanjutnya.

Instal dan aktifkan plugin dan tambahkan jenis posting baru. Untuk tutorial ini, saya akan membuat jenis posting khusus untuk Buku.

Di dalam Post Type Slug, ketik nama posting kustom Anda.

Pastikan bahwa Show in REST API checkbox disetel ke true dan REST API base slug juga disetel. Ini wajib jika Anda ingin menggunakan WordPress sebagai CMS tanpa kepala.

Centang semua kotak untuk informasi yang Anda cari dari REST API.

Setelah menyimpan perubahan, Anda akan melihat bahwa opsi baru diisi di bilah sisi. Klik untuk menambahkan Buku baru di dalam jenis kiriman khusus Anda.

Saya membuat buku pertama saya dengan memasukkan data sampel dan kutipan untuk posting saya.

Untuk memverifikasi bahwa data tersedia melalui API, lanjutkan dan tekan URL di dalam Postman.

Sekarang, URL akan terlihat seperti https://exampe.com/wp-json/wp/v2/ books.

Kami juga dapat menambahkan bidang lebih lanjut seperti Publisher dengan menggunakan plugin ACF dan ACF ke RestAPI .

Instal dan aktifkan kedua plugin.

Secara default, ACF tidak berbicara dengan WordPress Rest API. Oleh karena itu, kita perlu mengunduh plugin ACF REST API juga.

Menggunakan plugin bidang khusus, saya akan menambahkan bidang Penerbit untuk buku saya.

Pastikan untuk memilih jenis posting yang diinginkan dari daftar. Setelah itu, tekan ' Publikasikan .'

Bidang baru diisi di dalam jenis posting khusus saya di mana saya dapat menentukan penerbit buku saya. Itu saja yang perlu kami lakukan untuk menyiapkan WordPress kami untuk mengirim data kami ke aplikasi web ReactJS kami.

Memulai dengan Bereaksi

Apa itu ReactJS?

React adalah pustaka JavaScript untuk web yang dikelola oleh Facebook dan komunitas pengembang. JavaScript adalah alat yang ampuh untuk pengembangan web, dan ada beberapa perpustakaan yang ditulis dalam JavaScript untuk meningkatkan fungsionalitas situs web. ReactJS terutama digunakan untuk mengembangkan aplikasi satu halaman yang cepat, kuat, dan dinamis.

Menyiapkan Aplikasi React

Untuk membangun aplikasi React, Anda harus menginstal dependensi berikut di komputer Anda.

• NodeJS & NPM.
• Editor Teks seperti Sublime atau Visual Studio Code.
• Git untuk pengontrolan versi (Opsional)

Setelah mengatur lingkungan, buka baris perintah dan jalankan kode berikut untuk membuat proyek dengan ReactJS.

 npx create-react-app frontend

Setelah aplikasi dibuat, cd (ubah direktori) ke folder aplikasi dan ketik perintah berikut untuk menginstal paket Axios untuk panggilan API.

 npm saya aksio

Sekarang, buka folder di dalam editor teks favorit Anda. Saya menggunakan Kode Visual Studio.

Luncurkan aplikasi dengan menjalankan perintah npm start.

Kami siap untuk membangun aplikasi web kami dengan React menggunakan WordPress sebagai CMS tanpa kepala jika semuanya berfungsi dengan baik.

Buat folder baru ' komponen ' di dalam folder src , dan di dalam folder ' komponen ', buat file baru ' Books.js .'

Cara Membuat Data Postingan di ReactJS

Di dalam file Book.js , kita akan mengambil data dari WordPress Rest API. Di bawah ini adalah kode yang meminta titik akhir API Istirahat – yang dalam kasus saya adalah ' /books ' – dan menampilkan data dalam format JSON.

 impor Bereaksi, { Komponen } dari 'bereaksi'
impor aksio dari 'aksios';

kelas ekspor Buku memperluas Komponen {
   keadaan = {
       buku: [],
       isLoaded: salah
   }

 componentDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           buku: res.data,
           isLoaded: benar
       }))
       .catch(err => console.log(err))
   }


   render() {
      console.log(ini.status);
       kembali (
           <div>
              
           </div>
       )
   }
}

ekspor Buku default

Kode di atas akan menampilkan larik data di konsol, yang kemudian digunakan di dalam blok render.

Sekarang, di dalam file App.js , panggil komponen Buku seperti yang ditunjukkan di bawah ini.

 impor Bereaksi dari 'bereaksi';
impor './App.css';
impor Buku dari './components/Books';

fungsi Aplikasi() {
 kembali (
   <div className="Aplikasi">
    <Buku/>
   </div>
 );
}

ekspor Aplikasi default;

App.js adalah titik masuk dari aplikasi web kita. Oleh karena itu, penting untuk merujuk komponen "Buku" di dalam file ini.

Cara Menampilkan Data Postingan di ReactJS

Data dapat ditampilkan dengan menambahkan kode di dalam metode render.

 render() {
       const {buku, isLoaded} = this.state;
       kembali (
           <div>
               {buku.peta(buku =>
               <h4>{book.title.rendered}</h4>
               )}
           </div>
       );
   }

Alih-alih menampilkan data di sini, kita akan membuat komponen baru dan menamakannya ' BookItems.js ' karena saya ingin memisahkannya dari komponen induk.

Ubah metode render di dalam Bookk.js menjadi sesuatu seperti:

 render() {
       const {buku, isLoaded} = this.state;
       kembali (
           <div>
               {buku.peta(buku =>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

Sekarang, kita perlu merender komponen BookItems sebagai gantinya.

Di dalam BookItems.js, tambahkan kode berikut:

 impor Bereaksi, { Komponen } dari 'bereaksi'
impor aksio dari 'aksios';
impor PropTypes dari 'prop-types';

export class BookItems extends Komponen {
 
   render() {
       const { judul } = this.props.book;
       kembali (
           <div>
              <h2>{title.rendered}</h2>
           </div>
       )
   }
}

ekspor Item Buku default

Dalam kode di atas, saya mereferensikan prop buku untuk mendapatkan judul dan informasi lainnya.

Catatan: Pastikan untuk merujuk komponen BookItems di dalam komponen "Books".

Versi terakhir BookItems.js saya terlihat seperti ini:

 impor Bereaksi, { Komponen } dari 'bereaksi'
impor PropTypes dari 'prop-types';
impor aksio dari 'aksios';
export class BookItems extends Komponen {

   keadaan = {
       imgUrl: '',
       pengarang: '',
       isLoaded: salah
   }

   propTypes statis = {
       buku: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {featured_media, author} = this.props.book;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Janji.semua([getImageUrl, getAuthor]).lalu(res => {

           console.log(res);
           this.setState({
               imgUrl: res[0].data.media_details.sizes.full.source_url,
               penulis: res[1].data.name,
               isLoaded: benar

           });
       });
    }
 
   render() {
       const { judul, kutipan } = this.props.book;
       const {penulis, imgUrl, isLoaded} = this.state;
       kembali (
           <div>
              <h2>{title.rendered}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{penulis}</strong><br/>
              <div hazardlySetInnerHTML={{__html: excerpt.rendered}}></div>
           </div>
       )
   }
}

ekspor Item Buku default

Dan output di browser terlihat seperti ini:

Bukan yang tercantik, kan? Nah, itu karena penataan gaya berada di luar cakupan tutorial ini.

Membungkus!

Hari ini, saya telah menunjukkan kepada Anda cara menggunakan WordPress dengan React sebagai CMS tanpa kepala untuk aplikasi web Anda. Kode React juga tersedia di Git untuk Anda unduh. Namun, itu tidak terbatas pada Bereaksi. Anda juga dapat bereksperimen dengan VueJS, Angular, atau kerangka kerja JavaScript apa pun. Ada banyak hal yang dapat Anda lakukan dengan WordPress Rest API. Langit adalah batasnya, jadi lanjutkan dan gunakan WordPress untuk proyek web Anda berikutnya.