Cara Menambahkan Reading Progress Bar di WordPress: Dengan & Tanpa Plugin

Pernahkah Anda menghabiskan waktu berjam-jam menulis artikel panjang, hanya untuk melihat pengunjung meninggalkan halaman dalam hitungan detik? Konten yang panjang seringkali terasa mengintimidasi. Di sinilah reading progress bar menjadi solusi elegan.

Sebuah indikator progres baca adalah bar visual yang menunjukkan sejauh mana pembaca telah menggulir halaman. Mirip seperti bar energi di video game, ini memberikan feedback visual yang memotivasi pembaca untuk terus lanjut hingga akhir.

Mari kita bahas dua metode utama untuk menambahkan reading progress bar di WordPress: cara super mudah dengan plugin dan cara kustom tanpa plugin.

Mengapa Ini Penting untuk Website Anda?

• Meningkatkan Pengalaman Pengguna (UX): Pembaca tahu persis berapa banyak konten yang tersisa, mengurangi ketidakpastian.

• Menurunkan Bounce Rate: Memberikan insentif visual untuk terus menggulir, membuat pengunjung tinggal lebih lama.

• Memberikan Rasa Pencapaian: Melihat bar terisi penuh memberikan kepuasan psikologis kecil bagi pembaca.

Cara 1: Dengan Plugin (Mudah, Cepat, Kaya Fitur)

Ini adalah rute yang paling direkomendasikan untuk 99% pengguna WordPress.

1. Worth The Read: Pilihan Terlengkap & Paling Populer

Plugin ini sangat ringan namun fiturnya lengkap. Setelah menginstal dan mengaktifkannya, Anda bisa langsung menuju Settings > Worth The Read. Di sana, Anda bisa mengatur posisi bar (atas atau bawah), mengubah warna, dan bahkan memilih agar bar hanya tampil di postingan, bukan di halaman.

2. Reading Position Indicator: Solusi Super Ringan & Minimalis

Jika Anda hanya butuh progress bar fungsional tanpa banyak pengaturan, ini adalah pilihan yang tepat. Plugin ini sangat sederhana dan to-the-point. Cukup instal, aktifkan, buka pengaturannya untuk memilih warna dan ketebalan bar, lalu simpan. Selesai dalam satu menit.

Cara 2: Tanpa Plugin (Lanjutan, Ringan, Kontrol Penuh)

Metode ini cocok jika Anda ingin website tetap ramping dan nyaman mengedit kode.

PERINGATAN: Metode ini melibatkan pengeditan file tema. Kesalahan bisa merusak situs Anda. Selalu buat backup lengkap sebelum memulai. Sangat disarankan untuk menggunakan Child Theme atau plugin “Code Snippets” agar perubahan tidak hilang saat tema di-update.

Langkah 1: Tambahkan Kode HTML & JavaScript ke Tema

Kode ini akan menyisipkan elemen bar dan logika scrolling-nya.

1. Buka Tampilan > Penyunting Berkas Tema (Appearance > Theme File Editor).

2. Dari daftar file di kanan, pilih Functions.php.

3. Salin dan tempel kode berikut di bagian paling bawah file:

/**
 * Menambahkan Reading Progress Bar (HTML, CSS, JS)
 * Ditempel di functions.php
 */
function wps_add_reading_progress_bar() {
    // Hanya tampilkan di halaman postingan tunggal
    if ( is_single() ) {
        // 1. Elemen HTML untuk barnya
        $progress_bar_html = '<div class="reading-progress-bar"></div>';
        
        // 2. Kode JavaScript untuk menghitung scroll
        $progress_bar_js = "
            <script>
                window.addEventListener('scroll', function() {
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                    var scrolled = (scrollTop / scrollHeight) * 100;
                    document.querySelector('.reading-progress-bar').style.width = scrolled + '%';
                });
            </script>
        ";
        
        // 3. Gabungkan dan tampilkan di footer
        echo $progress_bar_html . $progress_bar_js;
    }
}
add_action('wp_footer', 'wps_add_reading_progress_bar');

4. Klik Perbarui Berkas.

Langkah 2: Tambahkan Styling (CSS) agar Tampil Cantik

Sekarang, kita perlu membuat bar tersebut terlihat bagus.

1. Buka Tampilan > Sesuaikan (Appearance > Customize).

2. Klik menu CSS Tambahan (Additional CSS).

3. Salin dan tempel kode CSS berikut:

/* Styling untuk Reading Progress Bar */
.reading-progress-bar {
    position: fixed; /* Tetap di layar saat scroll */
    top: 0;
    left: 0;
    width: 0%; /* Mulai dari 0% */
    height: 5px; /* Ketebalan bar */
    background-color: #0073aa; /* Warna bar, ganti sesuai selera */
    z-index: 9999;
    transition: width 0.1s ease-out;
}

4. Klik Terbitkan (Publish). Sekarang progress bar Anda sudah aktif dan terlihat profesional!

Kesimpulan: Pilih Jalur Anda

• Pilih JALUR PLUGIN jika: Anda pemula, ingin hasil cepat, dan butuh opsi kustomisasi visual tanpa menyentuh kode.

• Pilih JALUR MANUAL jika: Anda nyaman dengan kode, ingin solusi yang 100% ringan, dan menginginkan kontrol penuh atas implementasinya.

Apapun metodenya, menambahkan reading progress bar di WordPress adalah sebuah langkah kecil yang memberikan dampak besar pada pengalaman pembaca dan citra profesional website Anda.

Etgar Kurniawan

Etgar Kurniawan adalah penulis konten teknologi di Teknovatif.com, yang antusias membahas perkembangan dompet digital, aplikasi, dan layanan teknologi di Indonesia.