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

Khi sử dụng hàm the_posts_pagination() trong WordPress, bạn có thể truyền vào một mảng các tham số để tùy chỉnh cách hiển thị phân trang. Dưới đây là một danh sách đầy đủ các tham số mà bạn có thể sử dụng với the_posts_pagination():

Hàm the_posts_pagination()

<?php
the_posts_pagination(array(
    'mid_size'           => 2, // Số trang hiển thị trước và sau trang hiện tại
    'prev_text'         => __('« Trước', 'textdomain'), // Văn bản cho nút "Trước"
    'next_text'         => __('Sau »', 'textdomain'), // Văn bản cho nút "Sau"
    'screen_reader_text' => __('Phân trang', 'textdomain'), // Văn bản cho người dùng đọc màn hình
    'end_size'          => 1, // Số trang hiển thị ở đầu và cuối
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __('Trang', 'textdomain') . ' </span>', // Văn bản trước số trang
));
?>

Tham số có sẵn

Dưới đây là mô tả chi tiết về từng tham số có thể được truyền vào mảng:

1. mid_size: (int) Số trang hiển thị ở giữa các nút "Trước" và "Sau". Mặc định là 2.

2. prev_text: (string) Văn bản cho nút "Trước". Mặc định là <span aria-hidden="true">«</span>. Bạn có thể tùy chỉnh theo ý muốn.

3. next_text: (string) Văn bản cho nút "Sau". Mặc định là <span aria-hidden="true">»</span>. Bạn có thể tùy chỉnh theo ý muốn.

4. screen_reader_text: (string) Văn bản cho người dùng đọc màn hình. Mặc định là __('Posts navigation', 'textdomain').

5. end_size: (int) Số trang hiển thị ở đầu và cuối của phân trang. Mặc định là 1.

6. before_page_number: (string) Văn bản hiển thị trước số trang. Có thể sử dụng để thêm một số thông tin như "Trang".

7. current: (int) Trang hiện tại. Mặc định là 0.

8. total: (int) Tổng số trang. Mặc định là 0.

Ví dụ hoàn chỉnh

Dưới đây là ví dụ hoàn chỉnh sử dụng tất cả các tham số trên:

<?php
the_posts_pagination(array(
    'mid_size'           => 2,
    'prev_text'         => __('« Trước', 'textdomain'),
    'next_text'         => __('Sau »', 'textdomain'),
    'screen_reader_text' => __('Phân trang', 'textdomain'),
    'end_size'          => 1,
    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __('Trang', 'textdomain') . ' </span>',
));
?>

Sử dụng CSS để Tùy Chỉnh Phân Trang

Để làm cho phân trang trông đẹp hơn, bạn có thể thêm CSS vào tệp style.css của theme:

.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pagination a,
.pagination span {
    padding: 8px 12px;
    margin: 0 5px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
}

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

Sử dụng các tham số trên trong the_posts_pagination() sẽ giúp bạn tùy chỉnh phân trang cho bài viết trong WordPress theo cách mà bạn mong muốn.