WordPress : Créer une navigation véritablement personnalisée et la classe Walker_Nav_Menu

Il arrive fréquemment qu’une navigation de site web ne doive pas seulement afficher le nom de la page, mais aussi des informations y afférentes, comme la description ou l’image de la page, ou n’importe quoi d’autre… Pour en avoir le contrôle, il faut la classe Walker_Nav_Menu.

Procédure
Dans le fichier functions.php, insérez le code suivant ; il correspond au code propre à WP. Les modifications souhaitées y seront ensuite effectuées.

class Custom_Walker extends Walker_Nav_Menu{

  function start_el(&$output, $item, $depth, $args){
    
    $classes = empty ( $item->classes ) ? array () : (array) $item->classes;
    $class_names = join(" ", apply_filters("nav_menu_css_class", array_filter($classes), $item));

    ! empty ($class_names) and $class_names = " class='" . esc_attr($class_names) . "'";

    $output .= $indent . "
";

    $attributes = "";

    ! empty($item->attr_title) and $attributes .= " title='" . esc_attr($item->attr_title) . "'";
    ! empty($item->target) and $attributes .= " target='" . esc_attr($item->target) . "'";
    ! empty($item->xfn) and $attributes .= " rel='" . esc_attr($item->xfn) . "'";
    ! empty($item->url) and $attributes .= " href='" . esc_attr($item->url) . "'";

    $title = apply_filters("the_title", $item->title, $item->ID);

    $item_output = $args->before . "" . $args->link_before . $title . " " . $args->link_after. $args->after;

    // Since $output is called by reference we don't need to return anything.
    $output .= apply_filters("walker_nav_menu_start_el", $item_output, $item, $depth, $args);
  }
}

Que voulons-nous modifier maintenant ? Par exemple, ne pas avoir une navigation <ul><li> mais simplement des <div> pour les éléments de navigation individuels. De plus, l’image de l’article en dessous, et la description (du menu). Cela ressemblerait alors à ceci :

// Add these lines in order to fetch the additional information you wish to display

// We need the target page id in order to fetch the page image
$page = get_page_by_path(basename($item->url));
$page_id = $page->ID;
// We should check if there is an image set or not, but we are lazy for this example
$image_url = get_the_post_thumbnail( $page_id, 'custom-image-preview' );
// Same thing for the description
$description = esc_attr( $item->description );

// Remove the li
// Instead of $item_output = $args->before . "" . $args->link_before . $title . " " . $args->link_after. $args->after;
$output .= "";

// Change the output like you need it
$item_output = $args->before . "
" . $args->link_before . $title . "
" . $image_url . "
" . $description . "
 " . $args->link_after. $args->after;

Pour que cela s’affiche, l’appel de wp_nav_menu doit être modifié. Par exemple, comme ceci :

wp_nav_menu( array( 'theme_location' => 'my-custom-navigation', 
    'menu' => '', 
    'container' => 'nav', // Auto wrap navigation in <nav> area
    'container_class' => FALSE, 
    'container_id' => FALSE, 
    'menu_class' => FALSE, 
    'menu_id' => FALSE, 
    'echo' => true, 
    'fallback_cb' => 'wp_page_menu', 
    'before' => '', 
    'after' => '', 
    'link_before' => '', 
    'link_after' => '', 
    'items_wrap' => '%3$s', // Remove the ul container
    'depth' => 0, 
    'walker' => new Custom_Walker ) );