Kursus WordPress

Appearance

Load WP Content with JS (WordPress REST API) ​

Catatan Awal ​

Jika di video instruktur menggunakan localhost:3000, abaikan — gunakan domain lokal yang sudah dipakai selama kursus (contoh: fictional-university.local).

Apa Itu WordPress REST API? ​

WordPress menyediakan URL khusus yang mengembalikan data dalam format JSON (JavaScript Object Notation). URL-URL ini dikenal sebagai WordPress REST API.

URL Dasar REST API ​

https://fictional-university.local/wp-json/wp/v2/posts
  • /wp-json/wp/v2/posts → JSON untuk 10 post terbaru
  • /wp-json/wp/v2/pages → JSON untuk 10 page terbaru

Memahami Format JSON ​

JSON pada dasarnya adalah array of objects:

json
[
  {
    "id": 1,
    "title": { "rendered": "About Us" },
    "date": "2023-01-01",
    "link": "https://fictional-university.local/about-us/"
  },
  {
    "id": 4,
    "title": { "rendered": "Privacy Policy" },
    "date": "2023-01-02",
    "link": "https://fictional-university.local/privacy-policy/"
  }
]
  • [ = array (koleksi beberapa nilai)
  • { = object (setiap object = 1 post/page)
  • Property: id, title, date, link, content, dll.

Postman (Opsional) ​

Postman = aplikasi gratis untuk melihat JSON dengan format rapi (satu property per baris). Download di getpostman.com.

Kustomisasi URL REST API ​

/wp-json/wp/v2/posts?per_page=2        ← hanya 2 post
/wp-json/wp/v2/posts/7                  ← post dengan ID 7
/wp-json/wp/v2/posts?search=biology     ← cari post berisi "biology"

Parameter ?search= inilah yang akan kita gunakan untuk live search.

Menggunakan jQuery $.getJSON() di JavaScript ​

Langkah: Modifikasi getResults() di Search.js ​

js
// modules/Search.js

getResults() {
  $.getJSON(
    "https://fictional-university.local/wp-json/wp/v2/posts?search=" + this.searchField.val(),
    (posts) => {
      // posts = array of objects (JSON data dari WordPress)
      alert(posts[0].title.rendered);
    }
  );
}

Penjelasan: ​

  1. $.getJSON(url, callback) — method jQuery untuk mengirim HTTP GET request ke URL dan menerima JSON
  2. Argument pertama: URL REST API dengan parameter search
  3. Argument kedua: callback function yang dijalankan setelah server merespons
  4. Parameter posts: menampung seluruh JSON data yang dikirim WordPress
  5. posts[0]: item pertama di array (index 0)
  6. .title.rendered: property title adalah object yang berisi .rendered (judul post)

Membuat Search Dinamis ​

Ganti hardcoded "biology" dengan value dari search field:

js
$.getJSON(
  "https://fictional-university.local/wp-json/wp/v2/posts?search=" + this.searchField.val(),
  (posts) => {
    alert(posts[0].title.rendered);
  }
);

this.searchField.val() → mengambil apapun yang user ketik di text field.

Hasil: ​

  • Search "biology" → alert "Biology is Cool"
  • Search "award" → alert "We Won an Award"
  • Ini adalah real-time JavaScript application pertama kita!

Langkah selanjutnya: menampilkan hasil sebagai HTML (bukan alert popup).