Dans cette revue du web, le sujet abordé est un concept très utilisé dans WordPress, à savoir la loop, ou boucle en Français.
Vous pouvez télécharger le PDF de cette présentation directement
Prélude – Le Départ de l’enquête
« Donner à la requête un ID unique personnalisé pour permettre le filtrage côté serveur »
Elementor le mystérieux
En utilisant Elementor, un élément me laissait perplexe lors de l’utilisation de l’élément « Publications » qui affiche une liste d’article. En effet, « ID de requête » et « Donner à la requête un ID unique personnalisé pour permettre le filtrage côté serveur ».
On sent bien le jeu d’équilibriste effectué lors de la traduction française, mais qu’est ce que cela peut bien vouloir dire dans les faits ? Hé bien c’est la question à laquelle nous allons répondre, et durant cette enquête nous allons beaucoup parler de la fameuse loop de WordPress, sa compréhension permettant de résoudre l’énigme !
Y voir un peu plus clair avec la loop
La loop de WordPress
La documentation de WordPress est assez dense à ce sujet et tout est très bien expliqué.
https://codex.wordpress.org/fr:La_Boucle
https://codex.wordpress.org/fr:La_Boucle_En_Action
En résumé :
- « The Loop » ou « La Boucle » est un terme qui se réfère au processus principal de WordPress.
- La Boucle (The Loop) est utilisée par WordPress pour afficher chacun de vos Articles.
=> catégories, articles, tags, etc
C’est encore un peu flou ? C’est normal, on va le détailler dans un exemple ! Analysons une page simplifiée de WordPress
Voici le code simplifiée d’une page archive de WordPress, qui affiche l’entête du site, liste des articles (contenus), la sidebar et enfin le pied de page
Détaillons un peu le code de cette page !
Le fonctionnement de la loop
- Vérifie si les fichiers php nécessaires existent
- Vérifie les paramètres par défaut définis dans WP (nb articles par page, commentaires ou pas ?, etc.)
- Vérifie ce que le visiteur veut voir : une catégorie ? un article ? une page ? Ceci lui permet de lancer la bonne requête mysql pour aller extraire les articles => La MAIN QUERY : la requête SQL principale utilisée par WP pour afficher du contenu
- Si le visiteur n’a pas demandé un article, une catégorie, une page, ou une date spécifique, WordPress utilise les paramètres par défaut précédemment collectées pour déterminer quels articles préparer
La Main Query de la loop de WordPress
Pour utiliser les requêtes MySQL, WordPress utilise la classe WP_Query, qui lui permet de faire simplement des requêtes en fournissant des paramètres et de récupérer les données demandées.
En utilisant la WP Query, vous pourrez personnaliser les données ramenées par WordPress
Là aussi, la documentation WordPress regorge d’informations, dont je vous recommande la lecture.
https://developer.wordpress.org/reference/classes/wp_query/
En voici quelques exemples pour que vous puissiez voir la puissance et la simplicité d’utilisation :
// Permet d'afficher les posts uniquement de la catégorie 4 (n'inclue pas les posts des sous catégorie de la catégorie 4)
$query = new WP_QUERY( array ('category__in' => 4 ));
// Permet d'afficher les posts de plusieurs catégories dont on donne les ids
$query = new WP_QUERY( array ('cat' => '2,6,17,38' ));
// Permet d'afficher les posts de plusieurs catégories dont on donne les slugs de category
// dans ce cas les posts venant de la categorie "staff" OU "news"
$query = new WP_QUERY( array ('categroy_name' => 'staff, news' ));
// Permet d'afficher les posts de plusieurs catégories dont on donne les slugs de category
// dans ce cas uniquement les posts venant de la categorie "staff" ET "news"
$query = new WP_QUERY( array ('categroy_name' => 'staff+news' ));
Capitaine WP a écrit un article formidable détaillant tout sur la WP Query, à lire pour TOUT comprendre : https://capitainewp.io/formations/developper-theme-wordpress/wp-query/
Les query_vars, paramètres de de la query
Comment connaître les query_vars ? et pourquoi ?
Les paramètres utilisés par la wp_query sont des « query_vars ». En connaissant les query_vars, vous saurez agir sur les wp_query !
Encore une fois, tout est dans la documentation (quasiment) et donc je vous recommande grandement d’y jeter un oeil. Vous y trouverez la liste des arguments par type (posts, pages, catégorie, etc) + des tonnes d’exemples
https://developer.wordpress.org/reference/classes/wp_query/
Pourquoi agir sur la main query ?
Agir sur la boucle principale de WordPress vous permet d’intervenir sur les paramètres de la requête utilisée pour générer la page.
Là encore, très bon taff de capitaine WP qui détaille tout très bien sur cette page : https://capitainewp.io/formations/developper-theme-wordpress/modifier-parametres-boucle-wordpress
Revenons à notre enquête concernant la boucle et Elementor !
Maintenant que vous avez compris l’utilisation des requêtes WP_QUERY, avec les paramètres query_vars pour personnaliser ces requêtes, quel rapport avec notre énigme du début.
Et bien, lorsque vous utilisez un éléments « Publications », vous pouvez lui attribuer un ID, cet ID permet de cibler la requête correspondante, et vous pouvez agir directement sur cette requête et ses paramètres.
C’est un peu flou ? Imageons le tout par un exemple : Pour créer un annuaire, j’ai besoin de lister uniquement pour une catégorie donnée de lister les articles par ordre alphabétique.
étape 1 : configuration du bloc elementor
on définit un id pour la requête de cette liste.
Dans mon cas, l’ID est « liste_darticles«
//---------------------------------------
//
// CHANGEMENT PARAMETRES REQUETE
//
//---------------------------------------
// Code rajouté dans functions.php du child
// theme
//---------------------------------------
// Cette fonctionne définit de nouveaux
// paramètres pour la requete
function change_requete_annuaire($query)
{
// Tri par nom
$query->set('orderby', 'title');
// du plus petit au plus grand
$query->set('order', 'ASC');
//On affiche 60 posts par page
$query->set('posts_per_page', '60');
}
// On fait la liaison avec l'ID de la requete du bloc
add_action('elementor/query/liste_darticles', 'change_requete_annuaire')étape 2 : Personnalisation des paramètres de la requête correspondante
Afin d’agir sur les paramètres de cette requête, il faut rajouter du code php dans le fichier functions.php de votre thème (idéalement le thème enfant).
On définit d’abord une fonction qui change des paramètres de la requête, puisqu’on trie les articles par titre, de façon ascendante, et on pagine par 60.
On fait ensuite la liaison entre cette fonction et la requête spécifique du bloc en précisant son ID
Voici en plus imagé la liaison faite entre » l’ID unique personnalisé « de la requête donné dans Elementor, et le code PHP permettant le » filtrage côté serveur «
Là encore, la documentation (celle d’Elementor pour le coup) permet d’en apprendre un peu plus, avec moults exemples à l’appui :
https://developers.elementor.com/docs/hooks/custom-query-filter/
Conclusion
En résumé, cet ID permet d’écrire du code pour personnaliser UNIQUEMENT la requête de ce bloc
Doc Sherlock
2 réflexions sur “Comprendre et utiliser la puissance de la loop de WordPress”
Bonjour,
Merci pour ces explications très claires, cependant je rencontre un problème lorsque que j’ajoute donc ce code dans l’extension snippets :
ajout du code php :
function my_query_by_different_order( $query) {
$query->set(‘orderby’, ‘date’);
$query->set(‘order’, ‘ASC’);
}
add_action(‘elementor/query/liste_events’, ‘my_query_by_different_order’)
Vous l’aurez compris le but est de posté les évènements du plus récents au plus anciens, néanmoins je rencontre un message d’erreur lorsque je souhaite enregistrer mon code, stipulant je cite
» Pas de panique
L’extrait de code que vous essayez d’enregistrer a produit une erreur fatale à la ligne 6 :
syntax error, unexpected end of file
La version précédente de l’extrait est inchangée, et le reste du site devrait fonctionner normalement comme avant.
Veuillez utiliser le bouton retour de votre navigateur pour revenir à la page précédente et essayer de réparer l’erreur de code. Si vous le souhaitez, vous pouvez fermer cette page et abandonner les changements que vous venez de faire. Aucun changement ne sera appliqué à ce site. ».
Je ne comprends donc pas il doit y avoir un problème dans mon code si oui lequel ?
CORDIALEMENT
Etienne Le Bail
Bonjour Etienne !
Merci pour ton retour.
En regardant ton code (sauf si tu ne l’as pas pris dans ton copier/coller), on dirait qu’il manque un point-virgule à la fin de
add_action(‘elementor/query/liste_events’, ‘my_query_by_different_order’)