WordPress REST API: Fitur CMS Generasi Selanjutnya

Lebih dari seperempat web berjalan di WordPress. Ini adalah prestasi yang sangat luar biasa, mengingat sudah ada selama lebih dari satu dekade, yang membuatnya cukup tua di tahun-tahun teknologi.

Apa saus rahasia WordPress? Mudah – ini adalah cara paling sederhana namun paling dapat diperluas untuk mengelola konten Anda. Namun, untuk sementara waktu, WordPress sepertinya tertinggal.

Karena web menjadi lebih bergantung pada JavaScript untuk menciptakan pengalaman interaktif dan imersif, semakin jelas bahwa WordPress perlu menawarkan cara baru bagi pengguna dan pengembang untuk berinteraksi dengan konten mereka.

Sementara WordPress dibangun di atas – dan akan terus dibangun di atas – PHP, WP REST API adalah upaya untuk membuat jembatan antara warisan inti PHP WordPress dan potensi dan kekuatan aplikasi web JavaScript, serta seluler asli dan aplikasi desktop.

WordPress REST API membawa konten situs web WordPress apa pun ke dalam API yang mudah digunakan, memungkinkan WordPress berfungsi sebagai sistem penyimpanan dan pengambilan untuk menerbitkan konten di web.

Membawa REST API ke WordPress

Jika Anda berpikir WP REST API muncul entah dari mana, Anda salah.

Menambahkan fitur yang sama sekali baru ke WordPress bukanlah tugas yang mudah. Dengan sifatnya sebagai perangkat lunak sumber terbuka, pengembangan WordPress bergantung pada komunitas secara luas untuk membuat kemajuan.

Pengembangan untuk API dimulai beberapa tahun yang lalu sebagai plugin fitur terpisah, yang memungkinkan pengembang bereksperimen dengan, dan berkontribusi pada, proyek dalam lingkungan yang terkendali.

Melalui banyak iterasi dan peningkatan, dan dua versi yang sepenuhnya terpisah, kontributor di balik REST API harus menguji dan mengevaluasi manfaat, dan konsekuensi besar, dari menyediakan akses API terbuka ke data di puluhan juta situs web.

WordPress 4.4, nama kode “Clifford,” membawa infrastruktur awal proyek ke inti WordPress, sementara titik akhir tidak muncul sampai WordPress 4.7, “Vaughan.”

Pada dasarnya, ini memberi waktu kepada pengembang untuk menguji fungsionalitas yang menggerakkan API tanpa benar-benar mengekspos data itu sendiri.

Sekarang titik akhir konten awal telah digabungkan ke semua versi WordPress saat ini, pengembang plugin dan penulis tema dapat bereksperimen dengan cara baru yang menarik untuk mengambil, melihat, dan mengubah data di luar pengalaman wp-admin tradisional.

Memecah Singkatan: Dari HTTP ke JSON REST API

Untuk memahami pentingnya WP REST API, mungkin membantu untuk memahami dasar bagaimana kami berbagi data secara online dan ke mana arah Internet.

HTTP adalah dasar untuk sebagian besar lalu lintas web yang kami tangani setiap hari. Jika Anda mengetik URL ke browser, Anda membuat permintaan . Server yang sesuai menerima permintaan Anda dan memberikan tanggapan . Transaksi ini adalah dasar untuk hampir semua yang kami lakukan secara online. Browser membuat permintaan, dan server memberikan tanggapan.

Jenis permintaan yang kami buat dapat memengaruhi jenis respons yang kami dapatkan. Sering kali, kami membuat permintaan GET sederhana: “Ok Google, DAPATKAN saya laman landas Anda.” Google memberikan tanggapan.

Saat web menjadi lebih interaktif, kami mulai memanfaatkan permintaan HTTP lainnya, termasuk PUT , POST , dan DELETE .

Misalnya, kami mengisi bilah pencarian di situs web: "Hai Google, POST alamat email dan kata sandi saya ke halaman login Anda." Google memulai sesi baru untuk kami dan memberikan respons yang berbeda.

Protokol ini adalah fondasi dasar kami membangun situs WordPress kami.

Kami menggunakan formulir dan PHP untuk GET dan POST data ke database kami. Berlawanan dengan pendapat umum, fondasi dasar WordPress ini tidak akan berubah dalam waktu dekat. Semua yang dilakukan WordPress sekarang adalah memberikan pengembang cara baru untuk berinteraksi dengan data WordPress mereka melalui RESTful API.

Transfer Perwakilan Negara (REST)

Pengembang WordPress harus terbiasa dengan API secara umum, seperti API Kode Pendek dan API Opsi. API ini menentukan fungsionalitas untuk komponen yang terdiri dari WordPress, sehingga pembuat tema dan plugin dapat memperluas kemampuan inti WordPress. Namun, WP REST API sedikit berbeda.

REST , atau RESTful, API adalah tentang mengekspos data Anda secara aman ke permintaan HTTP dari sumber eksternal. Ini juga tentang menyiapkan arsitektur umum dan serangkaian protokol untuk menanggapi permintaan tersebut. Meskipun ada ide dan prinsip yang lebih maju di balik jenis layanan ini, itu berada di luar cakupan artikel ini.

Adanya WP REST API, khususnya setelah WordPress 4.7, berarti semua konten situs Anda, termasuk postingan, halaman, komentar, dan meta postingan publik, kini dapat diakses langsung sebagai data mentah. Ini juga berarti bahwa Anda dapat membuat perubahan pada data ini dari luar wp-admin tradisi jika Anda mau, mungkin melalui aplikasi seluler atau desktop.

Alih-alih menganggap data Anda hanya sebagai baris dalam database, Anda sekarang dapat memiliki akses serial ke data tersebut dalam bentuk JSON.

JSON - Apa yang terjadi dengan XML?

Dokter hewan WordPress memiliki banyak pengalaman dengan XML, format umum untuk berbagi konten antar situs.

Mirip dengan XML, JSON hanyalah mekanisme yang memungkinkan kita mentransfer data dengan mudah dengan menggabungkannya ke dalam sintaks tertentu. JSON sebenarnya adalah string, representasi tekstual dari objek JavaScript, menyimpan data Anda dalam satu set pasangan kunci-nilai. Representasi JSON umum dari posting WordPress mungkin terlihat seperti ini:

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Anda dapat menggunakan alat formatter JSON untuk mempercantik respons JSON jika perlu.)

Respons JSON lengkap melalui WP REST API akan menyertakan informasi tambahan tentang postingan, termasuk metadata. Dengan menggabungkan data ini dengan mudah ke dalam format JSON, Anda dapat berinteraksi dengan konten WordPress Anda dengan cara baru dan menarik.

Bukan kebetulan bahwa JSON paling baik dipasangkan dengan JavaScript. Karena semakin banyak pengembang WordPress yang mulai “Pelajari JavaScript Secara Mendalam”, kita akan melihat semakin banyak penggunaan WordPress sebagai backend.

Bagaimana Kami Menemukan Data: Ikuti Rute ke Titik Akhir

Mengakses semua data situs Anda melalui REST API semudah membuat URL.

Untuk situs WordPress apa pun yang menjalankan setidaknya versi 4.7, tambahkan string berikut ke akhir url situs Anda: /wp-json/wp/v2 (mis., http://example.com/wp-json/wp/v2 ). Letakkan URL itu di browser Anda, dan lihat apa yang muncul.

Hasilnya mungkin terlihat seperti data yang berantakan, kecuali Anda telah menginstal ekstensi browser yang membersihkan JSON. Kekacauan besar data itu adalah konten dan informasi meta situs WordPress khusus Anda dalam format JSON.

Dengan memuat konten itu, Anda baru saja menentukan rute dan meminta browser Anda untuk MENDAPATKANnya untuk Anda.

Rute adalah URL yang dipetakan ke metode tertentu. Inti WordPress membaca rute itu, dengan setiap garis miring '/' mewakili jalur tertentu, atau parameter, yang harus diikuti.

Jalur berakhir pada titik akhir , di mana fungsi jauh di dalam inti WordPress dapat membuat keputusan tentang data apa yang harus disediakan dan apa yang harus dilakukan dengan data apa pun yang disediakan.

Contoh titik akhir mungkin '/wp-json/wp/v2/posts/1', di mana kami telah menambahkan jalur '/posts' dan '/1'. Titik akhir khusus ini memberi tahu situs kami untuk menelusuri data kami, menarik posting kami, dan menarik posting dengan ID 1.

Apa yang membuat REST API sangat berguna adalah fakta bahwa ia dapat diperluas, artinya Anda dapat mengambil data apa pun di dalam situs web Anda, dan menambahkannya sebagai titik akhir. Sebagian besar fungsionalitas inti WordPress saat ini (atau akan segera) didukung.

Namun, pengembang tema dan plugin dapat mulai menambahkan konten dan pengaturan khusus mereka sebagai titik akhir, memungkinkan pengguna untuk berinteraksi dengan situs web mereka dengan cara baru.

Jika Anda ingin tahu tentang titik akhir yang saat ini tersedia di situs WordPress Anda, aplikasi browser seperti Postman menyediakan GUI khusus untuk menjelajahi API.

Header dan Otentikasi

Mengetik titik akhir URL ke browser tampak sederhana, tetapi sebenarnya menyertakan satu set tajuk default bersama dengan permintaan. Pada gilirannya, satu set tajuk juga dikirim kembali dengan respons. Header ini menyertakan banyak informasi berguna, tetapi yang paling penting untuk tujuan kami berkaitan dengan jenis permintaan yang kami buat dan apakah kami diautentikasi atau tidak.

Jika Anda masuk ke "alat pengembang" browser Anda, Anda dapat memeriksa header HTTP untuk aset apa pun yang dimuat ke jendela browser, termasuk file HTML, stylesheet CSS, gambar, dan banyak lagi.

Header pertama yang perlu dipertimbangkan adalah Metode Permintaan , yang berhubungan langsung dengan permintaan HTTP yang telah kita pelajari sebelumnya. Di sini kemungkinan besar Anda akan melihat GET sebagai metode permintaan, jika kita hanya melihat halaman.

Aplikasi yang memanggil REST API Anda dapat memilih untuk mengubah Metode Permintaan header menjadi POST.

Metode POST memberi tahu situs web Anda untuk memasukkan data baru atau mengubah data yang ada di database WordPress Anda. Dengan mengirimkan informasi melalui metode POST, aplikasi lain memiliki kemampuan untuk mengubah data Anda, tanpa masuk ke wp-admin.

Namun, tidak perlu khawatir, karena kecuali mereka juga menyertakan tajuk yang memberikan kredensial yang tepat untuk autentikasi , situs web Anda akan menolaknya.

CATATAN: Metode untuk mengautentikasi panggilan ke REST API Anda masih belum selesai, yang menjadikan autentikasi sebagai penghalang masuk terbesar bagi pengembang yang ingin bekerja dengan REST API untuk menambah atau mengubah data.

Untuk saat ini, ada opsi yang tersedia, termasuk plugin dari pengembang di belakang REST API. Ketika prosedur standar seputar otentikasi masuk ke inti, rintangan terakhir akan menjadi jelas untuk penggunaan WP REST API secara luas.

Contoh Aplikasi WP REST API

Apa yang membuat WP REST API begitu kuat adalah karena konsistensinya, sehingga kita dapat mengharapkan hasil dasar yang sama dari situs mana pun yang menjalankan WordPress 4.7 atau lebih tinggi. Namun, WordPress adalah API terdistribusi, artinya tidak hanya ada satu tempat untuk mendapatkan semua data.

Setiap situs web yang menjalankan WordPress adalah aplikasi unik, dengan pengguna dan otentikasi unik. Meskipun mungkin memerlukan teknik otorisasi yang berbeda untuk mengedit konten melalui REST API, kami sebenarnya dapat mengakses posting dari sebagian besar blog yang dijalankan WordPress dengan cukup mudah.

Untuk mendemonstrasikannya, kami akan membuat demo codepen cepat yang memuat kutipan dari posting terbaru dari beberapa blog populer yang berhubungan dengan WordPress yang, tentu saja, semuanya berjalan di WordPress. Sementara kami melakukannya, kami akan menyertakan formulir pencarian, sehingga kami benar-benar dapat mencari semua situs ini sekaligus, dan menarik artikel yang relevan dari masing-masing situs.

Terakhir, kami pasti akan menyertakan tautan untuk membaca teks artikel lengkap di situs web aslinya.

Fase 1: Mendapatkan Postingan Terbaru

Kita akan mulai dengan menyiapkan instance Vue cepat dan memasangnya ke sebuah elemen. Kami juga akan menyertakan Bootstrap sehingga kami dapat memiliki kisi dan gaya dasar pada elemen formulir yang akan kami tambahkan nanti.

Saat kita mendefinisikan data, kita akan menginginkan tempat untuk menyimpan nama situs (yang tidak termasuk dalam respon default), URL, dan postingan setelah kita mendapatkannya. Berikut ini contohnya:

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Anda akan melihat bahwa kami juga menyertakan parameter pertama kami di akhir URL, per_page . Biasanya, WP REST API akan membuat halaman hasil mengikuti aturan yang sama seperti yang akan membuat halaman loop WP_Query normal. Kami akan membatasi pertanyaan kami pada tiga posting pertama.

Selanjutnya, kita akan mendefinisikan metode loadPosts() , yang akan mengulang daftar sumber kita, mendapatkan hasilnya dengan vue-resource, dan mengisi larik posts kosong dari setiap sumber dengan hasilnya.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Kami juga akan menyertakan panggilan awal ke loadPosts() ketika instance Vue kami berhasil dipasang.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Menjaga loadPosts() sebagai metode terpisah akan berguna di masa mendatang saat kita mulai membuat beberapa panggilan ke API. Dalam HTML kita, kita akan menggunakan arahan rendering daftar sederhana dan sintaks template Vue untuk menampilkan semua posting kita.

Lihat Pena yang disematkan untuk demo yang berfungsi:

Lihat Contoh Pencarian Pen WP REST API (Fase Satu) oleh Brian Coords (@bacoords) di CodePen.

Tahap 2: Hasil Penyaringan

Mari tambahkan sidebar, dan buat beberapa filter untuk menampilkan/menyembunyikan berbagai sumber. Untuk melakukan ini, kita menambahkan properti baru ke objek sources , sebuah boolean yang akan kita beri nama .

Saat kita menambahkan filter, mari buat filter Vue untuk membantu kita menampilkan tanggal dengan benar juga. WordPress menyimpan tanggal dan waktu posting sebagai stempel waktu Unix.

Kami akan menggunakan perpustakaan pihak ketiga Moment.js untuk mengonversi tanggal ke format yang lebih mudah dibaca.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Lihat pena yang disematkan untuk demo yang berfungsi:

Lihat Contoh Pencarian Pen WP REST API (Fase Satu) oleh Brian Coords (@bacoords) di CodePen.

Fase Akhir: Kueri Pencarian

Di sini kita akan menambahkan parameter baru ke permintaan API kita. Kami telah menambahkan parameter per_page=3 untuk membatasi jumlah hasil yang kami dapatkan dari setiap situs. Jika ada sesuatu yang tertulis di bilah pencarian, kami akan menambahkannya sebagai parameter tambahan.

Ini akan memungkinkan kami untuk menggunakan fungsi pencarian bawaan setiap situs, sama seperti jika kami menanyakan bilah pencarian di situs web itu.

Kami akan menambahkan bilah pencarian, dan mengikatnya ke variabel menggunakan direktif v-model Vue.

Daripada langsung memanggil semua API, saat pengguna mulai mengetik, kami akan menambahkan tombol dan mengikat acara ke pengiriman formulir. Kemudian kami akan menambahkan metode ke instance Vue kami yang menambahkan parameter pencarian (URL yang dikodekan, tentu saja) ke URL.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Lihat pena yang disematkan untuk demo yang berfungsi:

Lihat Contoh Pencarian Pen WP REST API (Fase Satu) oleh Brian Coords (@bacoords) di CodePen.

Meskipun ini adalah contoh sederhana dari WP REST API, kita dapat membayangkan aplikasi potensial untuk sesuatu seperti ini di dalam WordPress itu sendiri. Misalnya, sudah ada metabox 'WordPress News'.

Kami dapat dengan mudah mengubah demo ini menjadi plugin WordPress, menampilkannya di dasbor WordPress. Sekarang kami telah mengintegrasikan kemampuan untuk mencari bantuan dari beberapa situs tutorial WordPress dan desain web teratas langsung dari situs web kami sendiri.

Potensi Masa Depan dari REST API

Meskipun contoh di atas hanya menggores permukaan dari kemampuan WP REST API, itu harus menyampaikan beberapa kemungkinan yang mulai muncul ketika Anda mulai bermain dengan data. Baik itu digunakan untuk meningkatkan pengalaman pengguna di situs web itu sendiri, atau untuk mengumpulkan dan memanipulasi data dari sumber eksternal, ini adalah alat yang ampuh.

Sementara beberapa pakar industri telah menyuarakan keprihatinan tentang kemungkinan konten Anda 'dihapus' dan ditampilkan di tempat lain, penting untuk diingat bahwa fungsi ini mirip dengan umpan RSS, dan sangat penting bagi pengelola situs untuk memiliki kontrol yang jelas tentang data apa itu dan apa adanya. tidak umum.

Saat WP REST API menjadi lebih tertanam ke dalam struktur WordPress, kita akan mulai melihat efeknya, mungkin tanpa menyadarinya. Contohnya berkisar dari yang sederhana (Kutipan tentang Desain karya Chris Coyier), hingga aplikasi satu halaman yang kompleks (situs Guggenheim).

Kasus penggunaan populer lainnya untuk WP REST API adalah pengembangan aplikasi seluler.

Karena konten sangat mudah diakses melalui REST API, pengembang dapat membuat aplikasi asli untuk iOS dan Android, dan menghindari keharusan membuat sumber data duplikat.

Saat pengguna berinteraksi dengan aplikasi seluler ini, mereka akan dapat mengambil, dan secara langsung mengubah data situs web asli, tanpa pengembang harus membuat infrastruktur kompleks apa pun untuk mendukungnya.

Namun, aplikasi REST API yang menghadap pengunjung ini hanyalah permulaan, karena implikasi sebenarnya jauh lebih dalam. Salah satu tujuan tim pengembangan inti adalah mulai menggunakannya di seluruh antarmuka wp-admin.

Dengan pembaruan WordPress di masa mendatang, kita akan mulai melihat admin-ajax diganti demi API, semoga meningkatkan kecepatan fungsi dasar, seperti mengedit menu atau menerbitkan posting.

Ini berpotensi berjalan seiring dengan peningkatan fokus WordPress pada Customizer dan Editor sebagai titik awal yang ramah pengguna untuk pemula WordPress.

Meskipun WP REST API sangat berguna, masih banyak yang harus dilakukan. API tidak lengkap. Masih ada lebih banyak fitur dan titik akhir untuk ditambahkan.

Akhirnya, Anda akan dapat berinteraksi dengan situs WordPress Anda bahkan tanpa mengunjunginya. Dan sementara banyak layanan sekarang menggunakan API khusus untuk berinteraksi dengan WordPress, perpindahan ke satu API REST WordPress standar berarti bahwa lebih banyak situs dan layanan dapat saling terhubung, berbicara dalam bahasa yang sama.

WordPress dimulai sebagai platform blogging, cara bagi para blogger untuk terhubung, dan berbagi pemikiran dan ide mereka. Dengan pengembangan REST API WordPress, kita akan mulai melihat level baru dalam menghubungkan dan berbagi di balik layar. Ini akan memungkinkan pengguna untuk membangun pemikiran dan ide mereka dengan cara yang belum pernah dipertimbangkan sebelumnya, membawa WordPress dan penggunanya ke batas yang sama sekali baru.