Cách tạo Infinite Scroll (Cuộn vô hạn) cho bài viết WordPress
Re: Cách tạo Infinite Scroll (Cuộn vô hạn) cho bài viết WordPress
Mã: Chọn tất cả
function load_next_article() {
$excluded_ids = isset($_GET['excluded_ids']) ? array_map('intval', explode(',', $_GET['excluded_ids'])) : [];
$args = [
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 1,
'orderby' => 'date',
'order' => 'DESC',
'post__not_in' => $excluded_ids,
];
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
get_template_part('content', 'single');
}
} else {
echo '';
}
wp_reset_postdata();
wp_die();
}
add_action('wp_ajax_load_next_article', 'load_next_article');
add_action('wp_ajax_nopriv_load_next_article', 'load_next_article');
Mã: Chọn tất cả
document.addEventListener('DOMContentLoaded', function() {
const mainContent = document.querySelector('#main-content');
const loader = document.querySelector('#loader');
let isLoading = false;
let excludedIDs = [parseInt(mainContent.dataset.currentPostId)];
function loadNextArticle() {
if (isLoading) return;
isLoading = true;
loader.textContent = 'Đang tải bài viết...';
fetch(`/wp-admin/admin-ajax.php?action=load_next_article&excluded_ids=${excludedIDs.join(',')}`)
.then(response => response.text())
.then(data => {
if (data.trim() !== '') {
const div = document.createElement('div');
div.innerHTML = data;
const article = div.querySelector('article');
if (article) {
article.classList.add('fade-in');
mainContent.appendChild(article);
const newPostID = parseInt(article.id.replace('post-', ''));
excludedIDs.push(newPostID);
setTimeout(() => { article.classList.remove('fade-in'); }, 1000);
}
} else {
loader.textContent = 'Không còn bài viết!';
}
isLoading = false;
})
.catch(error => {
console.error('Lỗi tải bài:', error);
loader.textContent = 'Lỗi tải bài!';
isLoading = false;
});
}
window.addEventListener('scroll', function() {
if (loader.getBoundingClientRect().top < window.innerHeight && !isLoading) {
loadNextArticle();
}
});
});
Mã: Chọn tất cả
function enqueue_infinite_scroll_script() {
wp_enqueue_script('infinite-scroll', get_template_directory_uri() . '/infinite-scroll.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_script');
Mã: Chọn tất cả
<?php get_header(); ?>
<div class="mh-wrapper clearfix">
<div class="mh-container mh-container-inner">
<div id="main-content" class="mh-content" role="main" itemprop="mainContentOfPage" data-current-post-id="<?php the_ID(); ?>">
<?php
while (have_posts()) : the_post();
get_template_part('content', 'single');
endwhile;
?>
</div>
<div id="loader">Đang tải bài viết...</div>
</div>
</div>
<?php get_footer(); ?>