Menu wordpress avec drapeaux

No votes yet.
Please wait...

"info:Article obsolète car j'ai changé de thème et également de méthode de traduction du site !

Voici comment j’ai intégré les drapeaux dans le menu de WordPress 3.

Je me suis inspiré de cet article http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/.

Français-Anglais…

Effectivement, il faut inscrire les classes « francais » et « english » dans la partie création de menu comme indiquer dans l’article.

css alternatif dans le menu wordpress 3
css alternatif dans le menu wordpress 3

C’est bien dans Classes CSS (facultitaive) qu’il faut entrer la classe qui sera comprise par la page web en CSS.

L’attribut est optionnel, je l’ai mis mais j’aurai pu ne rien y mettre ….

Bien-sûr, les images ont été copiées dans le bon répertoire du thème.Ici, il s’agit de twentyten\images.

Le code

Il faut ensuite modifier le fichier style.css du thème en ajoutant :

#access li.francais a{
 background: url(images/fr_FR.png) center left no-repeat;
 padding-left: 18px;
 }
 /*background: url(images/wordpress.png) center left no-repeat;*/
 #access li.francais a:hover {
 background: url(images/fr_FR.png) center left no-repeat;
 background-color: #333;
 color: #fff;
 }
 #access li.english a {
 background: url(images/en_US.png) center left no-repeat;
 padding-left: 18px;
 }
 #access li.english a:hover {
 background: url(images/en_US.png) center left no-repeat;
 background-color: #333;
 color: #fff;
 }
style.css du thème courant de votre site

C’est ici que vous pouvez voir que je n’ai pas réellement suivi les indications de l’article précédent. L’auteur indique qu’il faut mettre « #header ul.navigation li.about » soit dans notre exemple : « #header ul.navigation li.francais » , mais ce n’est pas grave tant qu’on reste sur les bonnes indications dans style.css
Voila, j’espère que cela vous aura aidé !!

Bien à vous !

Admin

Vous pourriez aussi aimer

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Laisser ces deux champs tels quels :