Comment créer une pagination de requête personnalisée dans WordPress avec un exemple
Publié: 2020-02-24
La création d'une pagination de requête personnalisée dans WordPress est l'une des solutions de pagination les plus triées pour les articles de blog et les types d'articles personnalisés. Si vous souhaitez créer une pagination de requête personnalisée dans votre blog WordPress, cet article vous guidera. Idéalement, la pagination de requête personnalisée implique l'utilisation de différents paramètres de requête pour créer la pagination de la publication WordPress basée sur cette requête.
Dans le didacticiel précédent, j'ai expliqué en détail comment vous pouvez ajouter une pagination numérique dans WordPress, ainsi que comment créer la pagination des vignettes précédentes et suivantes, et comment diviser une publication en plusieurs pages à l'aide de la pagination. J'ai également partagé un certain nombre de codes de pagination WordPress que vous pouvez utiliser dans votre blog pour ajouter votre option de pagination préférée. Dans cet article, je vais expliquer comment créer et implémenter une pagination de requête personnalisée sur votre site WordPress.
Pagination de requête personnalisée
Comme je l'ai mentionné dans l'introduction, la pagination de la requête personnalisée se compose de trois parties : la requête personnalisée, le code pour afficher la pagination et certains styles pour que la pagination soit belle. Nous décomposerons ce code de pagination de requête personnalisé en ces trois étapes :
Créer une requête personnalisée de publication ou de publications personnalisées
La première étape consiste à créer une requête qui est essentiellement un tableau d'arguments que nous avons l'intention d'utiliser dans la requête personnalisée.
Pour afficher cette pagination de requête personnalisée, commençons par créer un modèle de page personnalisé dans lequel nous ajouterons le code de la pagination de requête personnalisée.
Voici l'exemple du modèle de page personnalisé avec le code de requête personnalisé :
<?php
/**
* Nom du modèle : Pagination CQ
*
*/
get_header();
// Etape 1 : Créer une requête personnalisée
$paginé = ( get_query_var( 'paginé' ) ) ? get_query_var( 'paginé' ) : 1;
$args = tableau(
'posts_per_page' => 2,// requête des 5 derniers messages
'paginé' => $paginé
);
$customQuery = new WP_Query($args);Ce code crée simplement un modèle de page personnalisé que vous pouvez voir sous les attributs de la page comme indiqué dans l'image ci-dessous :
La requête peut avoir plusieurs arguments mais dans ce cas, nous nous sommes limités au 'posts_per_page' qui est le nombre de posts que nous voulons afficher sur la page.
Nous pouvons également spécifier le type de message en utilisant 'post_type', orderby, author et bien plus encore. Voici un exemple d'une autre requête pour le type de publication personnalisé nommé "livre" :
// Récupère l'auteur actuel à utiliser dans la requête $current_author = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) ); /* définit les arguments de la requête $args = tableau( 'post_type' => array( 'but' ), 'orderby' => 'date', 'commande' => 'desc', 'messages_par_page' => 10, 'paged' => get_query_var( 'page' ) ? get_query_var( 'page' ) : 1, 'auteur' => $current_author->ID ); // Instancie la requête $query = new WP_Query( $args );
Après avoir construit les $args et instancié la requête, nous sommes maintenant prêts à afficher les publications dans la boucle et à ajouter la requête personnalisée à l'étape suivante.
Afficher les publications interrogées dans un modèle de page personnalisé
Pour afficher les publications interrogées, le code a été ajouté au code du modèle personnalisé d'origine et le code complet est le suivant :
<?php
/**
* Nom du modèle : Pagination CQ
*
*/
get_header();
// Etape 1 : Créer une requête personnalisée
$paginé = ( get_query_var( 'paginé' ) ) ? get_query_var( 'paginé' ) : 1;
$args = tableau(
'posts_per_page' => 2,// requête des 5 derniers messages
'paginé' => $paginé
);
$customQuery = new WP_Query($args);
?>
<!-- Étape 2 : Affichez les messages que nous avons interrogés à l'étape 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
global $post ;
?>
<div class="inner-content-wrap">
<ul class="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php le_permalien(); ?>" ><?php le_titre(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- fin des articles de blog -->
<?php pendant que ;
fin si;
wp_reset_query();Créer une fonction de pagination
Dans cette dernière étape, nous devons créer la fonction de pagination que nous utiliserons dans le modèle de page personnalisé ci-dessus pour afficher la pagination de la requête personnalisée. Pour créer la fonction de pagination, nous devons ajouter le code suivant au fichier functions.php :
// Fonction de pagination personnalisée
fonction cq_pagination($pages = '', $range = 4)
{
$showitems = ($plage * 2)+1 ;
global $paginé ;
if(empty($paginé)) $paginé = 1;
si($pages == '')
{
globale $wp_query ;
$pages = $wp_query->max_num_pages ;
si(!$pages)
{
$pages = 1;
}
}
si(1 != $pages)
{
echo "<nav aria-label='Exemple de navigation de page'> <ul class='pagination'> <span>Page ".$paged." de ".$pages."</span>" ;
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« Premier</a>" ;
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Précédent</a>" ;
pour ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paginé == $i) ? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>" ;
}
}
if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)." \">i class='flaticon flaticon-back'></i></a></li>" ;
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>" ;
echo "</ul></nav>\n" ;
}
}
Appelez la fonction de pagination dans un modèle personnalisé
La dernière étape consiste à appeler la fonction que nous avons ajoutée ci-dessus dans le modèle afin que la pagination soit affichée. Pour appeler cette fonction, nous devons utiliser le code suivant :
// Étape 3 : appelez la fonction de pagination ici
si (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Le code final qui crée un modèle de page personnalisé avec cette fonction de pagination doit être le suivant :
<?php
/**
* Nom du modèle : Pagination CQ
*
*/
get_header();
// Etape 1 : Créer une requête personnalisée
$paginé = ( get_query_var( 'paginé' ) ) ? get_query_var( 'paginé' ) : 1;
$args = tableau(
'posts_per_page' => 2,// requête des 5 derniers messages
'paginé' => $paginé
);
$customQuery = new WP_Query($args);
?>
<!-- Étape 2 : Affichez les messages que nous avons interrogés à l'étape 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
global $post ;
?>
<div class="inner-content-wrap">
<ul class="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php le_permalien(); ?>" ><?php le_titre(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- fin des articles de blog -->
<?php pendant que ;
fin si;
wp_reset_query();
// Etape 3 : Appelez la fonction de pagination ici
si (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primaire -->
</div><!-- .wrap -->
<!----fin de page-------->
<?php get_footer(); ?>Si vous avez suivi chaque étape dans le bon sens, vous devriez avoir la pagination comme indiqué dans l'image ci-dessous :
Styliser la pagination de la requête personnalisée
La dernière étape consiste à ajouter les styles à la pagination personnalisée pour qu'elle corresponde aux styles et à la conception du thème. Voici les styles CSS que vous devez ajouter à la feuille de style pour styliser cette pagination personnalisée :
/**
* Styles de pagination CQ
* @auteur Joe Njenga
*/
.pagination {
clarifier les deux;
position:relative ;
taille de police : 16 px ;
hauteur de ligne : 13 px ;
Flotter à droite;
type de style de liste : aucun ;
largeur : 100 % ;
}
.pagination span, .pagination a {
bloc de visualisation;
flotteur : gauche ;
marge : 2px 2px 2px 0 ;
rembourrage : 6px 9px 5px 9px ;
décoration de texte : aucune ;
largeur : automatique ;
couleur :#fff ;
arrière-plan : #237697 ;
}
.pagination a:hover{
couleur :#fff ;
arrière-plan : #000 ;
}
.pagination .current{
rembourrage : 6px 9px 5px 9px ;
arrière-plan : #999 ;
couleur :#fff ;
}Après avoir ajouté ces styles de pagination, l'aspect final de la pagination personnalisée doit être comme indiqué sur l'image ci-dessous :
Dernières pensées
Dans cet article, nous avons décrit la méthode étape par étape pour ajouter une pagination de requête personnalisée à votre blog WordPress. Ces étapes comprennent ; création de la requête, création d'un modèle de page personnalisé pour afficher les publications interrogées personnalisées avec pagination et ajout d'une fonction de pagination au fichier functions.php. Enfin n'oubliez pas d'appeler la fonction de pagination et d'ajouter les styles appropriés qui correspondent au design de votre thème WordPress.