Je suis un grand fan de la classe WP_Query : je l’utilise sur plusieurs  sites web de clients pour récupérer et afficher des données de manière personnalisée.

Si vous voulez utiliser plusieurs boucles sur une page, la meilleure façon de le faire est d’exécuter « WP_Query » chaque fois que vous devez exécuter une boucle.

Mais il y a un inconvénient : À chaque fois que WordPress exécute une boucle, il envoi des requêtes à la base de données, ce qui prend plus de temps et peut ralentir votre site web.

Dans ce tutoriel, je vais vous montrer comment utiliser une requête pour plus d’une boucle. Vous pouvez le faire avec la requête principale ou vous pourrez utiliser la même technique avec WP_Query.

Nous allons explorer 3 aspects :

 

  • Créer un thème enfant et un fichier modèle.
  • Créez une pièce de modèle pour le contenu de la boucle.
  • Créer nos boucles.

 

Mais avant découvrons ensemble Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

Ce qu’il vous faut

Pour suivre ce tutoriel, vous aurez besoin :

 

  • D’une installation de WordPress pour le développement (en local).
  • Un éditeur de code.
  • Des articles dans votre site web avec de multiples catégories assignées
  • le thème twenty sixteen de WordPress
  • Un thème enfant de twenty sixteen installé et activé

 

Cette technique s’adapte aussi à votre situation, et à votre thème WordPress.

Création d’un thème enfant

Tout d’abord, nous allons créer le thème enfant de twenty sixteen. Je fais cela parce que je ne veux pas modifier le thème parent.

Découvrez Comment installer un thème enfant WordPress

Dans votre dossier « wp-content/themes », créez un nouveau dossier vide, que vous appellerez « tuto-theme ». Vous pourrez plus tard choisir le nom qui vous convient.

Dans ce dossier, créez un fichier appelé style.css et ajouter y le code suivant :

/*

Theme Name: Tuto Theme

Theme URI: https://blogpascher.com

Description: Theme to support Tutorial on running multiple loops while querying the database just once. Child theme for the Twenty Sixteen theme.

Author: Hervé

Author URI: https://blogpascher.com

Template: twentysixteen

Version: 1.0

*/

 

@import url(« ../twentysixteen/style.css »);

Maintenant, sauvegardez ce fichier et activez votre nouveau thème WordPress.

L’étape suivante consiste à créer un fichier de modèle pour les catégories, c’est ce sur quoi nous allons travailler.

Faites une copie du fichier « archive.php » depuis le thème WordPress « Twenty Sixteen ». Ne le déplacez pas, mais faites-en une copie. Renommez-le « category.php ».

Pour aller plus loin, découvrez Comment gérer les fichiers et les dossiers WordPress

Ce sera désormais le fichier modèle pour les catégories de votre site web.

Création d’un nouveau fichier template

La première étape consiste à créer un nouveau fichier modèle dans notre thème qui contiendra une version modifiée de la boucle de « twenty sixteen ».

Consultons aussi ensemble Comment mettre votre site web WordPress en mode Maintenance

Dans le dossier du thème enfant, créez un sous-dossier appelé « includes ». Et à l’intérieur, créez un nouveau fichier nommé « loop-category.php ».

Ensuite, ouvrez le fichier « template-parts/content.php » à partir des dossiers du thème parent(twenty sixteen) et retrouvez le code suivant :

<article id= »post-<?php the_ID(); ?> » <?php post_class(); ?>>

 <header class= »entry-header »>

 <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>

 <span class= »sticky-post »><?php _e( ‘Featured’, ‘twentysixteen’ ); ?></span>

 <?php endif; ?>

 

 <?php the_title( sprintf( ‘<h2 class= »entry-title »><a href= »%s » rel= »bookmark »>’, esc_url( get_permalink() ) ), ‘</a></h2>’ ); ?>

 </header><!– .entry-header –>

 

 <?php twentysixteen_excerpt(); ?>

 

 <?php twentysixteen_post_thumbnail(); ?>

 

 <div class= »entry-content »>

 <?php

 /* translators: %s: Name of current post */

 the_content( sprintf(

 __( ‘Continue reading<span class= »screen-reader-text »> « %s »</span>’, ‘twentysixteen’ ),

 get_the_title()

 ) );

 

 wp_link_pages( array(

 ‘before’ => ‘<div class= »page-links »><span class= »page-links-title »>’ . __( ‘Pages:’, ‘twentysixteen’ ) . ‘</span>’,

 ‘after’ => ‘</div>’,

 ‘link_before’ => ‘<span>’,

 ‘link_after’ => ‘</span>’,

 ‘pagelink’ => ‘<span class= »screen-reader-text »>’ . __( ‘Page’, ‘twentysixteen’ ) . ‘ </span>%’,

 ‘separator’ => ‘<span class= »screen-reader-text »>, </span>’,

 ) );

 ?>

 </div><!– .entry-content –>

 

 <footer class= »entry-footer »>

 <?php twentysixteen_entry_meta(); ?>

 <?php

 edit_post_link(

 sprintf(

 /* translators: %s: Name of current post */

 __( ‘Edit<span class= »screen-reader-text »> « %s »</span>’, ‘twentysixteen’ ),

 get_the_title()

 ),

 ‘<span class= »edit-link »>’,

 ‘</span>’

 );

 ?>

 </footer><!– .entry-footer –>

</article><!– #post-## –>

Copiez ce code dans le nouveau fichier « loop-category.php » du thème enfant.

Modification du fichier template-part

La boucle de « twenty sixteen » affiche plus que ce dont j’ai besoin, donc je vais modifier ce code. Je veux juste afficher l’extrait et non le contenu, donc nous allons supprimer le contenu.

Quelle est la différence entre H1 et le titre SEO d’un article WordPress ? Découvrez-le en consultant cet article.

Dans votre nouveau fichier loop-category.php, retrouvez ce code et supprimez-le:

<div class= »entry-content »>

 <?php

 /* translators: %s: Name of current post */

 the_content( sprintf(

 __( ‘Continue reading<span class= »screen-reader-text »> « %s »</span>’, ‘twentysixteen’ ),

 get_the_title()

 ) );

 

 wp_link_pages( array(

 ‘before’ => ‘<div class= »page-links »><span class= »page-links-title »>’ . __( ‘Pages:’, ‘twentysixteen’ ) . ‘</span>’,

 ‘after’ => ‘</div>’,

 ‘link_before’ => ‘<span>’,

 ‘link_after’ => ‘</span>’,

 ‘pagelink’ => ‘<span class= »screen-reader-text »>’ . __( ‘Page’, ‘twentysixteen’ ) . ‘ </span>%’,

 ‘separator’ => ‘<span class= »screen-reader-text »>, </span>’,

 ) );

 ?>

</div><!– .entry-content –>

L’autre étape consiste à remplacer La fonction « twenty_sixteen_excerpt() » par la fonction « the_excerpt() », parce que la version de twenty sixteen ne propose pas un lien vers l’article complet.

Consultez aussi Comment afficher les articles récents d’une catégorie spécifique

Trouvez cette ligne :

<?php twenty_sixteen_excerpt(); ?>

Remplacez-la par ceci :

<?php the_excerpt(); ?>

Nous avons également besoin de faire quelques modifications aux balises du titre.

Dans la partie du modèle, modifiez la ligne :

<?php the_title( sprintf( ‘<h2 class= »entry-title »><a href= »%s » rel= »bookmark »>’, esc_url( get_permalink() ) ), ‘</a></h2>’ ); ?>

Modifiez les balises H2 pour H3 :

<?php the_title( sprintf( ‘<h3 class= »entry-title »><a href= »%s » rel= »bookmark »>’, esc_url( get_permalink() ) ), ‘</a></h3>’ ); ?>

Enregistrez votre modèle. Ensuite, retournez à votre fichier category.php nous allons continuer avec ce dernier.

Création des boucles

Tout d’abord nous allons supprimer l’inclusion du code de « twenty sixteen » de notre fichier « category.php », car nous aurons besoin d’utiliser le nouveau fichier.

Dans votre fichier category.php retrouvez ce code :

get_template_part( ‘template-parts/content’, get_post_format() );

Et supprimer le.

Ensuite nous allons créer les boucles.

Dans cet exemple, je vais afficher tous articles avec l’étiquette «content», en utilisant la balise conditionnelle « has_tag() ». Cela signifie que je vais devoir parcourir trois boucles :

 

  • La première contrôle si la requête a affiché des articles avec cette étiquette.
  • Si oui, la seconde affiche les articles avec cette étiquette.
  • Une troisième affiche les articles sans cette balise.

 

Entre chaque boucle, je vais utiliser rewind_posts() pour rembobiner les messages sans réinitialiser la requête : nous travaillons toujours avec la requête principale à chaque fois.

La première boucle : Vérification des articles

Dans votre fichier « category.php », trouvez le début de la boucle :

while ( have_posts() ) : the_post();

Au- dessus de cette ligne, définissez une nouvelle variable appelée $count :

$count = 0;

Ensuite, à l’intérieur de cette boucle, ajoutez ce code :

// check if there are any posts with the  » tag

$tag = ‘content’;

if ( has_tag( $tag ) ) {

 $count +=1;

}

Ce code vérifie si les messages ont l’étiquette «content» puis ajoute 1 au compteur si oui.

L’intérieur de la boucle sera similaire à ceci :

// Check for posts in the first loop.

$count = 0;

while ( have_posts() ) : the_post();

 

// check if there are any posts with the  » tag

$tag = ‘content’;

if ( has_tag( $tag ) ) {

 $count +=1;

}

 

endwhile;

La deuxième boucle : Restituer les articles avec le tag

L’étape suivante consiste à exécuter une boucle pour afficher des articles avec cette étiquette, seulement s’il y en a.

Par exemple, si la valeur de $count est supérieur à 0.

Découvrez aussi Comment personnaliser le tableau de bord WordPress pour un client

Ajouter cette condition à la boucle :

if ( $count > 0 ) {

 

 rewind_posts();

 

 echo ‘<h2>Posts tagged with ‘ . $tag . ‘</h2>’;

 

 

 while ( have_posts() ) : the_post();

 

 if ( has_tag( $tag ) ) { 

 get_template_part( ‘includes/loop’, ‘category’); 

 }

 

 // End the loop.

 endwhile;

 

}

Ce code permet de vérifier que $count est supérieur à zéro et si oui, rembobine les articles et exécute à nouveau la boucle. Pour chaque articles il vérifie si ce dernier possède notre étiquette et, le cas échéant, il appelle la partie du modèle que nous venons de créer.

La troisième boucle : Afficher le reste des articles

La sortie sera une boucle finale sur les articles restants. Si cette catégorie n’a pas d’article avec l’étiquette « content », alors elle affichera tous les articles de la catégorie.

Apprenez aussi Comment créer un blog multi-auteurs et permettre à vos lecteurs de publier des articles sur votre Blog

Dans votre deuxième boucle, ajoutez ceci :

rewind_posts();

 

 

// Second Loop – posts not with the ‘content’ tag

while ( have_posts() ) : the_post();

 

 if ( !has_tag( $tag ) ) { 

 get_template_part( ‘includes/loop’, ‘category’); 

 }

 

// End the loop.

endwhile; ?>

Ce dernier code rembobine les articles, puis exécute à nouveau la boucle. Cette fois, il vérifie si un article ne possède pas l’étiquette «content» alors, il affiche le contenu dans le « template-part ».

Nous vous proposons aussi de découvrir Comment ajouter une option d’impression d’articles sur WordPress

Vous pouvez maintenant tester la page des articles de votre blog. N’oubliez pas que vous pouvez modifier les filtres. Dans ce tutoriel nous avons utilisé « content » comme filtre des étiquettes, mais vous pourrez utiliser celui de votre choix.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Social Wall Addon for UserPro

UserPro peut être beaucoup plus amusant avec un mur social. C’est ce qu’apporte son extension Social Wall. Avec l’extension Social Wall, vous pouvez créer un mur sur votre site web et proposer à vos membres une façon rafraîchissante d’interagir avec la communauté.

Le plugin WordPress Social Wall permet notamment à vos utilisateurs de : partager des messages entre eux, partager des images, commenter les publications des autres, les utilisateurs peuvent aimer ou ne pas aimer un message, ils peuvent choisir d’afficher le mur uniquement pour les utilisateurs connectés ou pour tous les utilisateurs, les administrateurs peuvent supprimer les publications ou les commentaires des utilisateurs, etc…

Télécharger | Démo | Hébergement Web

2. Flipkart Affiliate Plus

Flipkart Affiliate Plus est un plugin WordPress modulaire qui permet de connecter votre site Web WordPress à l’API Flipkart Affiliate. 

Ce plugin WordPress facilite grandement l’importation de données de produits à partir de Flipkart et les met à jour directement sur votre site web. Flipkart Affiliate Plus est le premier plugin WordPress pour l’API officielle de Flipkart. En l’utilisant, vous n’aurez pas besoin d’utiliser une API tierce. Vous bénéficiez ainsi pleinement de votre travail.

Télécharger | Démo | Hébergement Web

3. Actionable Google Analytics for WooCommerce

Actionable Google Analytics est un plugin WordPress qui vous permet d’utiliser certaines des meilleures fonctionnalités de Universal Analytics, dont : Enhanced Ecommerce et User ID Tracking. De plus, ce plugin prend en charge l’anonymisation des adresses IP, le remboursement de produits, le regroupement de contenu, le suivi des formulaires, etc…

En utilisant ce plugin WordPress, vous gagnerez en temps dans l’intégration du code complexe de Google Analytics, ainsi vous pourrez vous concentrer sur la gestion de vos données.

Ses principales fonctionnalités sont : l’installation rapide et facile, l’accès à 9 rapports améliorés d’e-Commerce, la possibilité d’étudier la façon dont différents dispositifs sont utilisés par le même utilisateur et la façon dont les achats sont menés, la capacité à analyser les produits qui sont remboursés le plus souvent, enfin de prendre des mesures de redressement, et plus encore.

Télécharger | Démo | Hébergement Web

Autres ressources recommandées

Nous vous invitons aussi à consulter les ressources ci-dessous pour aller plus loin dans la prise en main et le contrôle de votre site web et blog.

 

 

Conclusion

Voilà ! C’est tout pour ce tutoriel assez technique. J’espère que nous avons été explicite sur comment utiliser correctement WP_Query sur WordPress. N’hésitez pas à partager l’astuce avec vos amis sur vos réseaux sociaux.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Mais, en attendant, faites-nous part de vos commentaires et suggestions dans la section dédiée.

…