Thay đổi lớp danh sách phân trang

paginate_links()Hàm trả về danh sách không có thứ tự với lớp có tên là "số trang". Làm thế nào tôi có thể thay đổi lớp học này?

BIÊN TẬP

Hiện tại, tôi đang sử dụng phương pháp hỗ trợ ban nhạc dưới đây.

$return = paginate_links( $arg );
echo str_replace( "<ul class='page-numbers'>", '<ul class="pagination">', $return );

Có cách nào tốt hơn không?

paginate_links()không cung cấp một tham số và không có hook - xem nguồn - có sẵn để thay đổi (các) lớp. Điều đó có nghĩa là bạn có thể làm điều đó giống như bạn đã làm nó hoặc bạn tạo chức năng phân trang của riêng bạn dựa trên paginate_links().

Tôi cũng đang tìm kiếm giải pháp tương tự để sử dụng nó với các liên kết phân trang bootstrap,

đoạn mã dưới đây đang hoạt động 100% trong chủ đề của tôi.

function bittersweet_pagination() {

global $wp_query;

if ( $wp_query->max_num_pages <= 1 ) return; 

$big = 999999999; // need an unlikely integer

$pages = paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
        'type'  => 'array',
    ) );
    if( is_array( $pages ) ) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
        echo '<div class="pagination-wrap"><ul class="pagination">';
        foreach ( $pages as $page ) {
                echo "<li>$page</li>";
        }
       echo '</ul></div>';
        }
}

sử dụng hàm để gọi trong index.php, vd; <?php bittersweet_pagination(); ?>hoặc bất kỳ tập tin khác. Tôi cũng ghi đè lên một số kiểu dáng bootstrap nó có thể giúp bạn.

.pagination-wrap {
    clear: both;
    display: block;
    overflow: hidden;
    text-align: center;
}
.pagination-wrap .pagination {
    margin-bottom: 0;
    margin-top: 0;
}
.pagination-wrap .pagination > li:first-child > a, 
.pagination-wrap .pagination > li:first-child > span {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
.pagination-wrap .pagination > li:last-child > a, 
.pagination-wrap .pagination > li:last-child > span {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}
.pagination-wrap .pagination > li > a,
.pagination-wrap .pagination > li > span {
    background-color: #4FBEBA;
    border: 1px solid #1BA5A0;
    padding: 10px 15px;
    font-weight: bold;
    color: #FFFFFF;
}
.pagination-wrap .pagination > li > a:hover, 
.pagination-wrap .pagination > li > span:hover, 
.pagination-wrap .pagination > li > a:focus, 
.pagination-wrap .pagination > li > span:focus {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current {
    background-color: #1BA5A0;
    border-color: #189690;
}
.pagination-wrap .pagination .current:hover,
.pagination-wrap .pagination .current span:hover {
    background-color: #189690;
    border-color: #148781;
}

Đối với điều này, bạn cần sử dụng tham số loại

$links = paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $posts_array->max_num_pages,
    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
    'next_text'          => __( 'Next page', 'twentyfifteen' ),
    'type' => 'list'
) );
   echo $links

Một tùy chọn khác không được lưu ý ở đây là sao chép các kiểu sang các lớp phân trang WordPress, thay vì thay đổi lớp được gán cho thành phần.

Nếu bạn đang sử dụng Bootstrap và gói mọi thứ với sass, thì bạn có thể áp dụng các kiểu dễ dàng bằng cách sử dụng lệnh @extend.

ul.page-numbers {
    @extend .pagination;
    > li {
        > a, > span {
            &.page-numbers {
                @extend .page-link
                &:focus, :hover {
                    /* Additional hover/focus styles here */
                }
            }
        }
    }
}

Điều này có thể phù hợp với một số tình huống, nhưng tôi cảm thấy mã trong câu hỏi ban đầu là giải pháp tốt nhất cho hầu hết các ứng dụng.