Hướng dẫn Ajax Load More cho Blog Flatsome chi tiết từ A–Z

Trong quá trình đọc nội dung trên website, mỗi khi muốn xem thêm bài viết khác, người dùng thường phải nhấn vào các trang Page 1, Page 2, Page 3…. Cách phân trang truyền thống này không chỉ làm gián đoạn trải nghiệm đọc, mà còn khiến website tải lại toàn bộ trang sau mỗi lần chuyển trang. Việc reload liên tục như vậy gây cảm giác chờ đợi, làm mất mạch nội dung, đồng thời ảnh hưởng không nhỏ đến trải nghiệm người dùng (UX) và hiệu suất tổng thể của website. Đặc biệt với các blog có lượng bài viết lớn, đây là một điểm trừ đáng kể nếu không được tối ưu hợp lý.

Để khắc phục những hạn chế của phân trang truyền thống, Ajax Load More ra đời như một giải pháp tối ưu và hiện đại hơn. Thay vì phải tải lại toàn bộ trang mỗi khi chuyển page, website sẽ tải thêm bài viết ngay tại vị trí hiện tại thông qua Ajax, giúp nội dung mới hiển thị gần như tức thì.

Trong bài viết, chúng ta sẽ cùng đi vào hướng dẫn Ajax Load More cho Blog Flatsome chi tiết từ A–Z, từ khâu chuẩn bị, viết code xử lý Ajax, cho đến cách hiển thị nút “Xem thêm” và tối ưu hiệu suất khi sử dụng thực tế.

Hướng dẫn Ajax Load More cho Blog Flatsome

HTML: Tạo nút xem thêm 

Để hiển thị nút “Xem thêm bài viết” trên trang blog, bạn không cần chỉnh sửa phức tạp hay cài thêm plugin Việc bạn cần làm rất đơn giản: chỉ cần sao chép và dán đoạn code bên dưới vào đúng vị trí được hướng dẫn.

Lưu ý: Mình hướng dẫn trên theme flatsome và ở file archive-2 của theme, còn các file khác nếu gắn có thể lỗi.

Bạn vào template-parts/posts/archive-2-col.php thay toàn nội dung cũ bằng đoạn code ở dưới.

</pre>
<div><?php</div>
<div>$cat_id = is_category() ? get_queried_object_id() : 0;</div>
<div>?></div>
<div></div>
<div><div id="post-list" class="row large-columns-2 medium-columns-2 small-columns-1"></div>
<div>    <?php</div>
<div>    $query = new WP_Query(array(</div>
<div>        'post_type'      => 'post',</div>
<div>        'posts_per_page' => 12, // 12 bài đầu</div>
<div>        'post_status'    => 'publish',</div>
<div>        'cat'            => $cat_id,</div>
<div>    ));</div>
<div></div>
<div>    while ( $query->have_posts() ) : $query->the_post();</div>
<div>    ?></div>
<div>        <article id="post-<?php the_ID(); ?>" <?php post_class('col post-item'); ?>></div>
<div>            <div class="article-inner has-shadow box-shadow-1"></div>
<div></div>
<div>                <!-- IMAGE --></div>
<div>                <?php get_template_part('template-parts/posts/partials/entry-image'); ?></div>
<div></div>
<div>                <!-- TEXT --></div>
<div>                <div class="box-text text-left"></div>
<div>                    <h5 class="post-title is-large"></div>
<div>                        <a href="<?php the_permalink(); ?>"></div>
<div>                            <?php the_title(); ?></div>
<div>                        </a></div>
<div>                    </h5></div>
<div></div>
<div>                    <div class="from_the_blog_excerpt"></div>
<div>                        <?php echo wp_trim_words( get_the_excerpt(), 25, '…' ); ?></div>
<div>                    </div></div>
<div>                </div></div>
<div></div>
<div>            </div></div>
<div>        </article></div>
<div>    <?php endwhile; wp_reset_postdata(); ?></div>
<div></div></div>
<div></div>
<div><button</div>
<div>    id="load-more"</div>
<div>    data-offset="12"</div>
<div>    data-cat="<?php echo esc_attr($cat_id); ?>"></div>
<div>    XEM THÊM</div>
<div></button></div>
<div>

Tiếp theo bạn vào function của theme đang sử dụng. thường chỉnh sửa trên theme child để update không bị lỗi. Dán đoạn code ở dưới.

// Code load more ở trang blog
function khaweb_ajax_load_more_posts() {

    $offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
    $cat    = isset($_POST['cat']) ? intval($_POST['cat']) : 0;

    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 4,
        'offset'         => $offset,
        'post_status'    => 'publish',
    );

    if ($cat) {
        $args['cat'] = $cat;
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class('col post-item'); ?>>
                <div class="article-inner has-shadow box-shadow-1">

                    <!-- IMAGE -->
                    <?php get_template_part('template-parts/posts/partials/entry-image'); ?>

                    <!-- TEXT -->
                    <div class="box-text text-left">
                        <h5 class="post-title is-large">
                            <a href="<?php the_permalink(); ?>">
                                <?php the_title(); ?>
                            </a>
                        </h5>

                        <div class="from_the_blog_excerpt">
                            <?php echo wp_trim_words( get_the_excerpt(), 20, '…' ); ?>
                        </div>
                    </div>

                </div>
            </article>

        <?php endwhile;
    endif;

    wp_reset_postdata();
    wp_die();
}

add_action('wp_ajax_load_more_posts', 'khaweb_ajax_load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'khaweb_ajax_load_more_posts');

CSS: Tuỳ chỉnh lại cho nút được đẹp 

Để nút “Xem thêm” trông chuyên nghiệp và đồng bộ với giao diện Theme Flatsome, bạn có thể tuỳ chỉnh lại CSS theo ý muốn. Phần CSS dưới đây giúp nút nổi bật hơn, dễ nhấn, có hiệu ứng hover nhẹ nhàng và hiển thị tốt trên cả desktop lẫn mobile.

Chỉ cần dán đoạn CSS bên dưới vào phần Custom CSS là hoàn tất.

#load-more{
    display:block;
    margin:30px auto;
    padding:12px 40px;
    background:#1e3cff;
    color:#fff;
    font-weight:600;
    border-radius:10px;
    cursor:pointer;
    transition:.25s;
}
#load-more:hover{
    opacity:.85;
}
.post {     margin: 0 0 0px; }
.post-item .article-inner{
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.post-item .box-text{
    padding:10px;
}

.post-item .post-title{
    font-size:20px;
    line-height:1.35;
    margin-bottom:10px;
}

.post-item .post-title a{
    color:#1f2937;
}

.post-item .from_the_blog_excerpt{
    font-size:15px;
    color:#4b5563;
    line-height:1.6;
}
/* 1. Cột là flex để card cao bằng nhau */
/* Cột là flex */
#post-list > .col {
    display: flex;
}

/* Card full height */
#post-list .article-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Box text chiếm phần còn lại */
#post-list .box-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* === QUAN TRỌNG NHẤT === */
/* Khóa chiều cao excerpt (20 từ ~ 3 dòng) */
#post-list .from_the_blog_excerpt {
    line-height: 1.6;
    min-height: calc(1.6em * 3); /* 3 dòng */
    max-height: calc(1.6em * 3);
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    margin-top: auto;
}

/* Khóa chiều cao title (2 dòng) */
#post-list .post-title {
    line-height: 1.4;
    min-height: calc(1.4em * 2);
}

/* Khóa chiều cao ảnh */
#post-list .box-image,
#post-list .image-cover {
    height: 220px;
    overflow: hidden;
}

#post-list .box-image img,
#post-list .image-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

JS: Thêm đoạn code này nữa là xong

Sau khi tạo nút “Xem thêm” và chuẩn bị phần PHP xử lý Ajax, bước cuối cùng bạn cần làm là thêm đoạn JavaScript dưới đây. Đoạn code này có nhiệm vụ bắt sự kiện click, gửi yêu cầu Ajax và tải thêm bài viết mà không cần reload trang.

Dán ở đây: Advanced → Global Settings → Footer Scripts

</pre>
<div><!-- Code load more page blog --></div>
<div><script></div>
<div>jQuery(function($){</div>
<div></div>
<div>    $('#load-more').on('click', function(){</div>
<div></div>
<div>        let btn    = $(this);</div>
<div>        let offset = btn.data('offset');</div>
<div>        let cat    = btn.data('cat');</div>
<div></div>
<div>        btn.text('ĐANG TẢI...');</div>
<div></div>
<div>        $.ajax({</div>
<div>            url: '/wp-admin/admin-ajax.php',</div>
<div>            type: 'POST',</div>
<div>            data: {</div>
<div>                action: 'load_more_posts',</div>
<div>                offset: offset,</div>
<div>                cat: cat</div>
<div>            },</div>
<div>            success: function(res){</div>
<div>                if(res.trim() !== ''){</div>
<div>                    $('#post-list').append(res);</div>
<div></div>
<div>                    // cập nhật offset (+4)</div>
<div>                    btn.data('offset', offset + 4);</div>
<div></div>
<div>                    // masonry re-layout (Flatsome)</div>
<div>                    $(document).trigger('flatsome-masonry');</div>
<div></div>
<div>                    // đưa nút xuống dưới cùng</div>
<div>                    $('html, body').animate({</div>
<div>                        scrollTop: btn.offset().top - 200</div>
<div>                    }, 300);</div>
<div></div>
<div>                    btn.text('XEM THÊM');</div>
<div>                } else {</div>
<div>                    btn.remove();</div>
<div>                }</div>
<div>            }</div>
<div>        });</div>
<div>    });</div>
<div></div>
<div>});</div>
<div></script></div>
<pre>

Kết quả xem hình dưới

Kết luận

Việc áp dụng Ajax Load More cho blog sử dụng theme Flatsome giúp website tải thêm bài viết mượt mà, không cần reload trang, từ đó cải thiện rõ rệt trải nghiệm người dùng và hiệu suất tổng thể. Thay vì phụ thuộc vào plugin, cách làm bằng code thuần mang lại sự linh hoạt, dễ tuỳ chỉnh và hạn chế xung đột không cần thiết.

Hy vọng qua hướng dẫn này, bạn sẽ áp dụng thành công để giúp website thân thiện hơn, mượt mà hơn và tạo ấn tượng tốt hơn với người dùng. Nếu thấy nội dung có giá trị, đừng quên đánh giá 5 sao để tiếp thêm động lực cho KHAWEB tiếp tục chia sẻ nhiều bài viết chất lượng hơn.