Membuat Tombol Sembunyikan dan Tampilkan Komentar GeneratePress

Panduan menyembunyikan dan menampilkan komentar di GeneratePress menggunakan tombol khusus. Berguna untuk artikel yang memiliki ratusan atau ribuan komentar.

Kolom komentar yang berisikan ratusan hingga ribuan komentar secara tidak langsung akan membuat waktu pemuatan (loading) halaman sebuah artikel akan memakan waktu (meski hanya beberapa detik).

Salah satu solusinya kita bisa melakukan beberapa cara seperti melakukan lazy load kolom komentar atau secara default menyembunyikannya dan menyediakan tombol khusus untuk menampilkannya.

Untungnya, bagi kita pengguna theme GeneratePress bisa menangani kolom komentar ini supaya lebih ringkas dan mengurangi beban waktu pemuatan halaman sebuah artikel tanpa harus menggunakan plugin.

Jika Anda tertarik ingin menerapkan cara untuk menyembunyikan kolom komentar, bisa mengikuti cara yang sangat mudah dan sederhana ini.

Dan yang terpenting, metode ini hanya bisa diterapkan bagi Anda yang menggunakan GeneratePress Premium saja. Belum pakai GP Premium? Anda bisa membeli melalui WPNesia secara resmi dengan harga terjangkau. Silahkan hubungi kami.

Cara Menyembunyikan Komentar di GeneratePress

Tujuan panduan ini adalah membuat secara standar kolom komentar akan disembunyikan. Jika pembaca ingin melihat komentar, maka dia harus klik tombol tampilkan komentar. Dan tombol ini sekaligus untuk menutup kembali kolom komentar.

Tombol sederhana yang akan kita buat adalah seperti gambar berikut ini.

1. Buat Kode Menyembunyikan Komentar

Buat Elements -> Hook kemudian beri nama bebas terserah Anda. Masukkan kode berikut:

<script type="text/javascript">
const displayEl = document.querySelector(".display-comments");
const commentsEl = document.querySelector(".comments-area");

displayEl.addEventListener("click", ()=>{
    commentsEl.classList.toggle("visible");
});
</script>

Terapkan settings sebagai berikut:

• Hook: wp_footer
• Display Rules: Pos
• Terbitkan.

2. Buat Tombol Tampilkan/Sembunyikan

Buat Elements -> Hook dan beri nama bebas sesuai kehendak Anda. Kemudian masukkan kode berikut ini:

<center><button type="button" class="display-comments">Tampilkan/Sembunyikan Komentar</button></center>

Terapkan settings berikut ini:

• Hook: Generate_before_comments_container
• Display Rules: Pos
• Terbitkan.

3. Kode CSS

Langkah terakhir adalah memasukkan kode CSS berikut ini di CSS Tambahan.

.comments-area {
    display: none;
}

.comments-area.visible {
    display: block;
}

Terbitkan.

Jika Anda sukses menerapkan cara ini, secara standar atau default komentar akan disembunyikan. Untuk menampilkan komentar, pembaca harus klik tombol tersebut untuk menampilkan komentar. Dan untuk menyembunyikannya lagi, klik kembali tombol tersebut.

Mudah sekali kan?

Baca juga: Menambahkan Informasi Waktu Membaca Artikel di GeneratePress

Kesimpulan

Metode menyembunyikan kolom komentar seperti ini sangat cocok bagi artikel yang memiliki ratusan atau bahkan ribuan komentar. Namun secara umum penerapan cara ini juga sangat disarankan untuk berbagai jenis blog yang menggunakan theme GeneratePress.

Jika Anda tidak ingin ribet dengan cara manual seperti ini, cara termudah tentu saja menggunakan plugin Lazy Load for Comments. Namun jika kita bisa mengatasi masalah sederhana seperti ini tanpa harus menggunakan plugin, kenapa tidak kita terapkan saja? Semoga bermanfaat.

Baca juga:

• Cara Menghilangkan Kolom URL di Komentar GeneratePress
• Membuat Author Box di GeneratePress Tanpa Plugin
• Membuat Artikel Terkait di GeneratePress (Related Post)
• Menggunakan Google Fonts Local di GeneratePress
• Membuat Tombol Sosial Media Share di GeneratePress.