Ikhtisar Chapter 16: Non-JS Fallback Search (Pencarian Tradisional)

Apa yang Dipelajari?

Cara membuat pencarian WordPress tradisional (tanpa JavaScript) sebagai fallback — termasuk form pencarian, halaman hasil, dan template parts untuk setiap post type.

---

Poin Utama

1. Mengapa Perlu Fallback?

99% pengunjung punya JavaScript aktif, tapi 1% tidak. Kita tetap perlu menyediakan cara mencari konten tanpa JS — lewat form HTML biasa.

---

2. Komponen yang Dibuat

File	Fungsi
page-search.php	Halaman dengan form pencarian (untuk page dengan slug "search")
search.php	Template hasil pencarian (menggantikan index.php untuk URL ?s=kata)
searchform.php	Form pencarian reusable (dipanggil dengan get_search_form())
template-parts/content-{type}.php	Tampilan per post type di hasil pencarian

---

3. Form Pencarian

<form action="<?php echo esc_url(site_url('/')); ?>" method="get">
  <input type="search" name="s" placeholder="What are you looking for?">
  <input type="submit" value="Search">
</form>

• name="s" — huruf kecil, format standar WordPress untuk pencarian
• method="get" — agar keyword muncul di URL (?s=kata)
• esc_url() — fungsi keamanan untuk escape URL

---

4. Template Parts Dinamis

Di search.php, tampilan otomatis menyesuaikan post type:

get_template_part('template-parts/content', get_post_type());

WordPress mencari file content-{post_type}.php — misalnya content-professor.php, content-event.php, dll. Setiap post type bisa punya tampilan berbeda.

---

5. Keamanan (XSS Prevention)

Selalu escape output dari user input:

esc_html(get_search_query(false))  // untuk teks di HTML
esc_url(site_url('/'))             // untuk URL

---

6. Ikon Search sebagai Link

Ikon search di header diubah dari <span> ke <a href="/search"> — jadi tanpa JS, klik tetap mengarah ke halaman pencarian. Dengan JS aktif, return false mencegah navigasi dan menampilkan overlay search.

---

Satu Kalimat

Chapter ini memastikan fitur pencarian tetap berfungsi tanpa JavaScript — dengan form HTML tradisional, template hasil pencarian per post type, dan praktik keamanan yang benar.