Philippe DONNART SEOnaute

Accueil > Wordpress > Créer un menu pour Wordpress

Créer un menu pour Wordpress

mardi 13 décembre 2011, par Philippe Donnart

Comment créer rapidement un menu sous Wordpress ?

Le plus simple est d’utiliser le thème par défaut proposé par Wordpress, et de ne garder que le minimum des informations.
Ce qui nous donne 3 fichiers à modifier (pour la version 3.2.1 utilisée lors de la rédaction de cet article)

Dans functions.php (remplacer nom_du_theme par le nom de votre thème.)

// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'nom_du_theme' ) );
add_theme_support( 'menus' );       

A l’endroit où l’on place le menu, dans le header par exemple.

<div id="access" role="navigation">
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->

La feuille de style. A modifier pour les couleurs bien évidemment.

/* =Menu
-------------------------------------------------------------- */

#access {
        background: #222; /* Show a solid color for older browsers */
        background: -moz-linear-gradient(#252525, #0a0a0a);
        background: -o-linear-gradient(#252525, #0a0a0a);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
        background: -webkit-linear-gradient(#252525, #0a0a0a);
        -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
        -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
        clear: both;
        display: block;
        float: left;
        margin: 0 auto 6px;
        width: 100%;
}
#access ul {
        font-size: 13px;
        list-style: none;
        margin: 0 0 0 -0.8125em;
        padding-left: 0;
}
#access li {
        float: left;
        position: relative;
}
#access a {
        color: #eee;
        display: block;
        line-height: 3.333em;
        padding: 0 1.2125em;
        text-decoration: none;
}
#access ul ul {
        -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
        box-shadow: 0 3px 3px rgba(0,0,0,0.2);
        display: none;
        float: left;
        margin: 0;
        position: absolute;
        top: 3.333em;
        left: 0;
        width: 188px;
        z-index: 99999;
}
#access ul ul ul {
        left: 100%;
        top: 0;
}
#access ul ul a {
        background: #f9f9f9;
        border-bottom: 1px dotted #ddd;
        color: #444;
        font-size: 13px;
        font-weight: normal;
        height: auto;
        line-height: 1.4em;
        padding: 10px 10px;
        width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
        background: #efefef;
}
#access li:hover > a,
#access a:focus {
        background: #f9f9f9; /* Show a solid color for older browsers */
        background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
        background: -o-linear-gradient(#f9f9f9, #e5e5e5);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
        background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
        color: #373737;
}
#access ul li:hover > ul {
        display: block;
}
#access .current_page_item > a,
#access .current_page_ancestor > a {
        font-weight: bold;
}