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.
…
Bonjour
en tout cas je vous remercie vivement pour tes reponses et je vous souhaite une bonne continuation
merci
___________ ________ _____ ____________
| article 1 | | arti 2 | |_a3_| | |
|__________| |_______| _____ | article 6 |
______________________ | 5 | | |
|_________ 4 _________| |____| |___________|
Bonjour Blair ,
je vous remercie pour ces tutos parfais ,
j’aimerais demander un tout petit aide svp.
j’ai créer mon propre thème wordpres (html/css) et j’ai rencontrer un petit problème je vais essayer de vous mettre au point : je compte creer un site semblable a msn.com mon site vas etre devisé a plusieurs divisions(rubriques) qui sont: news, divertissement, santé, lifestyle …etc. c’est a dire que je souhaite réaliser un premier groupe d’Article, et un deuxieme groupe, un troixieme …etc . mais afficher tous les groupes sur la même page et que chaque groupe appartiens a une rubrique(niche). je me demande si ce back office de wordpress peut gérer le contenue de chaque rubrique séparement ? avec la boucle wordpress //Post Content sorry, no posts found ! j’obtien un mélange d’articles :
c’est a dire que mon dernier article écrit se place directement sur la premiere rubrique qui es news , alors que c’est un article qui appartiens a lifestyle par exemple .
j’ai tombé sur cette page https://codex.wordpress.org/fr:La_Boucle je pense que la partie boucles multiples peut résoudre mon problème !
j’espere que vous comprenez ce que j’essaie de dire
merci par avance pour votre réponse,
Cordialement,
Bonjour,
je pense que vous vous compliquez la tâche pour rien. Déjà ce que je comprend, c’est que vous souhaitez organiser vos articles en catégories (rubrique) et chaque rubrique peut appartenir à une niche, ce qui peut être des catégories parente. Oui la boucle peut vous aider à le faire, et c’est d’une simplicité impressionnante.
Du courage !
Bonjour.
d’abord je vous remercie pour votre réponse rapide. Je pense que le thème que je viens de créer n’est plus compatible a wordpress et que c’est d’ici ou viens le problème .
en faite puisque vos commentaires ne support pas l’image jointe je vais vous expliquer en dessinant :
voici donc une des catégories du site
___________ ________ _____ ____________
| article 1 | | arti 2 | |_a3_| | | imaginez donc que chaque article est
|__________| |_______| _____ | article 6 | représenté par un carreau ; on as donc 6
______________________ | 5 | | | articles ( chaque carreau contiens l’image
|_________ 4 _________| |____| |___________| et le titre d’un article particulier )
mon vrais problème monsieur Blair, c’est que j’arrive pas a boucler mes articles pour qu’ils puissent se déplacer du carreau 1 vers le carreau 6 , c’est a dire que l’orsque j’ajoute un nouveau article et que je le publie je veux que ce dernier prend la place de l’article 1 comme dans tous les thèmes existants.
– je pense que c’est irréalisable puisque chaque post(article) a ses propres propriétés tel que l’emplacement, la hauteur,la largeur …etc , que pensez vous alors ?
bien sur l’idée est un peu claire avec ce schéma , sinon si je ne vous dérange pas et que vous voudriez m’aider, vous avez mon e-mail ( vous n’avez qu’as envoyer un courriel contenant votre nom ) .
Merci encore une fois pour votre repense
Bonsoir, dans ce cas d’espèce, vous aurez besoin de jouter avec des variable de type « int », ainsi, chaque fois que la boucle loop, vous incrémenterez la variable et en fonction de la valeur de la variable, vous pourrez modifier l’affichage de l’article. Par exemple :
if( $i == 1 ) {
// votre code ici
} else if( $i == 2 ) {
// pareil
}
$i++;
Malheureusement, je ne peux pas vous assister personnellement pour le moment.