Un menu top classe avec JM DS

Par Julien Maury 10 février 2014


Il y a peu de temps, j’ai sorti un plugin vous permettant d’utiliser la magnifique font Dashicons sur votre site en front-end donc et non plus seulement en admin. Aujourd’hui on va voir comment créer un choli menu comme le mien avec le plugin.

Pour commencer, téléchargez le plugin sur WordPress.org et activez-le.

Comment fonctionne le plugin?

Le plugin rajoute un shortcode à WordPress qui permet de paramétrer les icônes et de les utiliser dans les posts, les widgets et les menus.

Pour voir l’explication en détails c’est ici.

Comment paramétrer le menu?

Il suffit de rajouter le shortcode avant les noms des items de menu directement dans les box dédiées.

 

Le nom des classes à mettre dans le paramètre name est dispo via le bouton aide (le helper de WP en haut à droite) dans les listes que j’ai documentées que ce soit dans les admin de post ou des menus.

Vous pouvez régler la taille (en em) par défaut elle vaut 2em. Pour la couleur c’est pareil vous pouvez la customizer. Le reste se fera via CSS grâce au paramètre class.

Attention dans votre CSS, il est important d’attribuer une width et une height au conteneur de l’icône, donc ici à la classe que vous avez choisie pour le paramètre class. Je vous conseille les tailles carrées plutôt et ne mettez pas une taille inférieure à celle choisie pour la font avec le paramètre size. Donc la même valeur pour la width et la height. Vous pouvez jouer avec les margin pour le centrage ou pas.

À ajuster avec firebug.

Franchement c’est easy hun, et je trouve que le rendu sur les mobiles est pas trop mal.

Compatibilité

La font Dashicons n’est compatible que jusqu’à IE9 malheureusement. Je vous conseille donc d’opérer un display none sur IE8 pour éviter d’afficher des carrés vides…

Voici comment vous pouvez procéder :

add_action( 'wp_head', 'load_ie_styles' );
function load_ie_styles() {
  global $wp_styles;
  wp_register_style( 'ie-seulement', '/css/style-ie.css' );
  $wp_styles->add_data( 'ie-seulement', 'conditional', 'lte IE 8' );
  wp_enqueue_style( 'ie-seulement' );
}

Source

Et dans le fichier CSS mettre :
[css].dashicons:before { content:  » !important; }[/css]
C’est sympa et simple non?


5 commentaire(s)

  1. Cynthia dit :

    Complètement fan de ton menu !!! Et de la version mobile aussi ;-) !!!

  2. Julien Maury dit :

    Salut Cyn, bienvenue sur le blog. #tapisrouge :D. Ouais sympa le rendu je trouve aussi :D

  3. Cynthia dit :

    Tapis rouge carrément :-D ?! Merci Ju ! #honorée
    Je repasserai plus souvent chez toi ! (Enfin pas trop non plus parce que déjà que tu m'as influencée sur le changement de favicon, je vais me retrouver à changer mon thème bientôt ;-) !)

  4. Vorbis82 dit :

    Bonjour Julien,

    Je viens de découvrir ton blog suite à l'article publié chez Sylvain sur Tranches de Marketing. Un peu comme lui, la thématique ne fait pas partie de mes domaines de prédilection mais c'est bien écrit et je trouverais bien de temps en temps des sources d'inspiration.

    À bientôt donc,

  5. Julien Maury dit :

    Salut Vorbis, merci à toi, ce genre de commentaire fait bien plaisir. J'apprécie. Bienvenue sur le blog où j'espère tu trouveras l'information qui t'intéresse.