Chia sẻ đoạn code web tạo phân trang Blog Post tại Page của Theme Flatsome

Dưới đây là đoạn code hoàn chỉnh để thêm tính năng phân trang (pagination) cho Blog Post trong theme Flatsome. Đoạn mã này sẽ phân mỗi trang thành 12 bài viết và thêm tùy chọn bật/tắt trực tiếp trongfunctions.php.

Đoạn Code Hoàn Chỉnh

// Thêm tùy chọn bật/tắt phân trang trong Customizer
function flatsome_blog_pagination_customizer($wp_customize) {
    $wp_customize->add_section('blog_pagination_section', array(
        'title'    => __('Blog Pagination', 'flatsome'),
        'priority' => 30,
    ));

    $wp_customize->add_setting('enable_blog_pagination', array(
        'default'   => true,
        'transport' => 'refresh',
    ));

    $wp_customize->add_control('enable_blog_pagination', array(
        'label'    => __('Enable Blog Pagination', 'flatsome'),
        'section'  => 'blog_pagination_section',
        'type'     => 'checkbox',
    ));
}
add_action('customize_register', 'flatsome_blog_pagination_customizer');

// Điều chỉnh số bài viết trên mỗi trang
function flatsome_set_posts_per_page($query) {
    if (!is_admin() && $query->is_main_query() && (is_home() || is_archive() || is_category() || is_tag())) {
        $query->set('posts_per_page', 12); // Hiển thị 12 bài viết mỗi trang bạn có thể thay đổi tuỳ ý
    }
}
add_action('pre_get_posts', 'flatsome_set_posts_per_page');

// Hiển thị phân trang cho Blog Post
function flatsome_blog_pagination() {
    if (get_theme_mod('enable_blog_pagination', true)) {
        global $wp_query;

        if ($wp_query->max_num_pages > 1) {
            echo '<div class="blog-pagination">';
            echo paginate_links(array(
                'base'      => str_replace(999999999, '%#%', esc_url(get_pagenum_link(999999999))),
                'format'    => '?paged=%#%',
                'current'   => max(1, get_query_var('paged')),
                'total'     => $wp_query->max_num_pages,
                'prev_text' => __('&laquo; Previous', 'flatsome'),
                'next_text' => __('Next &raquo;', 'flatsome'),
            ));
            echo '</div>';
        }
    }
}
add_action('flatsome_after_blog_posts', 'flatsome_blog_pagination');

// CSS tùy chỉnh cho phân trang
function flatsome_pagination_styles() {
    echo '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.blog-pagination%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.blog-pagination%20a%2C%0A%20%20%20%20%20%20%20%20.blog-pagination%20span%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%208px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23ddd%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%204px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20background-color%200.3s%2C%20color%200.3s%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.blog-pagination%20a%3Ahover%2C%0A%20%20%20%20%20%20%20%20.blog-pagination%20.current%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%230073aa%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20%230073aa%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />';
}
add_action('wp_head', 'flatsome_pagination_styles');

Chi Tiết Hoạt Động
Tùy chọn bật/tắt phân trang:

Mục “Enable Blog Pagination” được thêm vào Customizer (Giao diện > Tùy chỉnh > Blog Pagination).
Bạn có thể bật hoặc tắt tính năng phân trang từ đây.
Số bài viết mỗi trang:

pre_get_posts được sử dụng để giới hạn số bài viết hiển thị trên mỗi trang là 12.
Phân trang:

Phân trang sẽ hiển thị nếu có nhiều hơn 12 bài viết trong danh sách.
Giao diện phân trang:

CSS được thêm tự động vàođể đảm bảo phân trang hiển thị đẹp mắt và tương thích với giao diện Flatsome.Hướng Dẫn Sử DụngSao chép toàn bộ đoạn mã trên vào file functions.php của theme con.Truy cập Giao diện > Tùy chỉnh > Blog Pagination để bật/tắt phân trang.Kiểm tra danh sách bài viết trên trang blog. Nếu có hơn 12 bài viết, phân trang sẽ tự động xuất hiện ở cuối danh sách.