Déc
23

Astuce pour mettre une image dans un menu WordPress

Comment faire pour remplacer le nom d’un menu WordPress par une image ? Il n’y a nulle part de champ « image » dans la configuration des menus.

La solution est en fait simplissime.

Prenons l’exemple d’une boutique. Comme toute boutique qui se respecte elle comporte un panier et pour y accéder vous avez mis une page « Panier » dans la barre de menu. Imaginons que vous vouliez remplacer cet intitulé par une icône.

Ajoutez d’abord une icône de panier ou de chariot dans votre bibliothèque par le menu Medias->Ajouter comme d’habitude.

Ensuite rendez vous dans la page de configuration des menus (Apparence->menus).

Page de modification des menus WordPress

Développpez la page Panier en cliquant sur le triangle.

Effacez Titre de la navigation et remplacez le par le code HTML qui permet d’afficher une image à savoir :

<img src="chemin-de-l-image">

Vous pouvez trouvez le chemin de votre image dans Médias->Bibliothèque puis en ouvrant votre image et en copiant le champ Adresse web du fichier.

Nom du menu remplacé par une image

Ci-dessus un exemple de la boutique Wootique que je suis en train de faire où j’ai remplacé la page Panier par une icône de sac.

Là je l’ai mise dans un sous-menu mais on peut très bien faire pareil dans la barre de menu directement.

Le [L] est juste là parce que j’ai caché la boutique le temps de la mettre en place, il n’apparaitra plus une fois que je l’aurai rendue publique.

Articles similaires :

  • Pas d'articles similaires

24 Comments to “Astuce pour mettre une image dans un menu WordPress”

  • Mathilde from Calendrier2013.net 28 décembre 2012 à 13 h 30 min

    Simple comme WordPress, ça en devient étonnant que ça marche comme ça !

  • Arnaud 28 décembre 2012 à 16 h 21 min

    Sauf qu’il faut toujours aller à la pèche aux devinettes pour le savoir :)

    Je vois que ton site est deuxième sur son mot clé. Est-ce indiscret de savoir combien tu gagnes avec ?

    J’aime le design.

  • GeekPress from tuto wordpress gratuit 29 décembre 2012 à 11 h 00 min

    Sinon, il y a le plugin Nav Menu Images qui permet de faire cela aussi avec des images provenant du gestionnaire de média !

    http://www.echodesplugins.fr/plugins/nav-menu-images/
    GeekPress@tuto wordpress gratuit Articles récents..Désactiver tous les widgets par défaut de WordPressMy Profile

  • InvestMan 9 janvier 2013 à 9 h 46 min

    Salut Arnaud, à l’époque je devais justement intégrer des images dans l’un des menus de mes sites. Au final, j’étais obligé de passer par le code et de bidouiller pour atteindre le résultat voulu. Je n’imaginais pas que l’opération que tu présentes dans ton article était réalisable !

  • Arnaud 9 janvier 2013 à 21 h 04 min

    Oui c’est curieux mais en même temps ça évite d’alourdir WordPress avec des plugins.

    Bon par contre c’est bien pour une image mais pour un menu complet c’est pas franchement adapté.

  • Stéphane de Qui Recherche 9 janvier 2013 à 22 h 35 min

    très belle astuce effectivement et pratique en plus; ca change du menu habituel
    Stéphane de Qui Recherche Articles récents..L’art délicat de savoir apprivoiser sa chanceMy Profile

  • Jo from Communiqués de presse 20 janvier 2013 à 23 h 32 min

    Super astuce qui risque bien de me servir bientôt ! merci l’ami.
    Jo@Communiqués de presse Articles récents..Choisir une cave à vin sur Quellecaveavin.comMy Profile

  • Bertrand 27 février 2013 à 16 h 03 min

    Je viens d’essayer, ça ne fonctionne pas chez moi. J’ai bien vérifié l’URL de l’image, elle est ok.
    Quand je regarde le code source, il n’y a plus de balise title pour cet élément du menu…

    Je suis sur la version 3.5.1.

    Savez-vous d’où cela peut venir?

    PS : J’avais aussi essayé avec le plugin nav-menu-images, mais ça semble incompatible avec mon thème, toute la mise en page des vignettes des articles sur le homepage était modifiée.

  • Arnaud 28 février 2013 à 7 h 10 min

    J’ai fait ça avec la version 3.4.2.
    J’ai l’impression que ça ne marche plus avec la 3.5.1.
    Cependant le code est bon, bizarre.
    Je vais regarder ça de plus près.

  • Malorie from creer boutique en ligne 14 mars 2013 à 16 h 27 min

    Bonjour,

    Ça sort en effet de ce que l’on a l’habitude de voir du fait que cela fait moins hypermarché avec le caddy. J’aime beaucoup le design et qui conviendrait parfaitement à une boutique en ligne mode ou pour des sites de petits achats d’accessoires, articles ou autres.

  • Arnaud 14 mars 2013 à 16 h 33 min

    Tu sembles faire de la boutique en ligne à la chaîne.
    Tu crées les boutiques et tu les revends ou tu les garde pour ton propre business ?

  • sandrine 16 mars 2013 à 11 h 11 min

    Bonjour,

    Je cherche à insérer les liens vers mes réseaux sociaux dans la barre topmenu de wordpress est-ce possible avec cette astuce ? si non avez une idée de la procédure à suivre. Merci par avance.
    Cordialement
    Sandrine
    sandrine Articles récents..Les Bijoux de peauMy Profile

  • Arnaud 16 mars 2013 à 17 h 43 min

    Bonjour Sandrine,

    Oui, je viens d’essayer, ça marche.

    Pour ça tu vas dans Apparence>Menus
    Dans la case Liens personnalisés tu rentres ton adresse Twitter dans Adresse web et dans Titre tu met en remplacant le nom de l’image bien sûr :)

    • sandrine 16 mars 2013 à 18 h 30 min

      Bonsoir Arnaud,

      merci pour le tuyau ça fonctionne j’ai mis le lien dans adresse web et l’image dans le titre..
      j’espère que ça n’a aucune incidence sur le bon fonctionnement du site.
      Merci encore.Super de trouver des personnes qui nous aides.

      Bonne soirée
      sandrine Articles récents..Tatouage dentaireMy Profile

  • marie 2 août 2013 à 13 h 36 min

    Parfait merci ! Je viens de mettre ça en place sur mon site ;) je cherchais une solution simple après avoir tenté de modifier le css… C’est super !

  • Arnaud 2 août 2013 à 16 h 38 min

    De rien ;)

  • sophie 27 août 2013 à 23 h 33 min

    Bonjour,

    impossible pour ma part d’insérer les logos dans le menu avec la dernière version wordpress..
    Faut il avoir acheter au préalable la version Customs?

    Merci par avance de votre réponse.
    Cdlt
    Sophie

  • agrumeprod 29 août 2013 à 7 h 16 min

    Bonjour,

    Je viens d’essayer avec WordPress 3.6 FR, ça marche toujours.
    Après ça dépend peut-être du thème.
    Essaye en remettant Twenty Eleven peut-être, juste pour voir si ça vient de là.

  • Anna from devoirat 11 septembre 2013 à 9 h 22 min

    excellente astuce ! merci du partage

  • Paul Mumu 22 janvier 2014 à 16 h 07 min

    Je n’aime vraiment pas wordpress. Toutefois il faut reconnaître qu’il est facile d’accès même pour les novices.
    Paul Mumu Articles récents..Bons plans Rakabulle : UBER, votre chauffeur privéMy Profile

  • Benjamin 7 août 2014 à 8 h 39 min

    Génial !!!

    Merci bcp !!!!!
    Benjamin Articles récents..Eye-liner liquide hypoallergénique – 5,00 €My Profile

  • inan 31 août 2014 à 4 h 52 min

    Bonjour

    je suis tombée par hasard sur ton site en cherchent cette astuce et je voulait vraiment et remercié :D

    Merci trop génial
    inan Articles récents..Battle Nations L’aventure commenceMy Profile

  • Kaes 19 septembre 2014 à 21 h 25 min

    Exactement ce que je cherchais ! Merci du tuyau ! :)
    Kaes Articles récents..15 pages 404 comme vous n’en avez jamais vuMy Profile