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