Pengenalan HTMX di WordPress: Membuat Halaman Lebih Dinamis dan Responsif

Introduction

Halo, teman-teman developer! Kali ini, kita akan berkenalan dengan HTMX, sebuah library yang memungkinkan kita menambahkan interaksi dinamis ke dalam aplikasi web tanpa perlu menulis banyak JavaScript. HTMX sangat cocok untuk kita yang ingin membuat situs WordPress lebih interaktif dan responsif tanpa mengorbankan kesederhanaan. Yuk, kita mulai!

Handbook: https://htmx.org/docs/

Sebelum mulai, Kalian bisa download template yang sudah saya buat untuk bahan belajar atau implementasi. Theme ini dibuat menggunakan Tailwind dan Daisy UI.

Repo: https://github.com/apradipta10/gagapress-daisy

Apa itu HTMX?

HTMX adalah library open-source yang memungkinkan elemen HTML untuk membuat request HTTP (GET, POST, PUT, DELETE) dan memperbarui halaman secara dinamis. Dengan menggunakan HTMX, kita dapat mengelola interaksi front-end hanya dengan menambahkan atribut khusus pada elemen HTML, tanpa perlu menulis kode JavaScript yang ribet.

Di artikel sebelumnya saya pernah membahas penggunaan admin-ajax di WordPress dari untuk berinteraksi dengan functions yang sudah dibuat, namun cara interaksi tersebut harus melalui JavaScript.
Nah, jika menggunakan HTMX, kita dapat berinteraksi langsung tanpa melalui Javascript!

Best Practice Menggunakan admin-ajax.php di WordPress

Mengapa Menggunakan HTMX di WordPress?

Simplicity: Menggunakan HTMX membuat kode kita lebih bersih dan mudah dipahami, karena kita dapat menghindari penggunaan JavaScript yang berlebihan.
Flexibility: HTMX bekerja dengan berbagai framework backend, termasuk WordPress, sehingga mudah diintegrasikan.
Performance: Mengurangi jumlah JavaScript yang harus dieksekusi oleh browser, sehingga meningkatkan kinerja halaman.

Cara Mengintegrasikan HTMX di WordPress

Langkah 1: Menambahkan HTMX ke WordPress

Pertama, kita perlu menambahkan HTMX ke tema WordPress kita. Tambahkan kode berikut ke dalam file functions.php di tema Anda:

function enqueue_htmx_script() {
    wp_enqueue_script('htmx', 'https://unpkg.com/[email protected]', [], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_htmx_script');

Di atas adalah function untuk integrasi HTMX ke dalam WordPress theme menggunakan CDN, namun jika install HTMX secara locally akan lebih baik.

Anda bisa cek disini untuk mengetahui versi terbaru dari HTMX : https://github.com/bigskysoftware/htmx

Langkah 2: Membuat Halaman Dinamis dengan HTMX

Mari kita buat contoh sederhana untuk memuat konten dinamis menggunakan HTMX. Kita akan membuat sebuah tombol yang, ketika diklik, akan memuat konten baru dari server tanpa me-refresh halaman.

Langkah 2.1: Menambahkan Shortcode untuk Konten Dinamis

Tambahkan kode berikut ke functions.php untuk membuat shortcode yang akan digunakan untuk memuat konten dinamis:

function load_dynamic_content() {
    return '<p>Konten ini dimuat secara dinamis menggunakan HTMX!</p>';
}
add_shortcode('dynamic_content', 'load_dynamic_content');

Langkah 2.2: Membuat Endpoint untuk Konten Dinamis

Selanjutnya, kita buat endpoint untuk menangani permintaan AJAX dari HTMX. Tambahkan kode berikut ke functions.php:

function get_dynamic_content() {
    echo do_shortcode('[dynamic_content]');
    wp_die();
}
add_action('wp_ajax_get_dynamic_content', 'get_dynamic_content');
add_action('wp_ajax_nopriv_get_dynamic_content', 'get_dynamic_content');

Langkah 2.3: Menambahkan HTML dan Atribut HTMX

Sekarang, tambahkan HTML dan atribut HTMX ke dalam template Anda (misalnya, di page.php):

<div id="content">
    <button hx-get="<?php echo admin_url('admin-ajax.php?action=get_dynamic_content'); ?>" hx-target="#dynamic-content">Get Content</button>
    <div id="dynamic-content"></div>
</div>

Langkah 3: Testing Implementasi HTMX

Setelah semua kode ditambahkan, buka halaman yang berisi kode di atas. Klik tombol “Get Content” dan perhatikan bagaimana konten baru dimuat secara dinamis tanpa me-refresh halaman.

Di atas ada cara sederhana implementasi HTMX di WordPress menggunakan method GET. Namun selain GET, banyak sekali method lainnya yang bisa Anda gunakan.

Fitur Lain dari HTMX

HTMX memiliki banyak fitur lainnya yang dapat membuat situs WordPress Anda lebih interaktif dan dinamis:

hx-post: Mengirim data ke server menggunakan metode POST.
hx-put: Mengirim data ke server menggunakan metode PUT.
hx-delete: Mengirim permintaan DELETE ke server.
hx-trigger: Menentukan event yang memicu permintaan HTMX.
hx-swap: Menentukan bagaimana respons dari server harus dimasukkan ke dalam halaman.

Untuk tutorial lengkap serta penjelasannya bisa cek di video Youtube berikut

Kesimpulan

HTMX adalah sangat powerful dan mudah digunakan untuk menambahkan interaktivitas ke dalam aplikasi WordPress tanpa perlu menulis banyak kode JavaScript. Dengan mengikuti langkah-langkah di atas, Anda bisa mulai menggunakan HTMX di proyek WordPress Anda dan membuat halaman yang lebih dinamis dan responsif. Selamat mencoba!