Tutoriel

Elementor - Afficher une custom loop par taxonomie

Afficher différentes boucles Elementor selon la catégorie du post. Solution PHP simple sans surcharge de performance.

Vous travaillez sur un site culinaire avec Elementor et vous voulez afficher des recettes groupées par catégorie (entrées, plats, desserts) - mais chaque catégorie a son propre template custom. Elementor dit que c'est impossible... sauf que non.

Le problème

Elementor Grid Loop affiche une seule boucle pour tous les posts. Si vous aviez besoin de trois templates différents selon la catégorie, vous étiez coincé. Les solutions usuelles proposent des bricolages au CSS ou des plugins lourds.

Elementor Grid Loop standard affichant une seule boucle
Grid Loop standard - une seule boucle pour tous les posts

Voici l'alternative : une fonction PHP courte qui détecte la catégorie du post et appelle le bon shortcode Elementor.

L'approche en 4 étapes

1. Créer trois boucles Elementor

Une pour chaque catégorie. Dans Elementor, créez trois Saved Sections (ou Saved Pages si vous préférez) :

  • Boucle EntrĂ©es - ID: 330
  • Boucle Plats - ID: 342
  • Boucle Desserts - ID: 357

Notez les IDs de chaque template. Vous les retrouvez dans l'URL Elementor ou en inspectant le code source du post.

2. Ajouter la fonction PHP

Dans votre functions.php, collez cette fonction :

function custom_loop_by_category() {
    $post_id = get_the_ID();
    $terms = get_the_terms( $post_id, 'recipe_category' );
    
    if ( ! $terms || is_wp_error( $terms ) ) {
        return '';
    }
    
    $category = $terms[0]->term_id;
    $loop_map = array(
        5 => 330,   // categorie_entree -> boucle 330
        6 => 342,   // categorie_plat -> boucle 342
        7 => 357,   // categorie_dessert -> boucle 357
    );
    
    if ( isset( $loop_map[ $category ] ) ) {
        return do_shortcode( '[elementor-template id="' . $loop_map[ $category ] . '"]' );
    }
    
    return '';
}
add_shortcode( 'customloop', 'custom_loop_by_category' );

Adaptez les valeurs :

  • recipe_category : remplacez par votre taxonomie personnalisĂ©e
  • 5, 6, 7 : IDs des catĂ©gories (pas des boucles)
  • 330, 342, 357 : IDs des templates Elementor
Diagramme du mapping entre catégories et boucles Elementor
Le mapping en array - chaque catégorie pointe vers sa boucle

3. Créer une quatrième boucle conteneur

Cette boucle sert de wrapper. Elle affiche tous les posts mais sans marges ni padding (laissez ça aux trois templates internes). Elle ne contient que le shortcode [customloop].

4. Intégrer le shortcode

Oubliez le Grid Loop standard. Utilisez simplement un widget Shortcode qui appelle :

[customloop]

À chaque iteration du post loop, la fonction detect la catégorie et affiche la bonne template.

Pourquoi ça marche

Performance. Zéro requête SQL supplémentaire - on utilise juste get_the_terms() qui est déjà loade. Zéro JavaScript, zéro CSS lourd.

Flexibilité. Vous pouvez mapper autant de catégories que vous voulez. Ajouter une nouvelle catégorie = une ligne dans le array.

Maintenance. Le code vit dans functions.php, pas dans Elementor. Aucun risque d'accident au drag-drop.

Pièges à éviter

  • Noms de taxonomie - VĂ©rifiez le bon nom dans l'admin WordPress (Taxonomies panel). Pas d'inventions.
  • IDs de template - Copiez-collez depuis l'URL Elementor, pas Ă  la main.
  • Confondre term_id et post_id - Les clĂ©s du array sont les term_id, pas les post_id.

Tester rapidement

Ajoutez un echo dans la fonction pour debugger :

echo 'Category ID: ' . $category . ' - Loop ID: ' . $loop_map[ $category ];

Puis ouvrez l'inspection navigateur (F12) pour voir quels IDs sont détectés et affichés.

Ce que j'en retiens

  • Pas de contrainte = crĂ©ativitĂ©. Elementor interdit ce cas, donc la solution rĂ©side dans du PHP simple.
  • Les templates Elementor sont des posts. Un ID de template peut ĂŞtre appelĂ© depuis n'importe quel shortcode, pas juste depuis Grid Loop.
  • Le mapping en array est robuste. Ajouter ou retirer une catĂ©gorie devient du config, pas du refactor.