Images à la une dans un menu WordPress

0 Flares 0 Flares ×

WordPress possède une fonctionnalité pour créer un menu de navigation paramétrable
reprenant les pages de votre site, catégories, …

Ce menu peut-être paramétré assez facilement pour, par exemple, ignorer certains éléments du menu, ajouter une image de fond, ajouter des classes supplémentaires, ….

Nous allons ici ajouter l’image à la une (Post Thumbnail) de nos pages à l’intérieur de notre menu. C’est un exemple simple, mais il donne le principe de base pour paramétrer un menu comme bon vous semble.

Ajouter un format de vignette

Dans le fichier function.php de votre thème (ou où vous voulez), nous allons ajouter le support des images à la une et un nouveau type de vignette, celui utilisé dans notre menu.

function mytheme_thumbnail_support(){
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'thumbnail-menu', 50, 50, false);
}
add_action( 'after_setup_theme', 'mytheme_thumbnail_support' );

Personnaliser la fonction walker

Cette fonction permet de paramétrer plus finement votre menu et de faire un peu ce que vous voulez.
Le plus simple est de créer une classe qui surcharge la classe de base Walker_Nav_Menu (wp-includes/nav-menu-template.php) :

class MyTheme_Walker_Nav_Menu extends Walker_Nav_Menu {

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';

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

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';

        // post thumbnail support
        if ( has_post_thumbnail( $item->object_id) ) {
            $img = get_the_post_thumbnail($item->object_id, 'thumbnail-menu');
            $item_output .= $img;
        }

        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Le code ajouté :

        // post thumbnail support
        if ( has_post_thumbnail( $item->object_id) ) {
            $img = get_the_post_thumbnail($item->object_id, 'thumbnail-menu');
            $item_output .= $img;
        }

On vérifie si il y a une image pour l’élément en cours et on l’ajoute à notre menu. Pour plus d’infos sur les différents champs de $item, allez jeter un oeil ici : http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items#Return_Values

Utiliser ce walker dans notre menu

Nous devons simplement passer notre walker à la fonction wp_nav_menu.

<nav id="primary-nav">
    <?php wp_nav_menu(array("walker" => new MyTheme_Walker_Nav_Menu)); ?>
</nav>

Et voila, il reste ensuite à appliquer un style adapté au menu.

0 Flares Twitter 0 Facebook 0 Google+ 0 Buffer 0 0 Flares ×

« »