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
Picture of 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. Côté pro, Mike adore apprendre de nouveaux trucs et faire progresser les autres, et côté perso les afters, faire des shoots de baskets et les films d'horreur. La légende raconte qu'avec un mojito il vous accordera +4xp de confiance

5 réflexions sur “Comprendre et utiliser la puissance de la loop de WordPress”

  1. Le Bail Etienne

    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

    1. 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’)

  2. Ping : Comment afficher uniquement les articles d'une catégorie (et pas les articles des catégories enfants) dans Elementor - Actualité WordPress et WooCommerce

  3. Bonjour Mike,

    je souhaite executer une requete pour faire ressortir les produits liés à une ou plusieurs des sous-catégories de produit woocommerce, disposant de variation, de préférence à partir de leur nom ou alors de leur slug de ces sous-catégories.

    Mon problème est qu’Elementor affiche des produits ne correspondant pas aux paramètres de requetes que j’ai défini dans l’interface graphique et ce que ce soit avec des catégories, sous catégories ou étiquettes de produit

    Si j’ai bien compris, je peux par exemple demander à Elementor d’afficher tous les posts avec l’interface graphique puis, avec une requete php et le hook, filtrer les résultats et aussi éventuellement les trier.

    Pourrais-tu donner un exemple de requete pour elementor qui permettrait de faire sortir dans le widget grid loop les produits appartement à une sous catégorie de produit et un autre avec plusieurs sous catégories de produit ?

    Ce serait génial !

    Merci beaucoup

    Nicolas

    1. Hello Nicolas,

      Pas encore eu le temps de tester mais en fouillant un peu il y a de fortes chances qu’en adaptant une query de ce type tu arrive à ton résultat. En fait « product » et « product_category » sont des taxonomies, donc leur appel change un peu :

      $args = array(
      'post_type' => 'product',
      'post_status' => 'publish',
      'tax_query' => array(
      array(
      'taxonomy' => 'product_cat',
      'field' => 'term_id',
      'terms' => array(7,16,32), // Ici tu mets tes ids de categories produits
      ),
      ),
      );

      $query = new WP_Query($args);

      En adaptant ça donnerait qq chose comme ça (à tester et adapter après par tes soins) :

      function change_requete_prodcat($query)
      {
      $query->set('post_type', 'product');
      $query->set('post_status', 'publish');
      $query->set('tax_query', array(
      array(
      'taxonomy' => 'product_cat',
      'field' => 'term_id',
      'terms' => array(7,16,32), // Ici tu mets tes ids de categories produits
      ),
      ),
      ));
      }

      // On fait la liaison avec l'ID de la requete du bloc
      add_action('elementor/query/liste_darticles', 'change_requete_prodcat')

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 !