Membuat Load More Menggunakan Ajax Di WordPress

Cara Membuat Tombol Load More Di WordPress Menggunakan Ajax Di WordPress.

Kami menyampaikan banyak-banyak terima kasih kepada para pengunjung setia maupun yang baru mengunjungi teknologi[dot]visitklaten[dot]com. Kami sampaikan terimak kasih telah meluangkan waktunya untuk mengunjungi ataupun hanya sekedar melihat-lihat web kami yang masih banyak kekurangan ini.

Selain itu kami menerima segala masukkan dan kritikan agar web teknologi[dot]visitklaten[dot]com ini dan diri kami bisa menjadi lebih baik dan lebih baik lagi.

Seperti yang kami sampaikan sebelumnya bahwa kami akan berbagi cara membuat tombol Load More dengan Ajax di wordpress. Untuk membuatnya cukup mudah dan sulit juga karena kami juga baru belajar hehehehe….

Dalam kesempatan kali ini kami akan berbagi caranya dan sobat teknologi[dot]visitklaten[dot]com hanya tinggal copy paste saja dan sedikit pengeditan sesuai kebutuhan.

Load More atau Show More akan berguna bagi yang tidak menginginkan pagination dan ingin menampilkan dalam satu halaman saja. Dalam hal ini berupa tombol “Load More/Show 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.

Ups sekedar info jika ingin mengiklankan usahanya khususnya wilayah klaten bisa memasang iklan di https://www.visitklaten.com/pasang-iklan/ . Kelebihannya apabila diketikan kata kunci dan ditambah dengan kata “klaten” maka biasanya kesempatan muncul di halaman pertama google akan semakin besar. Selain itu yang tak kalah menarik ada diskonnya….

Membuat Tombol Load More Menggunakan Ajax

Mungkin bisa dibilang dalam contoh yang kami sampaikan dibawah ini adalah berupa pengulangan. Karena 4 item yang muncul selalu sama. Dalam kesempatan berikutnya jika sudah mempunyai ilmunya InsyaAllah akan kami share contoh lainnya yang bukan pengulangan.

HTML

HTML dibawah ini hanyalah sekedar contoh.

<div class="loadmore-frame4">
    <div class="ast-container text-center p-1">
        <div class="row m-0 justify-content-center align-items-center">
            <div class="col-md-3 col-6 p-1"><div class="content">Item</div></div>
            <div class="col-md-3 col-6 p-1"><div class="content">Item</div></div>
            <div class="col-md-3 col-6 p-1"><div class="content">Item</div></div>
            <div class="col-md-3 col-6 p-1"><div class="content">Item</div></div>
            <button class="loadMore btn btn-purple-gradient btn-lg w-75 mt-3"><span class="default-msg">Load More</span> <span class="loading-msg">Loading...</span></button>
        </div>
    </div>
</div>

CSS

Bisa ditambahkan Style lainnya dengan menyesuaikan kebutuhan. 

.loadmore-frame4 .col-md-4{padding: .5rem;}
.loadmore-frame4 .content {background-color: #333;height: 150px;width: 100%;border: 1px solid #ccc;color: #fff;font-size: 20px;line-height: 150px;}
.loading-msg { display: none;}
.loadmore-frame4 .loading .default-msg { display: none;}
.loadmore-frame4 .loading .loading-msg { display: block;}.loadmore-frame4 .intro-animation .content { height: 0em;padding-top: 0em; }
.loadmore-frame4 .ajax .content { transition: 200ms all cubic-bezier(0.445, 0.050, 0.550, 0.950);}

JS

jQuery(document).ready(function($){   
  $('.loadMore').on('click', function(e) {
  e.preventDefault();
  var $self = $(e.currentTarget),
      $container = $self.closest('.loadmore-frame4 .ast-container');
  
  // don't allow another load when already loading
  if($self.hasClass('loading')) {
    return;
  }
  $self.addClass('loading');

  var item = '<div class="col-md-3 col-6 p-1 ajax intro-animation"><div class="content">New Item</div></div>',
      items = '',
      itemsPerRow = 4;
  for (var i = 0; i < itemsPerRow; i++) {  
    items += item;
  }
  
  var $newrow = $(items);
  
  // timeout delay values
  var ajaxDelay = 2000,
      animationWait = 50,
      animationDuration = 201;

  // mimic ajax call
  setTimeout(function() {
    $newrow.insertBefore($self);
    // delay to show intro animation
    setTimeout(function() {
      $newrow.removeClass('intro-animation');
      // delay to return all back to their default state
      setTimeout(function() {
        $self.removeClass('loading');
        $newrow.removeClass('ajax');
      }, animationDuration);
    }, animationWait);
  }, ajaxDelay);
  
}); // END click handler
});

Kelebihan jika menggunakan metode ini yaitu dengan Ajax adalah load awal tidak terlalu lambat. Adapun kekurangannya mungkin cara membuatnya yang cukup sulit hehehehe…

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.