Page auteurs paginée dans WordPresss

Août 28, 2020 | wordPress | 0 commentaire

Cet exemple décrit une manière de montrer les auteurs d’un site wordPress, en allant chercher les informations à l’aide de l’objet WP_User_Query qui permet de faire des requêtes sur les tables wp_users et wp_users_meta. Dans le cas de sites avec de nombreux auteurs, il peut être préférable de paginer les résultats pour éviter d’avoir une page trop longue. La navigation entre les différentes pages peut se faire alors en AJAX pour fluidifier l’expérience utilisateur.

Exemple de page auteurs paginée sur Murviel Info

Création du page-template

On crée un page-template pour accueillir cette page en php. On ne la nomme pas author.php, ce nom étant réservé dans WordPress pour accueillir la page d’archive d’un author en particulier. Je la nomme page-template-authors.php à la racine du thème. On peut aussi faire un dossier dans le thème (parent ou enfant) pour accueillir les différentes pages templates. Pour indiquer à WordPress qu’il est en présence d’un modèle de page, on démarre l’entête de la page avec les commentaires suivants :

1
2
3
4
<?php
/*
* Template Name: Authors
*/

Ceci permettra d’avoir un modèle de page dans l’éditeur d’articles de WordPress.

Un select pour choisir le modèle de page dans l'éditeur de WordPress

Ecriture du template

Pour remplir ce fichier, on utilise le modèle de page par défaut, en allant chercher le header get_header(), en inscrivant la structure du contenu principal, en invoquant get_sidebar() pour la barre latérale, et get_footer() pour le bas de page et les scripts. On imprime le résultat d’une fonction, que l’on écrira dans functions.php, on aurait pu l’écrire directement dans le template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
/*
Template Name: Authors
*/
 
get_header(); ?>
<div id="main-content" class="authors-page">
   <div class="container">
      <div id="content-area" class="<?php extra_sidebar_class(); ?> clearfix">
        
         <div id="left-area" class="et_pb_extra_column_main">
 
            <?php echo clio_get_authors(); ?>
 
         </div><!-- /.et_pb_extra_column.et_pb_extra_column_main -->
 
<?php get_sidebar(); ?>
 
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
 
<?php get_footer();

Cet exemple est fait avec le thème Extra, l’identifiant et les classes des divs peuvent changer en fonction de votre thème.

La requête WP User Query

La fonction clio_get_authors() va faire la requête en base de données sur les table wp_users et wp_usermeta. La requête prend cette forme avec différents arguments pour affiner les résultats :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      $number = 33;
      $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
      $offset = ( $paged -1 ) * $number;
      $args = array(
         'who'                 => 'authors',
         'order'               => 'ASC',
         'orderby'             => 'display_name',
         'has_published_posts' => true,
         'exclude'             => [1],
         'number'              => $number,
         'offset'              => $offset,
         'paged'               => $paged,
         'count_total'         => true,
      );
 
   $user_query = new WP_User_Query( $args );
 
   $authors = $user_query->get_results();
 
   $total_authors = $user_query->get_total();
   $total_query   = count( $authors );
   $total_pages   = isset( $number ) ? intval( $total_authors / $number) + 1 : 1;

Pour obtenir la liste des arguments nécessaires ou supplémentaires, on peut se référer à la documentation de la classe WP_User_Query. Les arguments nécessaires à la pagination sont number (nombre d’auteurs par page), offset (le rang de l’auteur par lequel commence les résultat de la sous-page de pagination) et paged pour indiquer le numéro de la page sur laquelle on se trouve. Le paramètre count_total est défini à true, pour permettre d’accéder au nombre total d’auteurs de la requête avec la méthode get_total(), il nous servira pour la pagination.

Une fois que la requête est faite pour la page, on affiche les résultats avec une fonction que l’on définira pour montrer un auteur unique prenant en argument l’auteur à afficher, et la barre de navigation affichée à l’aide de la fonction 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
25
    ob_start(); ?>
 
   <div class="clio_authors" id="clio_top-content">
   <?php foreach ( $user_query->get_results() as $author ):
      echo clio_get_author( $author );
   endforeach; ?>
   </div>
 
   <?php if( $total_authors > $total_query ): ?>
   <div class="archive-pagination">
      <?php $current_page = max( 1, get_query_var( 'paged' ) );
      echo paginate_links([
         'base'    => get_pagenum_link( 1 ) . '/%_%',
         'format'  => 'page/%#%',
         'current' => $current_page,
         'total'   => $total_pages,
         'type'    => 'list',
         'mid_size'  => 1,
         'prev_text' => '',
         'next_text' => '',
      ]); ?>
   </div>
   <?php endif;
 
   return ob_get_clean();

Un exemple de fonction pour afficher un auteur pourrait être :

1
2
3
4
5
6
7
8
9
10
11
12
13
function clio_get_author( $author, $trim_words = 30 ) {
   ob_start(); ?>
 
   <div class="clio_author">
      <h2><?php echo esc_html( $author->display_name ); ?></h2>
      <p><?php echo wp_trim_words( strip_tags( $author->description ), $trim_words, ' …' ); ?></p>
      <p><?php $count = count_user_posts( $author->ID );
               esc_html_e( sprintf( _n( '%d Post', '%d Posts', $count, 'extra' ), $count ) ); ?></p>
   </div>
 
   <?php return ob_get_clean();
 
}

Cette fonction retourne une div avec le nom de l’auteur, sa description et le nombre d’articles écrits. Un exemple plus long, piqué dans le thème Extra et recopié dans le thème enfant pourrait être :

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
function clio_get_author( $author ) {
 
   $trim_words = 30;
   $alt = "Avatar de {$author->display_name}";
   $avatar = get_avatar( $author->ID, 128, 'mystery', $alt );
   ob_start(); ?>
 
   <div class="clio_author">
      <div class="clio_author-content">
         <a href="<?php echo esc_url( get_author_posts_url( $author->ID ) ); ?>" title="<?php echo esc_attr( sprintf( __( 'Posts By: %s', 'extra' ), $author->display_name ) ); ?>" rel="author">
            <?php echo $avatar; ?>
         </a>
         <h2><?php echo esc_html( $author->display_name ); ?></h2>
         <?php if( false !== get_user_meta( $author->ID, 'user_title', true) ): ?>
         <p class="user-title"><?php echo get_user_meta( $author->ID, 'user_title', true ); ?></p>
         <?php endif; ?>
         <p class="description"><?php echo wp_trim_words( strip_tags( $author->description ), $trim_words, ' …' ); ?></p>
         <?php $count = count_user_posts( $author->ID ); ?>
         <a href="<?php echo esc_url( get_author_posts_url( $author->ID ) ); ?>" class="button post-count" title="<?php printf( esc_attr__( 'Posts By: %s', 'extra' ), $author->user_nicename ); ?>" rel="author"><?php esc_html_e( sprintf( _n( '%d Post', '%d Posts', $count, 'extra' ), $count ) ); ?>
         </a>
      <?php
      $social_links = '';
      foreach ( extra_get_social_networks() as $network => $title ) {
         $network = esc_attr( $network );
         if ( !empty( $author->$network ) ) {
            $url = extra_format_url( $author->$network );
            $social_links .= sprintf( '<a href="%s" target="_blank"><i class="et-extra-icon et-extra-icon-%s et-extra-icon-author-%s-color-hover"></i></a>',
               esc_url( $url ),
               esc_attr( $network ),
               esc_attr( $author->ID )
            );
         }
      }
      if ( !empty( $social_links ) ) {
         echo '<div class="author-footer">' . $social_links . '</div>';
      }
      ?>
      </div>
   </div>
 
 
   <?php return ob_get_clean();
 
}

Voilà, il ne reste plus qu’à créer une page vide dans l’éditeur, en sélectionnant le modèle de page Authors, et lui donner un titre qui lui donnera un slug, par exemple Auteurs. La page sera accessible à l’adresse https://mondomain/auteurs, en fonction du réglage des permalinks, les urls des pages suivantes seront de la forme https://mondomain/auteurs/page/n, n étant le numéro de la page.

Pour la navigation en AJAX, on écrit un javascript qui va permettre cela. Avec jQuery et la méthode $.get(), on appelle le contenu de la page qui nous intéresse. On suppose disposer d’un loader gif (image pour faire patienter l’utilisateur), que les liens sur la pagination ont la classe page-numbers. On entre dans l’historique de navigation la page appelée pour indiquer celle-ci dans la barre d’adresse du navigateur. Si l’utilisateur appuie sur le bouton de page précédente, l’évènement popstate est déclenché, et on l’envoie sur la page en question.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   var loader = '<span class="loader" id="clio-ajax"><img src="/wp-content/plugins/clio-manager/assets/images/loaders/clio-loader.gif" alt="Loading"></span>';
  
   $( '#main-content' ).on( 'click', 'a.page-numbers', function( e ) {
      e.preventDefault();
      var href = $( this ).attr( 'href' );
      $( this ).after( loader );
      $.get( href + ' #left-area', function( data ) {
         var elem = $( data ).find( '#left-area' );
         // $( '#clio-loader' ).remove();
         $( '#left-area' ).replaceWith( elem );
         smoothScroll( '#clio_top-content', { top: 70 } );  // Smooth scroll to #clio_top-content
         history.pushState({href: href}, 'Page ' + $( this ).text(), href );
 
      });
   });
 
   window.onpopstate = e => {
      if(e.state.href) location.href = e.state.href;
   }

La fonction smoothScroll() pour remonter doucement et automatiquement sur la page pourrait s’écrire de la façon suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   const smoothScroll = ( anchor, options ) => {
      var anchor = anchor || '#';
      var defaults = {
         top: 20,
         duration: 1000,
         position: 'top' /* top, middle, bottom */
      };
      var param = $.extend( defaults, options );
      var top = 0;
      if( anchor != '#' ) {
         switch( param.position ) {
            case 'top':
               top = $( anchor ).offset().top - param.top;
               break;
            case 'middle':
               top = $( anchor ).offset().top - window.innerHeight / 2 ;
            break;
            case 'bottom':
               top = $( anchor ).offset().top - window.innerHeight ;
            break;
         }
      }
      $( 'html, body' ).animate( { scrollTop: top }, param.duration );  // Soft scroll to top
   }

Et hop, une jolie pagination et une navigation en AJAX sur une page Auteurs dans WorPress en utilisant un template.

Soumettre 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.