wordpress hàm hiển thị phân trang trong wordpress

Trong WordPress, để hiển thị phân trang (pagination) cho danh sách bài viết, bạn có thể sử dụng các hàm sau:

1. Sử dụng the_posts_pagination()

Hàm the_posts_pagination() là cách phổ biến nhất để hiển thị phân trang cho danh sách bài viết trên trang archive, trang chủ, hoặc trang tìm kiếm. Hàm này tạo phân trang với các link "Previous" và "Next" kèm theo các số trang.

<?php
the_posts_pagination(array(
    'mid_size' => 2,
    'prev_text' => __('« Trước', 'textdomain'),
    'next_text' => __('Sau »', 'textdomain'),
    'screen_reader_text' => __('Phân trang', 'textdomain'),
));

• mid_size: Số lượng trang hiển thị ở giữa, trước và sau trang hiện tại.
• prev_text và next_text: Văn bản cho các nút điều hướng trước và sau.
• screen_reader_text: Văn bản cho người dùng đọc màn hình.

2. Sử dụng paginate_links()

Nếu bạn cần tùy chỉnh linh hoạt hơn cho phân trang, paginate_links() trả về HTML của phân trang mà không tự động in ra. Điều này cho phép bạn tùy chỉnh thêm trước khi hiển thị.

<?php
$pagination = paginate_links(array(
    'total' => $wp_query->max_num_pages,
    'current' => max(1, get_query_var('paged')),
    'mid_size' => 2,
    'prev_text' => __('« Trước', 'textdomain'),
    'next_text' => __('Sau »', 'textdomain'),
));

if ($pagination) {
    echo '<div class="pagination">' . $pagination . '</div>';
}

• total: Tổng số trang, thường lấy từ $wp_query->max_num_pages.
• current: Trang hiện tại.
• paginate_links(): Trả về HTML của phân trang để bạn có thể thêm vào div hoặc bất kỳ phần tử nào khác.

3. Sử dụng previous_posts_link() và next_posts_link()

Nếu bạn chỉ muốn hiển thị link đến trang trước và trang sau mà không cần các số trang cụ thể, bạn có thể sử dụng previous_posts_link() và next_posts_link().

<?php
if (get_previous_posts_link()) {
    previous_posts_link('« Trang trước');
}
if (get_next_posts_link()) {
    next_posts_link('Trang sau »');
}

4. Kết hợp CSS để tạo phân trang

WordPress có thể không tự động áp dụng kiểu dáng cho phân trang. Bạn có thể thêm CSS vào style.css của theme để phân trang đẹp hơn.

.pagination {
    display: flex;
    list-style: none;
    gap: 10px;
}

.pagination a,
.pagination span {
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
}

.pagination .current {
    font-weight: bold;
    background-color: #f0f0f0;
}

Các cách trên sẽ giúp bạn hiển thị phân trang cho bài viết trong WordPress dễ dàng và tùy chỉnh linh hoạt