Wordpress →

Cara Membuat atau Menampilkan Paginasi Komentar di WordPress Tanpa Plugin

by – at 23:07 – 4272 views

70

Kemarin saya sempet coba untuk membuat paginasi komentar di blog saya dari tutorial yang saya dapat. Alhamdulillah berjalan dengan baik. Sekarang saya mau sharing cara membuat atau menampilkan paginasi komentar di WordPress tanpa plugin. Kebetulan teman saya juga tertarik dan bertanya bagaimana cara membuatnya.

Contoh default paginasi komentar pada sebuah postingan adalah seperti gambar yang ada di bawah ini :

Default Paginasi Komentar pada WordPress
Default Paginasi Komentar pada WordPress

Dan di bawah ini adalah contoh gambar paginasi komentar yang sudah dimodifikasi seperti yang sudah saya coba terapkan di blog saya :

Paginasi Komentar pada WordPress
Paginasi Komentar pada WordPress

Lalu apa kegunaan paginasi pada komentar? Dengan mengaktifkan paginasi komentar ini akan membuat loading pada sebuah postingan blog menjadi lebih ringan karena tidak semua komentar yang terdapat pada postingan tersebut tampil seluruhnya tetapi terbagi menjadi beberapa halaman.

Kekurangan default paginasi komentar seperti gambar pertama adalah pengunjung tidak bisa leluasa menelurusi daftar komentar yang ada. Harus meng-klik satu-satu link Older Comments atau Newer Comments untuk menelusuri daftar komentar yang ada, tidak bisa langsung berpindah ke halaman daftar komentar secara leluasa. Sehingga dengan membuat paginasi komentar yang dimodifikasi seperti pada gambar kedua akan memudahkan pengunjung yang ingin menelurusi daftar komentar dengan lebih leluasa. Oke langsung aja ke caranya keburu ditimpuk karena kelamaan :lol:

  1. Masuk ke dashboard, pilih Settings > Discussion. Aktifkan atau ceklis pilihan Break Comments Into Pages.

    Setting Paginasi Komentar pada WordPress
    Setting Paginasi Komentar pada WordPress
  2. Masih di dashboard, pilih Appearance > Editor > pilih file comments.php di sebelah kanan. Lalu temukan baris script ini : 
    <div class="navigation">
  <div class="alignleft"><?php previous_comments_link() ?></div>
  <div class="alignright"><?php next_comments_link() ?></div>
</div>

    Kalau tidak sama persis, yang penting ada baris <?php previous_comments_link() ?> dan <?php next_comments_link() ?>. Lalu ganti baris script di atas dengan script di bawah ini dan jangan lupa Save perubahannya :

    <div class="paginasi-komentar">
  <?php paginate_comments_links(); ?>
</div>
  3. Tinggal modifikasi tampilannya melalui file CSS nya. Di dashboard, pilih Appearance > Editor > pilih file style.css di sebelah kanan. Masukkan script di bawah ini di dalam file tersebut. Bebas ditempatkan di mana saja, mau di baris awal ataupun di baris akhir dan jangan lupa Save perubahannya : 
    .paginasi-komentar {
  margin: 10px 0 20px;
  padding: 5px 1px;
  text-align: center;
}

.paginasi-komentar a {
  padding: 3px 6px 4px;
  margin: 3px;
  text-decoration: none;
  border: 1px solid #ccc;
  color: #666;
  background-color: inherit;
}

.paginasi-komentar a:hover {
  border: 1px solid #444;
  color: #444;
  background-color: #eee;
}

.paginasi-komentar .current {
  padding: 3px 6px 4px;
  margin: 3px;
  font-weight:bold;
  border: 1px solid #666;
  color: #444;
  background-color: #eee;
}

Sampai tahap ini bisa dikatakan sudah selesai. Tinggal lihat perubahannya. Jika ada yang masih bingung, bisa tanyakan di kolom komentar di bawah ya. Semoga bermanfaat.

Faisal Rachmadin
Faisal Rachmadin / Night Surfer. Social Media Disorder. Musicalizer. Computerholic. ROMANISTI ~ Vincere o perdere, Roma rimangono sempre nel mio cuore. AS Roma per Sempre.

Comments (70)

      • Cepet mas, kan tutorialnya mas Faisal gampang dipahami :)
        aq pake css pagination default theme mas, biar gak nambah ukuran css yang belum tak minify sampe sekarang hehehe…..
        Tapi ternyata paginationnya malahan nempel sama bawahnya, padahal margin bawahnya dah tak ubah. pa masih pengaruh cache yah, entahlah.
        Ditunggu kisah kasih selanjutnya mas, xixixixi

    • Waduh kedengerannya ngeri, “kontributor wordpress indonesia”, saya belum sampe tahap itu gan hehehe

      Monggo asal gak full copy sama tetep cantumin credit linknya yo gan :)

  12. Untuk seorang pelupa seperti saya, fitur ini kurang menarik, Gan.
    Saya bisa saja lupa pernah menuliskan komentar pada sebuah post, dan kemudian menuliskan komentar lagi yang kurang lebih sama isinya. Akhirnya malah terlihat seperti nyampah. :(
    Kalau semua komentar terlihat dalam satu halaman, itu tidak akan terjadi.

        • Kalo untuk tema dari Pagelines memang agak sulit diterapinnya mas karena dia pake framework bikinan sendiri jadi struktur temanya beda dari yang biasanya.

          Saya juga kebingungan pas nyoba utak atik tema Platform dari Pagelines ya karena strukturnya yang ‘unik’.

          Nanti saya coba liat lagi deh.

          Update :
          Udah saya coba di tema Platform, bisa mas. Tinggal buka comments.php terus cari script

          [div class=”navigation”] . . . [/div]

          terus ganti jadi :

          [div class=”navigation”]
          [div class=”paginasi-komentar”]
          [?php paginate_comments_links(); ?]
          [/div]
          [/div]

          Jangan lupa masukin script CSS nya. Semoga membantu.

          NB : ganti kurung siku sama kurung lancip ya.

  26. Sip tutorialnya,, saya juga menggunakan cara ini untuk membuat paginasi blog saya, hehe.. ternyata udah di tulis tutorialnya sama mas Faisal..
    salam kenal mas.. hehe.. :D

  27. Saya sempat juga pakai fitur ‘break comments’ ini, tapi setelah difikir-fikir itu kurang interaktif, karena kita kadang menemukan pertanyaan yg sama akibat pengunjung tidak membaca dulu komentar2 sebelumnya, dan itu perlu waktu jg kan? :)

    Tp, ini jg pilihan. Yang mana yg terbaik bagi pengunjung, itu saja yg harus diutamakan.

    • Iya mas, kebetulan ada teman blogger saya yang mengatakan hal yang sama kaya mas Darin ini. Sepertinya memang ini salah satu kerugian atau kelemahan dari penerapan trik ini :)

    • Cuma sedikit sebenernya bro. Soalnya daftar komentar memang jadi lebih sedikit yang di load, tapi elemen-elemen yang lain (header, artikel, sidebar, & footer) ya tetep diload juga.

  33. ehehe iya sih jadi lebih ringkas apalagi bagi yang jumlah komennya banyak :D tapi saya lebih suka diliatin semua biar yang komen juga bisa komen di komen blogger lain yang komen di blog saya :D tapi nice tutor mas..

    • Ada kekurangan dan kelebihannya memang mas, kelebihannya jadi lebih ringkas, lebih cepet loading halamannya karena gak langsung semua daftar komentar ditampilkan (kalo banyak komentar yang masuk pada halaman tersebut), dan secara gak langsung bisa dapet pageview lebih karena kalo mau ngeliat komentar yang lain otomatis ngeloading halaman juga. Kekurangannya ya itu, diskusi antar komentatornya jadi berkurang. Pilihannya kembali ke masing-masing sih :)

  36. mas faisal,knapa ya break komentar ku walaupun sudah di set dengan jumlah tampilan tetap aja jika kita masuk ke next page tampilannya adalah komentar yang sama..thanks atas pencerahannya

    • Maksudnya gimana mas? Komentar yang terlihat cuma itu-itu aja? Hmm seharusnya sih gak ya. Saya udah nyoba di tema yang mas pake juga. Hasilnya berfungsi dengan baik mas. Coba mas di Pengaturan Diskusi ceklis pilihan Aktifkan Komentar Bergulir…, ceklis juga pilihan Bagi komentar…, isi kotak isiannya dengan misalnya 3. Seharusnya berhasil juga mas sama seperti yang udah saya coba. Semoga membantu.

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Isian wajib ditandai *

Anda dapat memakai tag dan atribut HTML ini: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>