Init HTML

Xem demo

Trong bài viết có sử dụng:

• Hiển thị trạng thái Đang Tải sau khi bấm nút trên web
• Hiển thị thời gian đăng bài viết trong WordPress
• Định dạng số thành K, M, B, T sử dụng PHP
• Làm bộ đếm lượt xem chính xác cho bài viết WordPress sử dụng Ajax

PHP

Tại functions.php, thêm phương thức tải thêm bài viết sử dụng Ajax.

/**
 * Tải thêm bài viết sử dụng AJAX
 */
add_action('wp_ajax_load', 'load_more');
add_action('wp_ajax_nopriv_load', 'load_more');
function load_more() {
    $query = new WP_Query(array(
            'posts_per_page' => intval($_POST['per']),
            'ignore_sticky_posts' => 1,
            'post_type' => 'post',
            'post_status' => 'publish',
            'offset' => intval($_POST['fr'])
        ));
    $results = [];
    if ($query->have_posts()) { while ($query->have_posts()) { $query->the_post();
        $title = get_the_title();
        $img = '';
        $timeago = vi_human_time_diff(get_the_time('U'), current_time('timestamp'));
        if (!$timeago) $timeago = get_the_time('d/m/Y');
        $view = get_field('post_view');
        if (!$view) $view = 0;
        $cmts = get_comment_count(get_the_ID())['approved'];
        if (has_post_thumbnail()) $img = get_the_post_thumbnail(get_the_ID(), 'mainthumb_size', array('alt' => 'Ảnh ' . $title));
        else $img = '<img src="' . get_bloginfo('template_url') . '/img/thumb.jpg" alt="Default Image" width="360" height="240" loading="lazy">';
        $results[] = array(
            'title' => $title,
            'link' => get_the_permalink(),
            'img' => $img,
            'cat' => get_the_category_list(', '),
            'desc' => esc_attr(wp_trim_words(get_the_excerpt(), 55, '...')),
            'time' => $timeago,
            'view' => thousands_format($view),
            'cmts' => thousands_format($cmts)
        );
    } } wp_reset_query();
    wp_send_json_success($results);
    die();
}

HTML

Nút Xem thêm với dữ liệu số lượng bài viết mỗi trang ở cuối danh sách bài viết.

<?php $per = get_option('posts_per_page'); ?>
<button id="load-more" class="main-btn" data-fr="<?php echo $per; ?>"><i class="fa-solid fa-plus"></i> Xem Thêm</button>

JavaScript

Bạn cần sử dụng jQuery Appear để nhận diện khi người dùng kéo đến cuối trang.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-appear/0.1/jquery.appear.min.js"></script>

Đoạn mã sau tự động tải thêm bài viết 2 lần, sau đó người dùng bấm nút Xem thêm để tiếp tục hiển thị.

<script type="text/javascript">
    $(document).ready(function() {
        var perPage = 10;
        $('#load-more').click(function() {
            $(this).addClass('hidden');
            $(this).before('<p class="lds-container"><span class="lds-ellipsis"><span></span><span></span><span></span><span></span></span></p>');
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: ajaxURL,
                data: {
                    'action': 'load',
                    'per': perPage,
                    'fr': $(this).data('fr')
                },
                success: function(response) {
                    if(response.success) {
                        if (response.data.length > 0) {
                            var resHTML = '';
                            for (var i = 0; i < response.data.length; i++) {
                                resHTML += '<div class="post-block">';
                                resHTML += '<div class="post-img">';
                                resHTML += '<a href="' + response.data[i].link + '">';
                                resHTML += response.data[i].img;
                                resHTML += '</a>';
                                resHTML += '<div class="category-tags">' + response.data[i].cat + '</div>';
                                resHTML += '</div>';
                                resHTML += '<div class="post-desc">';
                                resHTML += '<h2 class="post-title"><a href="' + response.data[i].link + '">' + response.data[i].title + '</a></h2>';
                                resHTML += '<p class="post-excerp">' + response.data[i].desc + '</p>';
                                resHTML += '</div>';
                                resHTML += '<div class="post-footer">';
                                resHTML += '<i class="style-icon fa-solid fa-calendar m-r-1"></i>';
                                resHTML += '<span class="m-r-2">' + response.data[i].time + '</span>';
                                resHTML += '<a class="m-r-2" href="' + response.data[i].link + '#comments"><i class="style-icon fa-solid fa-comment m-r-1"></i> ' + response.data[i].cmts + '</a>';
                                resHTML += '<i class="style-icon fa-solid fa-eye m-r-1"></i>';
                                resHTML += '<span class="m-r-2">' + response.data[i].view + '</span>';
                                resHTML += '</div>';
                                resHTML += '<div class="clearfix"></div>';
                                resHTML += '</div>';
                            }
                            $('.latest-news-list').append(resHTML);
                            if (response.data.length < perPage) {
                                $('#load-more').remove();
                            } else {
                                $('#load-more').removeClass('hidden');
                            }
                        } else {
                            $('#load-more').remove();
                        }
                    }
                    $('.lds-container').remove();
                }
            });
            var fr = $(this).data('fr') + perPage;
            $(this).data('fr', fr);
        });

        var loadCount = 0;
        $(window).scroll(function() {
            if ($('#load-more').is(':appeared')) {
                if (loadCount < 2) {
                    $('#load-more').click();
                    loadCount++;
                }
            }
        });
    });
</script>

Các bạn tự thay đổi cấu trúc của bài viết phù hợp với giao diện của mình nhé.

Chúc các bạn thành công!