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.
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
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.