Membuat Load More Post Ajax Di WordPress

Cara Membuat Tombol Load More Post Menggunakan Ajax Di WordPress.  Load More Posts Ajax Button In WordPress.

Kami menyampaikan terima kasih yang sebesar-besarnya kepada para pengunjung baik yagng sudah sering maupun yang baru mengunjungi teknologi[dot]visitklaten[dot]com. Kami sampaikan terimak kasih sudah 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 post atau postingan dengan Ajax di wordpress. Untuk membuatnya gampang-gampang susah 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.

Sekedar info iklan, 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….

Tombol Load More Post Menggunakan Ajax

Dalam contoh yang kami sampaikan sebelumnya yakni sistem AJAX yang berupa pengulangan. Karena 4 item yang muncul selalu sama. Dalam kesempatan kali ini kami akan mencoba men-share contoh lainnya yang bukan pengulangan.

HTML

HTML dibawah ini hanyalah sekedar contoh dan bisa diedit sesuai kebutuhan.

<div class="loadmore-frame5">
    <div class="ast-container p-1">
   <div id="ajax-posts" class="row m-0">
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => 6,
                    'cat' => 9,
                    'paged' => $paged
            );
            $loop = new WP_Query($args);
            while ($loop->have_posts()) : $loop->the_post();
        ?>
         <div class="col-md-4 col-sm-6 col-12 p-2">
                <h3><?php the_title(); ?></h3>
                <p><?php echo get_excerpt(); ?></p>
         </div>
         <?php endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <button id="more_posts" class="btn btn-peach-gradient btn-lg w-50 mt-3 mx-auto d-block">Load More</button>
    </div>
</div>

CSS

Untuk Style bisa ditambahkan tambahan/pengurangan dengan menyesuaikan kebutuhan. (opsional)

JS

Kode Javascript dibawah ini hanyalah sekedar contoh dan bisa diedit sesuai kebutuhan.

jQuery(document).ready(function($){
 var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
 var ppp = 6; // Post per page
var cat = 9;
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    jQuery.ajax({
        type: "POST",
        dataType: "html",
        url: ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}


$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});  
});

Tambahan

Sedikit tambahan untuk dimasukkan di functions.php yang nanti bisa diedit menyesuaikan dengan keinginan.

function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 6;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 9,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="col-md-4 col-sm-6 col-12 p-2">
                <h3>'.get_the_title().'</h3>
                <p>'.get_excerpt().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

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

Untuk tampilan Load More bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

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

sumber : https://stackoverflow.com/questions/31587210/load-more-posts-ajax-button-in-wordpress