La fonction paginate_links()
renvoie une liste non ordonnée avec la classe nommée "numéros de page". Comment puis-je changer cette classe?
MODIFIER
J'utilise actuellement la méthode du 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?
paginate_links()
n'offre pas de paramètre et il n'y a pas de crochets - voir source - disponible pour changer de classe. Cela signifie que vous pouvez le faire comme vous l'avez fait ou créer votre propre fonction de pagination basée sur paginate_links()
.
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 index.php, par exemple; <?php bittersweet_pagination(); ?>
ou tout autre fichier. Je remplace également certains styles de bootstrap qui pourraient 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;
}
pour cela, vous devez utiliser le paramètre 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
Une autre option non indiquée ici consiste à copier les styles dans les classes de pagination WordPress, au lieu de modifier la classe attribuée à l'élément.
Si vous utilisez Bootstrap et que vous associez le tout à sass, vous pouvez facilement appliquer les styles à l'aide de la directive @extend
.
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 j'estime que le code de la question initiale est la meilleure solution pour la plupart des applications.