Modification de la classe de liste de pagination


17

paginate_links()La fonction renvoie une liste non ordonnée avec une classe nommée "numéros de page". Comment puis-je changer cette classe?

ÉDITER

Actuellement, j'utilise la méthode de pansement ci-dessous.

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

Y a-t-il une meilleure façon?


1
J'ai trouvé un tutoriel rapide à ce sujet, et ce que je peux voir, vous utilisez la classe de thème bootstrap donc je pense que cela vous aidera! http://www.ordinarycoder.com/paginate_links-class-ul-li-bootstrap/
Erik Larsson

J'ai créé une classe php qui est utile lorsque vous devez définir les noms de classe des balises html LI et A. gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f
pixeline

@ErikLarsson Le lien est rompu.
MastaBaba

Réponses:


11

paginate_links()n'offre pas de paramètre et il n'y a pas de hooks - voir source - disponible pour changer les classes. Ce qui signifie que vous pouvez le faire comme vous l'avez fait ou créer votre propre fonction de pagination paginate_links().


14

Je cherchais également la même solution pour l'utiliser avec des liens de pagination bootstrap,

le code ci-dessous fonctionne à 100% dans mon thè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 la fonction pour appeler dans index.php par exemple; <?php bittersweet_pagination(); ?>ou tout autre fichier. J'ai également remplacé certains styles de bootstrap, cela pourrait 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;
}

1
Vous pourriez améliorer un peu les performances, car cette requête sera appelée à chaque fois que chaque page est générée, même lorsqu'aucune pagination n'est nécessaire. ajouter: `` `if ($ wp_query-> max_num_pages <= 1) return; `` `après votre requête globale $ wp_query au début de la fonction.
pixeline

5

pour cela, vous devez utiliser le paramètre de type

$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

Une autre option non indiquée ici consiste à copier les styles dans les classes de pagination WordPress, au lieu de changer la classe affectée à l'élément.

Si vous utilisez Bootstrap et regroupez tout avec sass, vous pouvez facilement appliquer les styles à l'aide de la @extenddirective.

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

Cela peut être pertinent dans certaines situations, mais je pense que le code de la question d'origine est la meilleure solution pour la plupart des applications.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.