{"id":11718,"date":"2012-08-10T17:23:36","date_gmt":"2012-08-10T15:23:36","guid":{"rendered":"https:\/\/www.saasweb.agency\/blog\/wordpress-creer-une-navigation-veritablement-personnalisee-et-la-classe-walker_nav_menu\/"},"modified":"2026-10-27T08:33:27","modified_gmt":"2026-10-27T07:33:27","slug":"wordpress-creer-une-navigation-veritablement-personnalisee-et-la-classe-walker_nav_menu","status":"publish","type":"post","link":"https:\/\/www.saasweb.agency\/fr\/blog\/wordpress-creer-une-navigation-veritablement-personnalisee-et-la-classe-walker_nav_menu\/","title":{"rendered":"WordPress : Cr\u00e9er une navigation v\u00e9ritablement personnalis\u00e9e et la classe Walker_Nav_Menu"},"content":{"rendered":"

\"\"Il arrive fr\u00e9quemment qu’une navigation de site web ne doive pas seulement afficher le nom de la page, mais aussi des informations y aff\u00e9rentes, comme la description ou l’image de la page, ou n’importe quoi d’autre… Pour en avoir le contr\u00f4le, il faut la classe Walker_Nav_Menu. <\/p>\n

Proc\u00e9dure<\/u>
\nDans le fichier functions.php, ins\u00e9rez le code suivant ; il correspond au code propre \u00e0 WP. Les modifications souhait\u00e9es y seront ensuite effectu\u00e9es. <\/p>\n

class Custom_Walker extends Walker_Nav_Menu{\n\n  function start_el(&$output, $item, $depth, $args){\n    \n    $classes = empty ( $item->classes ) ? array () : (array) $item->classes;\n    $class_names = join(\" \", apply_filters(\"nav_menu_css_class\", array_filter($classes), $item));\n\n    ! empty ($class_names) and $class_names = \" class='\" . esc_attr($class_names) . \"'\";\n\n    $output .= $indent . \"
  • \";\n\n    $attributes = \"\";\n\n    ! empty($item->attr_title) and $attributes .= \" title='\" . esc_attr($item->attr_title) . \"'\";\n    ! empty($item->target) and $attributes .= \" target='\" . esc_attr($item->target) . \"'\";\n    ! empty($item->xfn) and $attributes .= \" rel='\" . esc_attr($item->xfn) . \"'\";\n    ! empty($item->url) and $attributes .= \" href='\" . esc_attr($item->url) . \"'\";\n\n    $title = apply_filters(\"the_title\", $item->title, $item->ID);\n\n    $item_output = $args->before . \"\" . $args->link_before . $title . \"<\/a> \" . $args->link_after. $args->after;\n\n    \/\/ Since $output is called by reference we don't need to return anything.\n    $output .= apply_filters(\"walker_nav_menu_start_el\", $item_output, $item, $depth, $args);\n  }\n}<\/li><\/code><\/pre>\n
    Que voulons-nous modifier maintenant ? Par exemple, ne pas avoir une navigation <ul><li> mais simplement des <div> pour les \u00e9l\u00e9ments de navigation individuels. De plus, l’image de l’article en dessous, et la description (du menu). Cela ressemblerait alors \u00e0 ceci :   <\/p>\n
    \/\/ Add these lines in order to fetch the additional information you wish to display\n\n\/\/ We need the target page id in order to fetch the page image\n$page = get_page_by_path(basename($item->url));\n$page_id = $page->ID;\n\/\/ We should check if there is an image set or not, but we are lazy for this example\n$image_url = get_the_post_thumbnail( $page_id, 'custom-image-preview' );\n\/\/ Same thing for the description\n$description = esc_attr( $item->description );\n\n\/\/ Remove the li\n\/\/ Instead of $item_output = $args->before . \"\" . $args->link_before . $title . \"<\/a> \" . $args->link_after. $args->after;\n$output .= \"\";\n\n\/\/ Change the output like you need it\n$item_output = $args->before . \"
    \" . $args->link_before . $title . \"<\/a>
    \" . $image_url . \"<\/div>
    \" . $description . \"<\/div><\/div> \" . $args->link_after. $args->after;<\/code><\/pre>\n
    Pour que cela s’affiche, l’appel de wp_nav_menu doit \u00eatre modifi\u00e9. Par exemple, comme ceci : <\/p>\n
    wp_nav_menu( array( 'theme_location' => 'my-custom-navigation', \n    'menu' => '', \n    'container' => 'nav', \/\/ Auto wrap navigation in <nav> area\n    'container_class' => FALSE, \n    'container_id' => FALSE, \n    'menu_class' => FALSE, \n    'menu_id' => FALSE, \n    'echo' => true, \n    'fallback_cb' => 'wp_page_menu', \n    'before' => '', \n    'after' => '', \n    'link_before' => '', \n    'link_after' => '', \n    'items_wrap' => '%3$s', \/\/ Remove the ul container\n    'depth' => 0, \n    'walker' => new Custom_Walker ) );<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Il arrive fr\u00e9quemment qu’une navigation de site web ne doive pas seulement afficher le nom de la page, mais aussi des informations y aff\u00e9rentes, comme la description ou l’image de la page, ou n’importe quoi d’autre… Pour en avoir le contr\u00f4le, il faut la classe Walker_Nav_Menu. Proc\u00e9dure Dans le fichier functions.php, ins\u00e9rez le code suivant \u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[812,924,816],"tags":[1164,901],"class_list":["post-11718","post","type-post","status-publish","format-standard","hentry","category-infos-saas-web","category-programmation","category-tutoriel","tag-walker_menu_de_navigation","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts\/11718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/comments?post=11718"}],"version-history":[{"count":0,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts\/11718\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/media?parent=11718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/categories?post=11718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/tags?post=11718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}