Membuat Tombol Load More Dengan CSS dan JS Di WordPress

Cara Membuat Tombol  Load More Dengan CSS dan JavaScript di WordPress. Kami mengucapkan banyak-banyak terima kasih bagi para pengunjung teknologi[dot]visitklaten[dot]com yang sudi meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Dalam artikel kali ini Kami akan berbagi cara membuat fungsi tombol  load more dengan CSS dan JS di wordpress. Untuk membuatnya sangat mudah. Dalam kesempatan kali ini kami akan berbagi caranya dan sobat tinggal copy paste dan sedikit pengeditan sesuai kebutuhan.

Load more ini akan sangat berguna bagi yang mungkin tidak menginginkan pagination dan ingin menampilkan semua file dalam satu halaman saja. Dalam hal ini berupa tombol “load more” yang apabila di klik akan muncul data/gambar/file selanjutnya.

Yuk langsung saja kita simak penjelasan dari kami. Dalam hal ini kami menggunakan tambahan CSS dari bootstrap. Untuk caranya hampir sama dengan artikel kami sebelumnya di https://teknologi.visitklaten.com/wordpress/membuat-load-more-dengan-css-dan-javascript hanya sedikit berbeda di bagian JS

Membuat Tombol Load More di wordpress

HTML

HTML dibawah ini hanya sekedar contoh atau acuan yang bisa di aplikasikan atau diterapkan dalam model lain semisal gambar atau postingan.

<div class="loadmore-frame2">
    <div class="ast-container text-center p-1">
        <div class="row m-0 justify-content-center align-items-center">
            <div class="col-md-4">
                <div class="content">1</div>
            </div>
            <div class="col-md-4">
                <div class="content">2</div>
            </div>
            <div class="col-md-4">
                <div class="content">3</div>
            </div>
            <div class="col-md-4">
                <div class="content">4</div>
            </div>
            <div class="col-md-4">
                <div class="content">5</div>
            </div>
            <div class="col-md-4">
                <div class="content">6</div>
            </div>
            <div class="col-md-4">
                <div class="content">7</div>
            </div>
            <div class="col-md-4">
                <div class="content">8</div>
            </div>
            <div class="col-md-4">
                <div class="content">9</div>
            </div>
            <div class="col-md-4">
                <div class="content">10</div>
            </div>
            <div class="col-md-4">
                <div class="content">11</div>
            </div>
            <div class="col-md-4">
                <div class="content">12</div>
            </div>
            <div class="col-md-4">
                <div class="content">13</div>
            </div>
            <div class="col-md-4">
                <div class="content">14</div>
            </div>
            <div class="col-md-4">
                <div class="content">15</div>
            </div>
        </div>
    <button class="load-more btn btn-blue-gradient btn-lg w-75 mt-3">Load More</button>
    </div>
</div>

CSS

Harap diperhatikan atau dipastikan div atau frame di konten harus di display none. Sedangkan untuk style lainnya menyesuaikan kebutuhan. 

.loadmore-frame2 .col-md-4{
  display:none;
  padding: .5rem;
}
.loadmore-frame2 .content {
    background-color: #333;
    height: 200px;
    width: 100%;
    border: 1px solid #ccc;
    color: #fff;
    font-size: 50px;
    line-height: 200px;
}

JS

Di bagian slice “slice(0, 3)” angka tiga(3) bisa diganti dengan yang lain sesuai kebutuhan semisal 6. Jika 6 di “slice(0, 3).show” maka yang muncul pertama kali adalah 6 . Apabila 6 di “slice(0, 3).fadeIn” setiap klik tombol load more akan muncul 6.

jQuery(document).ready(function($){   
  $(".loadmore-frame2 .col-md-4").slice(0,3).show();
  $(".loadmore-frame2 .load-more").click(function(e){
    e.preventDefault();
    $(".loadmore-frame2 .col-md-4:hidden").slice(0,3).fadeIn("slow");
    
    if($(".loadmore-frame2 .col-md-4:hidden").length == 0){
       $(".loadmore-frame2 .load-more").fadeOut("slow");
      }
  });  
});

Kelebihan jika menggunakan metode ini yaitu dengan CSS dan JavaScript adalah simple, mudah dan tidak terlalu ribet. Adapun kekurangannya mungkin karena di display none maka saat load awal web akan terasa lebih lambat.

Dalam kesempatan berikutnya InsyaAllah akan kami share cara membuat load more menggunakan ajax sehingga saat load awal tidak lambat.

Untuk tampilan load more bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.