Mengubah kelas daftar pagination


17

paginate_links()fungsi mengembalikan daftar tidak berurutan dengan kelas bernama "nomor halaman". Bagaimana saya bisa mengubah kelas ini?

EDIT

Saat ini, saya menggunakan metode band-aid di bawah ini.

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

Apakah ada cara yang lebih baik?


1
Saya telah menemukan tutorial singkat tentang ini, dan apa yang saya bisa Anda gunakan kelas tema bootstrap jadi saya pikir ini akan membantu! http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/
Erik Larsson

Saya telah membuat kelas php yang berguna ketika Anda perlu mengatur nama kelas tag LI dan A html. gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
pixeline

@ErikLarsson Link rusak.
MastaBaba

Jawaban:


11

paginate_links()tidak menawarkan parameter dan tidak ada kait - lihat sumber - tersedia untuk mengubah kelas. Yang berarti Anda dapat melakukannya seperti yang Anda lakukan atau Anda membuat fungsi pagination sendiri berdasarkan paginate_links().


14

Saya juga mencari solusi yang sama untuk menggunakannya dengan tautan pagination bootstrap,

kode di bawah ini berfungsi 100% di tema saya.

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>';
        }
}

gunakan fungsi ini untuk memanggil index.php misalnya; <?php bittersweet_pagination(); ?>atau file lainnya. Saya juga menimpa beberapa gaya bootstrap yang mungkin membantu Anda.

.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;
}

1
Anda dapat meningkatkan sedikit kinerja, karena permintaan ini akan dipanggil setiap kali setiap halaman dihasilkan, bahkan ketika tidak ada pagination yang diperlukan. tambahkan: `` `if ($ wp_query-> max_num_pages <= 1) kembali; `` `setelah global $ wp_query Anda di awal fungsi.
Pixeline

5

untuk ini, Anda perlu menggunakan tipe parameter

$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

0

Opsi lain yang tidak dicatat di sini adalah untuk menyalin gaya ke kelas pagination WordPress, alih-alih mengubah kelas yang ditetapkan untuk elemen.

Jika Anda menggunakan Bootstrap dan menggabungkan semuanya dengan sass, maka Anda dapat menerapkan gaya dengan mudah menggunakan @extendarahan.

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

Ini mungkin berkaitan dengan beberapa situasi, tetapi saya merasa kode dalam pertanyaan awal adalah solusi terbaik untuk sebagian besar aplikasi.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.