Afficher une liste d’articles dans un sous-menu dynamique de WordPress

Vous pouvez paramétrer vos menus pour qu’ils affichent des pages ou des articles spécifiques, des liens personnalisés ou des liens vers des archives de catégorie. Mais il n’est pas possible, par défaut, d’afficher dans un sous-menu la liste des articles présents dans une catégorie, ou possédant un certain tag, ou publié dans une période donnée. Nous allons voir comment remédier à cela grâce au hook walker_nav_menu_start_el.

Le hook walker_nav_menu_start_el

Le hook walker_nav_menu_start_el permet d’agir (de modifier ou supprimer) la partie HTML située à l’intérieur d’une liste de menu, c’est à dire ce qui est à l’intérieur de la balise <li>. Ce hook utilise 4 paramètres :

• $item_output : le code HTML de l’item en cours
• $item : l’objet de l’item (WP_Post)
• $depth : la profondeur de l’item
• $args : l’objet du menu

Voici le code source que nous allons créer dynamiquement :

[pastacode lang= »markup » manual= »%3Cli%20class%3D%22menu-item%20menu-item-type-taxonomy%20menu-item-object-category%20menu-item-820%22%3E%0A%09%3Ca%20href%3D%22%23%22%3ETitre%20de%20la%20rubrique%3C%2Fa%3E%0A%09%0A%09%3C!–%20les%20sous-menus%20que%20nous%20allons%20ajouter%20dynamiquement–%3E%0A%09%3Cul%20class%3D%22sub-menu%22%20style%3D%22display%3A%20none%3B%22%3E%0A%09%09%3Cli%20class%3D%22%20menu-item%20menu-item-type-taxonomy%20menu-item-object-category%22%3E%0A%09%09%09%3Ca%20href%3D%22%23%22%3ESous%20titre%20dynamique%201%3C%2Fa%3E%0A%09%09%3C%2Fli%3E%0A%09%09%3Cli%20class%3D%22%20menu-item%20menu-item-type-taxonomy%20menu-item-object-category%22%3E%0A%09%09%09%3Ca%20href%3D%22%23%22%3ESous%20titre%20dynamique%202%3C%2Fa%3E%0A%09%09%3C%2Fli%3E%0A%09%3C%2Ful%3E%0A%09%3C!–%20–%3E%0A%3C%2Fli%3E » message= » » highlight= » » provider= »manual »/]

Nous devons donc cibler le premier item « Titre de la rubrique » et ajouter à la suite notre sous-menu dynamique.

Un exemple fonctionnel

[pastacode lang= »php » manual= »%2F**%0A%20*%20Ajoute%20un%20sous-menu%20dynamique%0A%20*%0A%20*%20%40param%20string%20%20%20%20%24item_output%20The%20menu%20item’s%20starting%20HTML%20output.%0A%20*%20%40param%20WP_Post%20%20%20%24item%20Menu%20item%20data%20object.%0A%20*%20%40param%20int%20%20%20%20%20%20%20%24depth%20Depth%20of%20menu%20item.%20Used%20for%20padding.%0A%20*%20%40param%20stdClass%20%20%24args%20An%20object%20of%20wp_nav_menu()%20arguments.%0A%20*%0A%20*%20%40return%20string%0A%20*%2F%0Afunction%20ch_nav_menu_primary_custom(%20%24item_output%2C%20%24item%2C%20%24depth%2C%20%24args%20)%20%7B%0A%09if%20(%20153%20%3D%3D%20%24item-%3Eobject_id%20)%20%7B%0A%09%09%24item_output%20.%3D%20’%3Cul%20class%3D%22sub-menu%22%3E’%3B%0A%09%09%24args%20%3D%20array(%0A%09%09%09’posts_per_page’%20%20%20%3D%3E%205%2C%0A%09%09%09’category’%20%20%20%20%20%20%20%20%20%3D%3E%20%24item-%3Eobject_id%2C%0A%09%09%09’orderby’%20%20%20%20%20%20%20%20%20%20%3D%3E%20’comment_count’%2C%0A%09%09%09’order’%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’DESC’%2C%0A%09%09%09’post_status’%20%20%20%20%20%20%3D%3E%20’publish’%2C%0A%09%09)%3B%0A%09%09%24posts_array%20%3D%20get_posts(%20%24args%20)%3B%0A%09%09foreach%20(%20%24posts_array%20as%20%24post%20)%20%7B%0A%09%09%09%24item_output%20.%3D%20’%3Cli%20class%3D%22’%20.%20trim(%20implode(%20’%20’%2C%20%24item-%3Eclasses%20)%20)%20.%20’%22%3E’%3B%0A%09%09%09%24item_output%20.%3D%20’%3Ca%20href%3D%22’%20.%20get_the_permalink(%20%24post-%3EID%20)%20.%20’%22%3E’%20.%20get_the_title(%20%24post-%3EID%20)%20.%20’%3C%2Fa%3E’%3B%0A%09%09%09%24item_output%20.%3D%20’%3C%2Fli%3E’%3B%0A%09%09%7D%0A%09%09%24item_output%20.%3D%20’%3C%2Ful%3E’%3B%0A%09%7D%0A%09return%20%24item_output%3B%0A%7D%0Aadd_filter(%20’walker_nav_menu_start_el’%2C%20’ch_nav_menu_primary_custom’%2C%2010%2C%204%20)%3B » message= » » highlight= » » provider= »manual »/]

Dans cet exemple, nous ajoutons un sous-menu à un item d’archive de catégorie (id : 153) qui affichera la liste des 5 articles les plus populaires de cette catégorie.

Cibler l’item sur lequel intervenir

Pour intervenir sur un item spécifique du menu,

Dans cet exemple, nous voulons intervenir après l’item 100. Pour connaitre l’ID en question, il suffit de repérer l’ID du menu-item présent dans l’URL des liens « Retirer » ou « Supprimer »  de la gestion des menus.

[pastacode lang= »php » manual= »if%20(%20’100’%20%3D%3D%20%24item-%3EID%20)%20%7B%0A%09%24item_output%20.%3D%20’…’%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Pour intervenir sur un lien vers une archive de catégorie

Dans cet exemple, nous voulons intervenir après l’item d’archive de catégorie 153. Pour connaitre l’ID de la catégorie  il suffit de repérer l’ID du tag-ID présent dans l’URL des liens d’édition de la catégorie.

[pastacode lang= »php » manual= »if%20(%20153%20%3D%3D%20%24item-%3Eobject_id%20)%20%7B%0A%09%24item_output%20.%3D%20’…’%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Pour intervenir sur un item de premier niveau

Dans cet exemple, nous voulons intervenir sur tous les items de premiers niveaux

[pastacode lang= »php » manual= »if%20(%200%20%3D%3D%20%24item-%3Emenu_item_parent%20)%20%7B%0A%09%24item_output%20.%3D%20’…’%3B%0A%7D » message= » » highlight= » » provider= »manual »/]

Pour remplacer le contenu

Si vous souhaitez remplacer le code HTML plutôt que d’ajouter à la suite, il suffit de ne pas concaténer $item_outpout :

[pastacode lang= »php » manual= »if%20(%200%20%3D%3D%20%24item-%3Emenu_item_parent%20)%20%7B%0A%09%24item_output%20%3D%20’…’%3B%0A%7D » message= » » highlight= »2″ provider= »manual »/]

Choisir le type d’article à afficher

j’ai utilisé un simple get_posts pour obtenir une liste d’articles en fonction de conditions pré-définies. Il ne vous reste donc plus qu’à créer la requête qui répond à vos attentes, voici quelques exemples…

Afficher les articles d’une catégorie donnée

Ici on affiche les 5 articles qui sont le plus commentés de la catégorie dont l’ID est « 20 »,

[pastacode lang= »php » manual= »%24args%20%3D%20array(%0A%09%09%09’posts_per_page’%20%20%20%3D%3E%205%2C%0A%09%09%09’category’%20%20%20%20%20%20%20%20%20%3D%3E%2020%2C%0A%09%09%09’orderby’%20%20%20%20%20%20%20%20%20%20%3D%3E%20’comment_count’%2C%0A%09%09%09’order’%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’DESC’%2C%0A%09%09%09’post_status’%20%20%20%20%20%20%3D%3E%20’publish’%2C%0A%09%09)%3B%0A%0A%2F%2F%20Ou%20par%20le%20nom%20de%20cat%C3%A9gorie%20(et%20en%20combinant%20plusieurs%20cat%C3%A9gories)%0A%0A%24args%20%3D%20array(%0A%09%09%09’posts_per_page’%20%20%20%3D%3E%205%2C%0A%09%09%09’category_name’%20%20%20%20%20%20%20%20%20%3D%3E%20%22livres%2Cdisques%22%2C%0A%09%09%09’orderby’%20%20%20%20%20%20%20%20%20%20%3D%3E%20’comment_count’%2C%0A%09%09%09’order’%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’DESC’%2C%0A%09%09%09’post_status’%20%20%20%20%20%20%3D%3E%20’publish’%2C%0A%09%09)%3B » message= » » highlight= » » provider= »manual »/]

Afficher les articles possédant une étiquette spécifique

[pastacode lang= »php » manual= »%24args%20%3D%20array(%0A%09%09%09’posts_per_page’%20%20%20%3D%3E%205%2C%0A%09%09%09’tag’%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20%22a-lire%22%2C%0A%09%09%09’orderby’%20%20%20%20%20%20%20%20%20%20%3D%3E%20’comment_count’%2C%0A%09%09%09’order’%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’DESC’%2C%0A%09%09%09’post_status’%20%20%20%20%20%20%3D%3E%20’publish’%2C%0A%09%09)%3B » message= » » highlight= » » provider= »manual »/]

Afficher une liste de produits WooCommerce

Pour afficher les 10 premiers produits ayant un attribut rouge.

[pastacode lang= »php » manual= »%24args%20%3D%20array(%0A%09%09%09’posts_per_page’%20%20%20%3D%3E%2010%2C%0A%09%09%09’post_type’%20%20%20%20%20%20%20%20%3D%3E%20%22product%22%2C%0A%09%09%09’orderby’%20%20%20%20%20%20%20%20%20%20%3D%3E%20’title’%2C%0A%09%09%09’order’%20%20%20%20%20%20%20%20%20%20%20%20%3D%3E%20’ASC’%2C%0A%09%09%09’post_status’%20%20%20%20%20%20%3D%3E%20’publish’%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20’tax_query’%20%09%20%20%20%3D%3E%20array(%0A%09%09%09%20%20%20%20%09array(%0A%09%09%09%09%20%20%20%20%09’taxonomy’%20%09%09%3D%3E%20’pa_color’%2C%0A%09%09%09%09%09%09’terms’%20%09%09%3D%3E%20’red’%2C%0A%09%09%09%09%09%09’field’%20%09%09%3D%3E%20’slug’%2C%0A%09%09%09%09%09%09’operator’%20%09%09%3D%3E%20’IN’%0A%09%09%09%09%09)%0A%09%09%09%20%20%20%20)%0A)%3B » message= » » highlight= » » provider= »manual »/]

A vous de jouer maintenant !

---

Si cet article vous a aidé, si vous avez des questions ou des améliorations à proposer, n'hésitez pas à me laisser un commentaire en bas de page !