Load danh mục bài viết bằng Ajax trong WordPress

Ajax là kỹ thuật load 01 phần trang web, với cách load này sẽ giúp bạn không cần load lại toàn bộ trang web, giúp hiệu năng web đạt hiệu quả tốt hơn. Hiệu ứng load giống trang thegioididong.com

 

Code PHP :

add_action('wp_ajax_kk_get_post_by_category', 'kk_get_post_by_category_function');
add_action('wp_ajax_nopriv_kk_get_post_by_category', 'kk_get_post_by_category_function');
function kk_get_post_by_category_function() {	
	$posts = new WP_Query(array(
		'category_name'		=> $_POST['cat'],
		'post_type' 		=> array('post','post_kk_code'),
		'post_status' 		=> 'publish', 
		'posts_per_page' 	=> 12
	));
	
	if($posts->have_posts())
	{
		while($posts->have_posts()){
			$posts->the_post();
			?>
			<div class="portfolio-item">
				<a class="portfolio-item-overlay" href="<?=get_the_permalink();?>" alt="<?=get_the_title();?>">				
					<?php
					if (has_post_thumbnail())
					{
						$src = get_the_post_thumbnail_url();				
						if (!$src) $src = 'https://via.placeholder.com/282x235?text='.get_the_title();
						echo '<img data-src="'.$src.'" alt="'.get_the_title().'" class="lazyload"/>';
					}
					else
					{
						
					}	
					?>
					<div class="portfolio-item-description">
						<?=get_the_title();?>
					</div>
				</a>				
			</div>
			<?php
			//echo '<div class="item"><a href="'.get_the_permalink().'">'.get_the_title().'</a></div>';
		} 
	}
		
	die(); 
}

Code CSS:

<style>
.csslder {
    display: block;
    text-align: center;
    height: 20px;
    position: relative;
    clear: both;
}

.csslder .csswrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.cssdot {
    width: 10px;
    height: 10px;
    border: 1px solid #288ad6;
    background: #288ad6;
    border-radius: 50%;
    float: left;
    margin: 0 5px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: fx 1000ms ease infinite 0ms;
    animation: fx 1000ms ease infinite 0ms;
}

.cssdot:nth-child(2) {
    -webkit-animation: fx 1000ms ease infinite 300ms;
    animation: fx 1000ms ease infinite 300ms;
}

.cssdot:nth-child(3) {
    -webkit-animation: fx 1000ms ease infinite 600ms;
    animation: fx 1000ms ease infinite 600ms;
}

.loadingcover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .75);
    display: none;
    z-index: 2;
}

.loadingcover .csslder {
    top: 50%;
}
/*! CSS Used keyframes */

@-webkit-keyframes fx {
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fx {
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.portfolio-item{
	overflow: hidden;
}
.portfolio-item img {    
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
}
</style>

Code HTML:

<div class="loadingcover">
    <p class="csslder">
        <span class="csswrap">
            <span class="cssdot"></span>
            <span class="cssdot"></span>
            <span class="cssdot"></span>
        </span>
    </p>
</div>

Code Javascript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#filters a').click(function(){
		$('.loadingcover').fadeIn();
        $.ajax({
           type : "post",
           dataType : "html",
           url : '<?php echo admin_url('admin-ajax.php');?>',
           data : {
			   cat: $(this).attr('id'),
                action: "kk_get_post_by_category",
           },
           beforeSend: function(){
                
           },
           success: function(response) {
			   $('#sortable-portfolio').empty();
                console.log(response);
                $('#sortable-portfolio').html(response);
				
				$('html,body').animate({
					scrollTop: $("div#sortable-portfolio").offset().top - 68
				}, 'fast');
				$('.loadingcover').fadeOut();
           },
           error: function( jqXHR, textStatus, errorThrown ){                
                console.log( 'The following error occured: ' + textStatus, errorThrown );
           }
       });
    });
});
</script>