Membuat Load more untuk Popular post

September 19, 2018 Artikel,Snippets,Tips dan Trik,WordPress Kholis Muhaimin

Jika sebelumnya kita sudah membuat fitur Load more untuk looping biasa, kali ini kita akan mengimplementasikan fitur Load more pada looping Popular post. membuat Popular postKamu bisa cek artikel , terus balik lagi kesini ya :D.

Masih sama mudahnya dengan tutorial sebelumnya, kamu cuma perlu copy paste script di bawah ini sesuai pada tempatnya.

Functions.php


//Load more
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '4',
'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
<div class="col-md-3 popular-post">
<div class="thumb-single">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('full', array('class' => 'img-fluid card-img-top'));;
}
else {
echo '<img class="img-fluid" src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumb.jpg" alt="<?php the_title(); ?>" />';
}
?></a>
</div>
<h3 class="popular-post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="author"><i class="fa fa-user"></i> <?php the_author();?></div>
<div class="meta-post"><i class="fa fa-calendar"></i> <?php the_date();?> <i class="fa fa-comment" style="float: right;"> <?php comments_number( '0', '1', '% responses' ); ?></i> </div>
</div>
<?php endwhile ?>
<?php
endif;

wp_die();
}

Index.php


<div class="entry-content">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '8',
'paged' => 1,
'meta_key'=>'popular_posts',
'orderby'=>'meta_value_num',
'order'=>'DESC',
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<div class="row block-title my-posts">
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
<div class="col-md-3 popular-post">
<div class="thumb-single">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('full', array('class' => 'img-fluid card-img-top'));;
}
else {
echo '<img class="img-fluid" src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumb.jpg" alt="<?php the_title(); ?>" />';
}
?></a>
</div>
<h3 class="popular-post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="author"><i class="fa fa-user"></i> <?php the_author();?></div>
<div class="meta-post"><i class="fa fa-calendar"></i> <?php the_date();?> <i class="fa fa-comment" style="float: right;"> <?php comments_number( '0', '1', '% responses' ); ?></i> </div>
</div>
<?php endwhile ?>
</div>
<?php endif ?>
<div class="loadmore btn btn-info btn-small">Load More...</div>
</div>
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
};

$.post(ajaxurl, data, function(response) {
$('.my-posts').append(response);
page++;
});
});
});
</script>

Perbedaan looping biasa dengan popular post adalah ini, ada tambahan array gitu maksudnya.


'meta_key'=>'popular_posts',
'orderby'=>'meta_value_num',
'order'=>'DESC',

Jika berhasil, tampilan load more kayak gambar di bawah.

load more wordpress popular post

53 total views, 1 views today

Facebooktwittergoogle_plusredditpinterestlinkedinmail