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.

Menyembunyikan Komentar di GeneratePress
Tombol Menampilkan dan Menyembuntikan Komentar di GeneratePress

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.
Menyembunyikan Komentar di GeneratePress
Menyembunyikan Komentar

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.
Menyembunyikan Komentar di GeneratePress
Tombol Tampilkan Komentar

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.

Menyembunyikan Komentar di GeneratePress
Setelah Tombol Tampilkan diklik

Mudah sekali kan?

Baca juga:

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.

Blogger, writer, dan WordPress enthusiast. Lulusan Teknik Informatika yang berkecimpung di dunia internet sejak 2002.

Tinggalkan komentar