Init HTML

Đây là phiên bản nâng cấp của bài viết Phân trang trong WordPress. Mình cũng đã cập nhật trên trang nên bạn có thể xem Demo tại đây, ở cuối trang.

Lưu ý: Mình sử dụng Bootstrap để làm giao diện phân trang.

Phân trang

Bạn thêm hàm sau vào functions.php.

/**
 * Pagination
 */
function pagination($pages = '') {
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    
    if ($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if(!$pages) $pages = 1;
    }
    
    if(1 != $pages) {
        echo '<nav ';
        if (is_home() || is_tag() || is_category()) echo 'class="pagination-container"';
        echo '>';
        echo '<ul class="pager">';
        if ($paged > 1) echo '<li class="previous"><a rel="nofollow" href="' . get_pagenum_link($paged - 1) . '"><span aria-hidden="true">&larr;</span> Trước</a></li>';
        echo '<li class="pager-note">Trang ';
        echo '<select id="curr-page" data-url="' . get_pagenum_link(1) . '">';
        if ($pages >= 1) {
            for ($i = 1; $i <= $pages; $i++) {
                $selected = '';
                if ($paged == $i) $selected = 'selected';
                echo '<option value="' . $i . '" ' . $selected . '>' . $i . '</option>';
            }
        }
        echo '</select>';
        echo '/' . $pages . '</li>';
        if ($paged < $pages) echo '<li class="next"><a rel="nofollow" href="' . get_pagenum_link($paged + 1) . '">Sau <span aria-hidden="true">&rarr;</span></a></li>';
        echo '</ul>';
        echo '</nav>';
    }
}

Sử dụng

Để cài đặt số bài viết hiển thị trong 1 trang, bạn vào Cài đặt → Đọc.

Đặt số lượng ở mục Hiển thị nhiều nhất.

Để sử dụng trong Giao diện, bạn dùng phương thức sau ở nơi cần hiển thị.

<?php if (function_exists("pagination")) { pagination(); } ?>

CSS

Chúng ta đang sử dụng Aligned links của Bootstrap, nên CSS chỉ cần đơn giản như sau, mục đích chỉ là để căn chỉnh lại khoảng cách.

.pagination-container {
    margin-bottom: 30px;
    font-size: 15px;
}
.pager li>a, .pager li>span {
    border-color: #e8e8e8;
    padding-left: 20px;
    padding-right: 20px;
}
.pager li>a:focus, .pager li>a:hover {
    background-color: #f5f5f5;
}
.pager-note {
    line-height: 30px;
}
select#curr-page {
    border: 0;
    background-color: #fff;
    background-image: linear-gradient(
        120deg,
        #e8e8e8 0,
        #e8e8e8 100%
    );
    background-repeat: no-repeat;
    background-size: 75% 0.4em;
    background-position: 0 100%;
}

JavaScript

Đây là chức năng được bổ sung, chọn nhanh trang để đi tới. Bạn thêm đoạn mã sau ở footer.php.

<script type="text/javascript">
    $('#curr-page').change(function() {
        location.href = $(this).data('url') + 'page/' + $(this).val() + '/';
    });
</script>

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