Aggiungere un’immagine alla barra del menu di WordPress


Il sito web che sto costruendo richiede la presenza delle classiche bandierine delle lingue per poter passare agevolmente dall’italiano all’inglese e forse un po’ alla volta anche in altre lingue. Ho deciso di utilizzare una soluzione alternativa e di non posizionare le bandierine nella solita sidebar.

Aggiungere un'immagine alla barra del menu di WordPress

Sono andato su Aspetto e poi su Menu ma non ho trovato nessuna possibilità di aggiungere un immagine alla barra del menu. Dopo la solita nottata di ragionamento, continuato anche il giorno successivo mentre guidavo in A4 direzione Brescia, mi sono chiarito un po’ le idee e appena arrivato a casa ho agito così: Aspetto-Menu dove ho individuato Link personalizzati e alla voce URL ho aggiunto il sito che volevo linkare (quindi http://www.nomesito.it), mentre alla voce Etichetta ho aggiunto questa riga di codice:

<img src=”http://www.example.com/images/round.jpg” alt=”Category Name“/>

e ho cliccato su Aggiungi al menu. Sono andato su Media e ho caricato le immagine della bandiera italiana e di quella inglese, che aggiungo qui sotto in caso a qualcuno servissero,

it
en

poi dopo aver cliccato modifica ho selezionato URL del file che si trova in alto a dx. A questo punto sono tornato su Menu e ho modificato il codice che avevo aggiunto alla voce Etichetta di navigazione sostituendo la voce http://www.example.com/images/round.jpg con URL dell’immagine che volevo aggiungere. Per completare il tutto ho anche sostituito la voce Category Name con le lettere EN, che sta ad indicare la bandiera inglese. Fare molta attenzione a non cancellare o modificare le altre parti del codice e ricordarsi di fare Salva menu in questa maniera la vostra immagine apparirà nella barra del menu del vostro sito. Ringrazio l’admin del forum di Solostream, Alistair Barnett, per avermi indirizzato sulla giusta strada durante i miei tentativi di risolvere questo piccolo grattacapo (questo forum in lingua inglese è accessibile solo come membro dopo aver acquistato un tema WordPress da Solostream).

L’abbondanza si raggiunge mettendo in comune se non sei d’accordo: giù la testa coglione!
Militant A

Questa voce è stata pubblicata in Archivio e contrassegnata con . Contrassegna il permalink.

31 risposte a Aggiungere un’immagine alla barra del menu di WordPress

  1. divittorio ha detto:

    Ciao e complimenti per il post: cercavo anche io una soluzione alternativa per le bandierine ma non riuscivo a trovare una soluzione. Ho provato a seguire tutte le istruzioni che hai dal sul post ma non mi compaiono le bandierine ma le scritte “EN”/ e “IT”/. Dove sbaglio? Il link è http://www.modiv.it/test_2/ .
    Grazie
    Daniele

    Mi piace

  2. Dopo tanto cercare ho trovato il tuo post: grazie mille! Ho seguito passo passo quello che hai indicato e sono riuscita a inserire le bandierine proprio nel posto che volevo. Seguirò il tuo blog per vedere se inserisci altri articoli che possono essermi utili. Ciao Francesca

    Mi piace

  3. Ciao Ale, ho notato che wp mi ha aggiunto doppie virgolette al link non permettendo così la corretta visualizzazione delle bandierine. La soluzione risolvere il problema è inserire il link senza virgolette:

    Non ho idea perché wp faccia così, l’importante è aver risolto!

    Mi piace

    • alespot ha detto:

      Ciao Francesca, grazie per aver condiviso questa soluzione. Premetto che a me funziona benissimo, cmq ho provato a togliere le virgolette per vedere cosa succede: le bandierine scompaiono!!! Dipenderà dal tema? oppure dalla versione WordPress installata o non aggiornata?

      Mi piace

  4. redazione ha detto:

    ciao AleSpot e molti complimenti per il post che mi ha (quasi) risolto un problema su cui non avevo la più pallida idea…:-) e il blog

    Dico quasi perchè succede questo (specifico che uso qtranslate): nella versione italiana del menù la bandierina (inglese) mi compare perfettamente, ma anche se il link (visibile al passaggio del mouse) è corretto, curiosamente la versione http://www.miosito.com/en non mi viene visualizzata, ma vengo rediretto sulla medesima HP italiana (www.miosito.com)

    Nella versione inglese invece (www.miosito.com/en) la bandierina italiana NON compare…in compenso il link a http://www.miosito.com (versione italiana) funziona….ossia clicco in uno spazio vuoto dove non compare nè scritta nè etichetta.

    Specifico che ho seguito in parte la tua procedura, nel senso che ho uploadato direttamente le bandierine nei media, li ho linkato con il tuo codice dal menù label nei 2 differenti menù…e non ho capito esattamente il senso iniziale di caricare prima un link (”http://www.example.com/images/round.jpg”) da sostituire poi con quello esatto…

    grazie in anticipo per il tuo aiuto e complimenti ancora
    daniele

    Mi piace

    • alespot ha detto:

      Ciao redazione e grazie dei complimenti,
      Ti rispondo in maniera non completa, anzi superficiale non avendo l’url della pagina a cui stai lavorando.
      -potrei ipotizzare qualche conflitto tra qtranslate e la soluzione bandierine da me proposta (a me qtranslate non piace per 1000 buoni motivi)
      -la procedura di caricare prima il link di esempio e poi farlo sostituire con quello esatto nasce dal fatto che in passato e spesso anche ora, non capivo al volo certi tutorial, quindi nel mio blog ho deciso di semplificare il più possibile e di spiegare passo a passo la procedura per realizzare il tutorial. Poi magari, visto che giustamente me lo fai notare, creo altri dubbi😦
      Mandami l’url del tuo sito, anche in privato se vuoi inviandomi una mail dalla pagina contatti e vedo cosa posso fare.
      Ale

      Mi piace

  5. alespot ha detto:

    Visto che il post sul come aggiungere un’immagine alla barra del menu di WordPress sta riscuotendo un buon successo di visite e molte richieste di informazioni tramite mail, vi linko la home del mio sito dove potrete vedere il risultato di questo piccolo e semplice tutorial: http://www.bb-costieradeicech.com/en/

    Mi piace

  6. Ciao, ho letto la tua guida ed ho fatto filo per filo tutto quello che tu dici….però quando sono andato a caricare il sito compare la bandierina e quando ci clicco niente traduzione in inglese…..come mai?

    Mi piace

    • alespot ha detto:

      Ciao, senza un link al tuo sito dove poter controllare se hai fatto tutto correttamente è difficile dare una risposta. L’unica cosa che mi viene in mente, ed è la più elementare, è di controllare se l’url del sito tradotto è riportato correttamente. Puoi mandarmi il link del tuo sito anche in privato attraverso il modulo di contatto.

      Mi piace

  7. Forse sicuramente mi è sfuggito un passaggio…..in che senso manca l’url tradotto?

    Mi piace

    • alespot ha detto:

      Secondo me tu non hai tradotto il tuo sito in inglese…o sbaglio? Questo è un tutorial per aggiungere un immagine alla barra del menu e può essere utilizzato per aggiungere le bandierine che rimandano al sito tradotto. MA NON FA LE TRADUZIONI! Esistono dei plugin che servono a questo scopo se ti interessa. Se ho capito male ti prego di scusarmi…

      Mi piace

  8. Ecco immaginavo che avevo capito io male XD… chiedo scusa! Il fatto è che io vorrei tradurre il mio sito in varie lingue però facendolo con le bandierine sulla sidebar, che una volta clickato traducono il tutto….tipo come il sito che hai postato tu http://www.bb-costieradeicech.com/en/…saresti così gentile da darmi qualche dritta? Grazie per la risposta

    Mi piace

    • alespot ha detto:

      Ok🙂 ci siamo capiti. Nel caso da te indicato ho fatto così: ho creato un Network WordPress (//codex.wordpress.org/Create_A_Network) che mi ha permesso di creare e gestire 2 siti (nomesito.com e nomesito.com/en). Dopo aver fatto la traduzione, devi fartela non devi utilizzare Google Translate, ho linkato tra loro i due siti. Praticamente ora gestisco il sito it e quello en in modo indipendente. Esistono dei plugin che possono aiutarti in questo ma non danno la possibilità di ottimizzare i contenuti per i motori di ricerca e creano pagine duplicate che sono malviste da Google (vedi qtraslate).

      Mi piace

  9. parolevacanti ha detto:

    Ciao Alespot cercando in internet o ho trovato questa utilissima guida che fa proprio a caso mio ti spiego: vorrei inserire nel menu del mio blog delle immagini, che ho creato, che facciano da link ai vari social network. Eseguo la procedura che hai descritto ma non mi colare l’immagine, mentre il link è funzionante.

    Il link dell’immagine è http://parolevacanti.altervista.org/wp-content/uploads/2014/04/Fb.png , potresti aiutarmi a capire cos’è che non va?

    Mi piace

    • alespot ha detto:

      Ciao, provo a risponderti: anzitutto non so se con altervista questo tutorial possa funzionare e dai feedback di alcuni utenti anche su alcuni temi WP sono stati riscontrati dei problemi. Ho provato a dare un occhiata al codice del tuo blog e secondo me tu non hai caricato l’immagine da linkare. Se così fosse trova e carica un’immagine/icona di Facebook che ti piace, attento alle dimensioni, e dopo modifica la riga di codice dell’Etichetta su menù personalizzati con l’url esatto della tua immagine
      Fammi sapere altrimenti proviamo con altre soluzioni.

      Mi piace

  10. Viki Madjarova ha detto:

    ciao ho provato di tutto ma non mi riesce a inerire l’icona della bandiera IT
    http://valmonth.com/valmonth-co-home/valmoth-co-accessori-moda

    questo è il link dell’immagine :
    http://valmonth.com/?attachment_id=674
    http://valmonth.com/?attachment_id=672

    mi esce un icona blu con ? …
    potresti vedere

    Mi piace

  11. Barbara Iacoletti ha detto:

    OOH GRANDE! Sto da una settimana a cercare guide….finalmente!!! Ho dovuto togliere anche io le virgolette ma FUNZIONA! Posso elaborare il menù con più tranquillità! GRAZIE!!!! =)
    5* !

    Mi piace

  12. Rodolfo Valentini ha detto:

    Grazie per la dritta sulle immagini nel menu ma devo dissentire che si tratti di una buona idea per un sito multilingua.
    Tale problematica assolve un compito decisamente più complesso di un semplice link sull’immagine della bandierina.
    Poniamo di essere in un’ipotetica pagina “Chi siamo”, cliccando sulla bandierina inglese mi aspetto di trovarmi poi nella stessa pagina in lingua inglese (ipotetica “About”).
    La soluzione proposta invece non fa altro che portarmi sulla home page inglese costringendo l’utente a navigare fino alla pagina “About”.
    Immaginate questo in un sito con nidificazioni di pagine… il povero utente inglese diventerebbe leggermente “nervouse”🙂
    (se realizzate un sito multilingua ricordatevi di non fare questo errore!)

    In realtà, lo stesso plugin qtranslate x provvede egregiamente ad inserire le bandierine nel menu principale rispettando la navigazione dell’utente abilitando l’apposito widget nel menu.

    Credo ci sia un modo di inserire un link dinamico nelle bandierine ma questa potrebbe essere la prossima sfida per l’autore🙂

    ancora complimenti per la sperimentazione e la condivisione

    Liked by 1 persona

    • alespot ha detto:

      Ciao, grazie per il lungo ed interessante commento. Potrebbe essere interessante applicare la tua soluzione in un sito con molte pagine e credo che in molti casi potrebbe migliorare di molto l’esperienza dell’utente. Non mi ero mai posto il problema e non escludo di lavorarci prossimamente…ma non utilizzando qtranslate!
      Grazie ancora, Ale

      Mi piace

  13. lacasettadinana ha detto:

    Buongiorno,
    grazie per il post molto utile.
    Ho seguito passo passo le istruzioni e purtroppo l’icona appare bianca e con link cliccabile.
    Premetto che ho wordpress.com e tema YOKO.
    Questo è l’URL che inserisco nell’Etichetta:

    Se puoi aiutarmi te ne sarei grato,
    grazie infinite

    Mi piace

    • alespot ha detto:

      Ciao, non vedo l’URL che hai usato nell’etichetta e dal tuo sito mi sembra che tu abbia già rimosso il tutto.
      Ti confermo che non sempre funziona questa soluzione!
      Buona Pasqua!!!

      Mi piace

Lascia un commento

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...