Infinite Scroll, Tampilkan Artikel Blog Kalian Tanpa Batas

posted in: Blog | 0

Di Facebook setiap kali kalian scroll sampai ke dasar, pasti status yang selanjutnya keluar secara otomatis. Mau tahu caranya kalau di WordPress?

Di platform WP hal ini bisa kalian lakukan dengan menggunakan sebuah plugin bernama infinite-scroll.

Pada awalnya sih saya agak bingung cara mengaturnya. Ternyata jika sudah paham, mudah saja.

Sebelumnya saya beritahukan, bahwa tutorial ini diperuntukkan bagi mereka yang sudah memiliki pengetahuan dasar WordPress dan CSS, ya.

Disini saya akan bantu kalian dengan menjelaskan caranya. Setelah instal dan aktivasi plugin yang bersangkutan, pergi ke Settings > infinite scroll. Kalian akan melihat tampilan berikut ini.

Yang perlu kalian lakukan adalah memasukkan id atau class yang tepat ke 4 parameter yang ditunjukkan di atas, yaitu:

  1. Content Selector
  2. Navigation Selector
  3. Next Selector
  4. Item Selector

Perlu diketahui setiap tema, nama-nama id atau class-nya bisa berlainan.

Penjelasannya:

  1. Content Selector adalah id atau class yang membungkus seluruh artikel.
    Content SelectorDalam tema WordPress – Frank yang saya gunakan, artikel-artikel saya dibungkus di dalam tag <div> dengan class=”nine columns post-group-content”
    Ini berarti di dalam tag <div> tersebut ada tiga class tidak cuma satu, yaitu nine, columns, dan post-group-content. Jadi pakai yang mana?
    Jika demikian kasusnya pilih class yang kira-kira memang dimaksudkan untuk mengacu untuk membungkus artikel/konten.
    Berhubungan dengan tema saya, maka classnya adalah post-group-content.
    Jadi di parameter Content Selector saya isi dengan .post-group-content.
  2. Navigation Selector adalah id atau class yang membungkus paginasi artikel kalian atau mungkin sekedar tombol next atau previous.
    Tombol Next
    Di dalam contoh ini navigasi blog saya dibungkus oleh tag <div> dengan class=”pagination”.
    Maka pada parameter Navigation Selector saya isi dengan .pagination.
  3. Next Selector adalah tag <a href=””>  yang mengontrol tombol next untuk menampilkan artikel selanjutnya. Untuk gambarnya bisa lihat gambar nomor 2.
    Di tema saya classnya adalah class=”button”.
    Di dalam parameter Next Selector saya bisa isi beberapa macam cara, misalnya:
    .button
    a.button
    .pagination a
    .pagination a.button
    Semuanya mengacu pada tag <a href=”” class”button”> yang sama. 
  4. Item Selector adalah class yang membungkus artikel per individu.
    blok-posDisini classnya adalah class=”post”. Maka di parameter Item Selector diisi dengan: .post.

Ok, seharusnya infinite scroll sudah bisa jalan. Selamat mencoba.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.