Comprendre et utiliser la puissance de la loop de WordPress

Table des matières

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 !

Qu’est ce ça veut bien vouloir dire ?

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

  1. Vérifie si les fichiers php nécessaires existent
  2. Vérifie les paramètres par défaut définis dans WP (nb articles par page, commentaires ou pas ?, etc.)
  3. 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
  4. 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
mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Mike aime les afters, faire des shoots de baskets et les films d'horreur,

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !