"/>

La pagination dans les articles ou les custom post type

La pagination dans les articles ou les custom post type

Ici on va voir comment inclure la pagination rapidement sur son site wordpress: les fonctions sont tirées des exemples pris sur le site de Kriesi et d’autres extensions..

voici la fonction à insérer dans functions.php:

function custom_pagination($numpages = '', $pagerange = '', $paged='') {

  if (empty($pagerange)) {
    $pagerange = 2;
  }

  global $paged;
  if (empty($paged)) {
    $paged = 1;
  }
  if ($numpages == '') {
    global $wp_query;
    $numpages = $wp_query->max_num_pages;
    if(!$numpages) {
        $numpages = 1;
    }
  }


  $pagination_args = array(
    'base'            => get_pagenum_link(1) . '%_%',
    'format'          => 'page/%#%',
    'total'           => $numpages,
    'current'         => $paged,
    'show_all'        => False,
    'end_size'        => 1,
    'mid_size'        => $pagerange,
    'prev_next'       => True,
    'prev_text'       => __('«'),
    'next_text'       => __('»'),
    'type'            => 'plain',
    'add_args'        => false,
    'add_fragment'    => ''
  );

  $paginate_links = paginate_links($pagination_args);

  if ($paginate_links) {
    echo "



</p>
<nav class='custom-pagination'>";
      echo "<span class='page-numbers page-num'>Page " . $paged . " sur " . $numpages . "</span> ";
      echo $paginate_links;
    echo "</nav>
<p>




";
  }

}

Voici un exemple de css:

/* ============================================================
  PAGINATION ACTUALITES
============================================================ */
.custom-pagination span,
.custom-pagination a {
  display: inline-block;
    padding: 8px 11px;
    text-decoration:none!important;
}
.custom-pagination a {
  background-color: #958a83;
  color: #fff;
  transition: all 0.2s ease-in-out
}
.custom-pagination a:hover {
  background-color: #c9a64f; 
  color: #fff;
}
.custom-pagination span.page-num {
  margin-right: 10px;
  padding: 0;
}
.custom-pagination span.dots {
  padding: 0;
  color: gainsboro;
}
.custom-pagination span.current {
  background-color:  #c9a64f;
  color: #fff;
}

.custom-pagination{  text-align: center;  margin-top: 2em;}
.clear{clear:both}

Ensuite, dans ses fichiers d’archives, on inclut cette pagination dans la boucle:

Voici un exemple:

        <?php $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; $custom_args = array( 'post_type' => 'publication',
            'posts_per_page' => 5,
            'post_status' => ' published',
            'order_by' => 'post_date',
            'order' => 'DESC',
            'paged' => $paged
        );

        ;
        ?>                      <?php $custom_query = new WP_Query($custom_args); ?>
        <?php if ($custom_query->have_posts()) : ?>
    <?php while ($custom_query->have_posts()) : $custom_query->the_post(); ?>

Dans la même page, une fois la fonction appelée, il va falloir placer la pagination à l’endroit souhaité.Ici je le place évidemment en dehors de ma boucle.

 <?php endwhile; ?>
     
        <?php wp_reset_postdata(); ?>
<?php endif;?>
        <?php if (function_exists(custom_pagination)) { custom_pagination($custom_query->max_num_pages, "", $paged);
        }
        ?>

En fonction du nombre d’articles (ou custom post) par page indiqué dans la fonction ( ‘posts_per_page’ => 2,), wordpress va automatiquement créer les pages:

pagination

Et voici la manières simplifiée.

  $wp_query = new WP_Query(); 
  $wp_query->query('showposts=6&post_type=chroniques'.'&paged='.$paged); 

On inclut le paramètre paged dans les arguments de notre requête pour indiquer à wordpress qu’on souhaite enclencher le système de pagination.

Enfin, dernière étape et non des moindres, car si on ne le sait pas on peut simplement y passer la journée..voir ne jamais comprendre pourquoi ca ne marche pas.

En fait, le nombre de post à afficher dans votre requête, doit être égal ou inférieur au nombre de post indiqué dans le backoffice – onglet ‘lecture’

display

si dans le code on affiche un nombre plus grand que dans le backoffice, wordpress ne va pas comprendre et n’affichera donc pas de pagination.Bien faire attention à ce point!!

La fonction paginate_links()

WordPress ne cesse d’évoluer, et la fonction paginate_links() permet maintenant de créer une pagination très simplement. Voici un exemple d’implémentation,à l’intérieur d’un page archive. Le résultat, vous pouvez l’observer sur ce présent site. Je vous renvoie à cette page pour en savoir plus. Il n’y a pas besoin de créer une fonction spécifique, et dans le cas d’une boucle simple, seule la fonction paginate_links() suffit pour afficher la pagination. Il faudra bien sûr penser à styliser le tout grâce au css. La fonction peut-être appelée telle sans faire appel à la variable globlae $paged, dans les pages où on retrouve la boucle classique de wordpress (index.php, archive.php, category.php, search.php).

<?php
   get_header();
   ?>
<div class="col-sm-12 col-xs-12" id="content">
   <?php if ( have_posts() ) : ?>
   <header class="archive-header">
      <h1 class="archive-title"><?php printf(__('Tutoriels sur: %s', 'personnal'), '<span>' . single_cat_title('', false) . '</span>'); ?></h1>
      <?php if (category_description()) : // Show an optional category description ?>
      <div class="archive-meta"><?php echo category_description(); ?></div>
      <?php endif; ?>
   </header>
   <!-- .archive-header -->
   <div id="grid-container" class="grid">
    <?php  // Start the Loop.
   

     
      // Start the Loop.
      while ( have_posts() ) :
        the_post();

        /*
         * Include the Post-Format-specific template for the content.
         * If you want to override this in a child theme, then include a file
         * called content-___.php (where ___ is the Post Format name) and that will be used instead.
         */
        get_template_part('content', get_post_format());

        // End the loop.
      endwhile;?>

        </div>
      <?php  else : ?>
      <?php get_template_part('content', 'none'); ?>
      <?php endif; ?>
       <?php $big = 999999999; // need an unlikely integer
          echo '<nav class="custom-pagination">';
          global $wp_query;
          $big = 999999999; // need an unlikely integer

          echo 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
          ) );
          echo '</nav>';
         ?> 

</div><!-- #content -->  
<?php get_footer(); ?>

En revanche pour les custom post types ou toute autre boucle customisée, comme pour une catégorie particulière,  il faudra inclure la variable dans les paramètres de la requête.

<?php
//Protect against arbitrary paged values
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
 
$args = array(
    'posts_per_page' => 5,
    'category_name' => 'gallery',
    'paged' => $paged,
);
 
$the_query = new WP_Query( $args );
?>
<!-- the loop etc.. -->

<?php
$big = 999999999; // need an unlikely integer
 
echo paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $the_query->max_num_pages
) );
?>

5 commentaires sur “La pagination dans les articles ou les custom post type

  1. Sébastien

    Merci pour l’astuce. En effet, c’est souvent le genre de détails qui fait péter des boulons parfois !!

  2. ange

    bonjour,
    j’ai appliqué à la lettre ce ce qui est marqué et la pagination affiche mais le lien vers la page 2 m’affiche une PAGE INTROUVABLE. Tous les paramètres semblent être bon y compris le nombre à afficher dans le backoffice.
    Une idée ?

  3. ange

    Hello,
    Votre code semble pourtant parfait et sans erreur. La preuve, quelqu’un juste avant moi a pu l’utiliser.
    J’ai modifier les permaliens mais toujours la même erreur. Je m’assois tout le week end dessus et si je n’ai pas de solution, je verrai les liens proposés.
    Encore merci pour tout.

  4. copier coller Auteur de l'article

    Merci à vous,je reviendrai dessus pour vérifier le code..autrement essayez aussi avec le code de Kriesi dont le mets le lien en début d’article..ca devrait marcher!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.