Solusi Comment Reply WordPress Error Karena Rocket Loader Cloudflare

Mungkin teman-teman pengguna WordPress dan Cloudflare disini pernah mengalami tombol “Reply Comment” atau “Balas Komentar” tidak bisa diklik. Ketika kita klik tombol balas komentar, maka form komentar akan muncul di bawah komentar yang akan kita balas. Tetapi yang terjadi, form tidak muncul. Udah matikan semua plugin tetap saja tombol balas komentar tidak bekerja sebagaimana biasanya.

comment-reply.min.js

Sebelum kita menemukan masalahnya, kita harus tau bahwa tombol reply comment bisa bekerja karena file javascript comment-reply.min.js yang diload oleh core WordPress secara default. Kalian bisa check di source halaman, file “wp-includes/js/comment-reply.min.js” berhasil di load dengan baik dan tidak ada masalah.

Defer Parsing Javascript

Defer Parsing JavaScript merupakan salah satu teknik untuk mempercepat loading halaman website. Dengan melakukan menunda loading javascript, website dapat tampil tanpa harus menunggu javascript dahulu, sehingga loading website Anda menjadi lebih cepat.

Teknik ini diterapkan oleh cloudflare dengan fiturnya yang bernama Rocket Loader. Fitur ini merupakan fitur gratis dan secara default aktif.

Rocket Loader Cloudflare

Rocket Loader merupakan fitur default dari Cloudflare untuk membuat website memprioritaskan menampilkan konten terlebih dahulu dengan cara menunda loading dari file-file javascript. Nah hal ini menyebabkan beberapa javascript tidak bekerja semestinya, salah satunya adalah comment-reply.min.js.

Sumber : Rocket Loader Cloudflare

Solusi Pertama

Solusi pertama adalah mematikan fitur Rocket Loader.

Anda bisa login ke akun cloudflare kalian, kemudian ke menu Speed, kemudian sub menu Optimization, kemudian scroll cari Rocket Loader. Klik toggle on/off di sebelah kanan, jika hijau artinya aktif.

Solusi Kedua

Fitur Rocket Loader ini sebenarnya bagus untuk optimasi kecepatan loading website. Jadi cukup sayang jika fitur ini di nonaktifkan. Solusi kedua kita akan buat pengecualian untuk file comment-reply.min.js.

Sesuai dokumentasi di cloudflare, kita bisa mengecualikan beberapa file javascript dengan memberikan attribute data-cfasync=”false” pada tag script javascript.

comment-reply.min.js di load secara default oleh WordPress. Jadi kita akan filter output dari script tag yang dihasilkan oleh WordPress.

Copy dan aktifkan script ini.

function rocket_loader_comment_reply( $tag, $handle, $src ) {
    if ( 'comment-reply' !== $handle )
       return $tag;

    return str_replace( ' src', ' data-cfasync="false" src', $tag );
}
add_filter( 'script_loader_tag', 'rocket_loader_comment_reply', 10, 3 );

Script bisa diletakan di functions.php pada folder themes yang aktif, atau gunakan plugin Code Snippets untuk mengaktifkan script tersebut.

Menurutku solusi kedua ini lebih baik, karena kita tetap bisa mendapatkan keuntungan dari Rocket Loader.

Selamat mencoba. 🙂