Modification de la classe de la liste de pagination

Question

Modification de la classe de la liste de pagination

- 19
- 47607 2013-12-11
Lafonction
paginate_links() renvoie une listenon ordonnée avec la classenommée "page-numbers".Commentpuis-je changer cette classe?

MODIFIER

Actuellement,j'utilise laméthode dupansement ci-dessous.

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

Y a-t-il unmeilleurmoyen?
paginate_links() function returns unordered list with class named "page-numbers". How can I change this class?

EDIT

Currently, I am using the band-aid method below.

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

Is there any better way?
pagination paginate-links

- J'aitrouvé untutoriel rapide à ce sujet,et ce queje peux voir,vous utilisez la classe dethèmebootstrap doncje pense que cela vous aidera![http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/[http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/)
  
  I've found a quick tutorial on this, and what i can se you use the bootstrap theme class so i'll think this will help! [http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/](http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/)
  - 1
  - 2014-03-04
  - Erik Larsson
- J'ai créé une classephp quiest utile lorsque vous devez définir lesnoms de classe desbalises html LIet A.https://gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
  
  I have made a php class that is useful when you need to set the LI and A html tags class names. https://gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
  - 0
  - 2016-12-08
  - pixeline
- @ErikLarsson Le lienest rompu.
  
  @ErikLarsson Link is broken.
  - 0
  - 2017-09-15
  - MastaBaba

4 réponses

votes

15

2014-06-24

Je cherchais également lamême solutionpour l'utiliser avec des liens depaginationbootstrap,

le code ci-dessousfonctionne à 100% dansmonthème.

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

utilisez lafonctionpour appeler dansindex.phpparexemple; <?php bittersweet_pagination(); ?> outout autrefichier. J'écrase également certains styles debootstrap,celapourrait vous aider.

 .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 was also searching for the same solution to use it with bootstrap pagination links,

the below code is working 100% in my theme.

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

use the function to call in index.php e.g; <?php bittersweet_pagination(); ?> or any other file. I also overwrite some bootstrap styling it might help you.

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

Vouspourriez améliorer unpeu lesperformances,car cette requête sera appelée à chaquefois que chaquepageestgénérée,même lorsqu'aucunepaginationn'estnécessaire.ajouter: `` ``if ($ wp_query->max_num_pages <=1) return;`` après votre requêteglobale $ wp_query au début de lafonction.

You could improve a tad the performance, since this query will be called each time each page is generated, even when no pagination is necessary. add: ``` if ( $wp_query->max_num_pages <= 1 ) return; ``` after your global $wp_query at the beginning of the function.
- 1
- 2016-12-08
- pixeline

6

2015-07-04

pour cela,vous devez utiliser leparamètre detype

 $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

for this you need to use type 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
- 2019-01-15
Une autre optionnonnotéeiciest de copier les styles dans les classes depagination WordPress,au lieu de changer la classe attribuée à l'élément.

Si vous utilisez Bootstrapet que vous regroupeztout avec sass,vouspouvez appliquer les stylesfacilementen utilisant la directive @extend.

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

Celapeut êtrepertinent dans certaines situations,maisje pense que le code de la question d'origineest lameilleure solutionpour laplupart des applications.
Another option not noted here is to copy the styles over to the WordPress pagination classes, instead of changing the class assigned to the element.

If you are using Bootstrap and bundling everything with sass, then you can apply the styles easily using the @extend directive.

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

This may be pertinent to some situations, but I feel the code in the original question is the best solution for most applications.

Nicolai · Accepted Answer · 2013-12-11

12

2013-12-11

paginate_links() ne proposepas deparamètreet làne sontpas des hooks - voir source -disponiblepour changer la (les) classe (s).Ce qui signifie que vouspouvez lefaire comme vous l'avezfait ou que vous créez votreproprefonction depaginationbasée sur paginate_links().