Notez que cet article a été écrit il y a plus de 6 ans, mais il n'est pas forcément obsolète.
Dans la liste des articles du blog (index.php), ou bien même dans les articles d’une catégorie (category.php) ou bien les résultats d’une recherche, wordPress affiche des liens vers les pages suivante et précédente. Cette navigation charge une nouvelle page (la précédente ou la suivante) avec les résumés d’articles correspondants. Il est possible d’afficher des liens de navigation vers différentes pages, pas seulement la précédente et la suivante, et de ne charger que le contenu sans recharger toute la page.
Pour cela, on peut utiliser le plugin WP-PageNavi ou le faire manuellement en ajoutant la fonction d’affichage des liens dans functions.php du thème:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
function xbs_numeric_posts_nav() { if( is_singular() ) return; global $wp_query; /** Stoppe l’exécution s'il n'y a qu'une page */ if( $wp_query->max_num_pages <= 1 ) return; $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1; $max = intval( $wp_query->max_num_pages ); /** Ajoute la page courante au tableau */ if ( $paged >= 1 ) $links[] = $paged; /** Add the pages around the current page to the array */ if ( $paged >= 3 ) { $links[] = $paged - 1; $links[] = $paged - 2; } if ( ( $paged + 2 ) <= $max ) { $links[] = $paged + 2; $links[] = $paged + 1; } echo '<div class="navigation"><ul>' . "\n"; /** Lien vers la page précedente */ if ( get_previous_posts_link() ) printf( '<li>%s</li>' . "\n", get_previous_posts_link() ); /** Lien vers la 1ère page, et des points de suspension si nécessaire */ if ( ! in_array( 1, $links ) ) { $class = 1 == $paged ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' ); if ( ! in_array( 2, $links ) ) echo '<li>…</li>'; } /** Lien vers la page courante, plus 2 pages dans chaque direction si nécessaire */ sort( $links ); foreach ( (array) $links as $link ) { $class = $paged == $link ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link ); } /** Lien vers la 1ère page, et des points de suspension si nécessaire */ if ( ! in_array( $max, $links ) ) { if ( ! in_array( $max - 1, $links ) ) echo '<li>…</li>' . "\n"; $class = $paged == $max ? ' class="active"' : ''; printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max ); } /** Lien vers la page suivante */ if ( get_next_posts_link() ) printf( '<li>%s</li>' . "\n", get_next_posts_link() ); echo '</ul></div>' . "\n"; } |
Il ne reste plus qu’à remplacer le lien de navigation dans la page index.php, (ou/et category.php, archive.php …):
|
1 2 3 4 |
<?php xbs_numeric_posts_nav(); // get_template_part( 'includes/navigation', 'index' ); // from Divi theme ?> |
Et de styliser cela dans style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* Liens navigation */ .navigation { text-align: center; } .navigation li { display: inline; } .navigation li a, .navigation li.active a, .navigation li.disabled { color: #fff; font-size: 80%; text-decoration:none; background-color: rgba(46, 163, 242, 0.65); border-radius: 3px; cursor: pointer; padding: 4px 8px; } .navigation li.active a { background-color: #B62D30; } .navigation li a:hover { background-color: #DFA841; } |
À ce point, la navigation se fait par N° de page, mais chaque page est rechargée. Pour faire cela en aJax, en ne changeant que le contenu, il faut charger la nouvelle page par jQuery:
|
1 2 3 4 5 6 7 8 9 |
/* Pagination Ajax */ $( '#left-area' ).on( 'click', '.navigation a', function( e ) { e.preventDefault(); var href = $( this ).attr( 'href' ); $( '#left-area' ).load( href + ' #left-area', function() { $( this ).fadeIn( 500 ); $( 'html, body' ).animate( { scrollTop: 0 }, 1000 ); // Remontée douce vers le haut de la page }) }); |
#left_area est la colonne de gauche à changer dans mon thème (Divi).
Il faut mettre cela dans un fichier javascript que l’on charge dans functions.php:
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'xbs_script' ); function xbs_script() { if( is_home() ) // Si l'on ne veut cibler que la page d'accueil wp_enqueue_script('xbsCustomJs', DIVI_CHILD_URI.'/js/xbsCustom.js', array('jquery'), '1.0', true); } |
DIVI_CHILD_URI est le chemin vers mon thème (get_stylesheet_directory_uri()).
Et hop, une navigation en aJax par N° de pages.
Je n’ai pas encore essayé mais on peut également utiliser le hook ‘paginate-links’:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
add_filter( 'paginate-links', 'xbs_paginate_links'); function xbs_paginate_links( $args ) { $args = array( 'base' => $pagenum_link, // http://example.com/all_posts.php%_% : %_% is replaced by format (below) 'format' => $format, // ?page=%#% : %#% is replaced by the page number 'total' => $total, 'current' => $current, 'show_all' => false, 'prev_next' => true, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'end_size' => 1, 'mid_size' => 2, 'type' => 'plain', 'add_args' => array(), // array of query args to add 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' ); return $args; } |
À essayer donc …
Trackbacks/Pingbacks