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.
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,
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
Creare un sito con Wordpress 
33 risposte su “Aggiungere un’immagine alla barra del menu di WordPress”
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
Ciao e benvenuto, forse nel frattempo hai modificato il file, ma se io provo a salvare l’immagine, dove presumo tu abbia posizionato la bandierina, mi esce la scritta Impossibile trovare il file sul server. Presumo, ma non ne sono sicuro, che il percorso url sia sbagliato. prova a controllare. Questo è l’url che io vedo:
http://www.modiv.it/test_2/%E2%80%9Dhttp://www.modiv.it/test_2/wp-content/uploads/2013/07/en.gif%E2%80%9D
e sicuramente è sbagliato, prova a modificalo in:
http://www.modiv.it/test_2/wp-content/uploads/2013/07/en.gif%E2%80%9D
Aspetto tue notizie
Hai ragione: non so come mai mi si duplicava la stringa: ora ho messo l’indirizzo giusto e funziona. Grazie. E se ora ti chiedessi se fosse possibile portarli allineati a destra senza aggiungere altri menu? Secondo te è possibile?
Sono contento di esserti stato utile! Per quanto riguarda il posizionamento delle due bandierine sulla destra credo che l’unica soluzione sia quella di mettere mano al codice. In questo caso il percorso giusto è Editor-Style css-Top Navigation e qui cominciare a modificare il codice. Mi tenti e ho anche fatto una veloce prova senza risultato, ma al momento non riesco a risolvere questo problema. Se trovi la giusta soluzione ti prego di condividerlo.
Sono sempre restio a mettere mano al codice, anche perchè non sono esperto, ma se trovo una soluzione te lo faccio sapere sicuramente 🙂
Benissimo…
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
🙂 🙂 🙂
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!
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?
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
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
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/
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?
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.
Forse sicuramente mi è sfuggito un passaggio…..in che senso manca l’url tradotto?
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…
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
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).
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?
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.
Mhhh, vediamo io ho caricato il tutto nella sezione media, dove praticamente ci sono tutte le foto video ecc per i post.
Forse le dimensioni sono troppo grandi? Che dimensioni mi consigli?
Prova con 55×20 e possibilmente gif no jpeg. Se hai altro contattami con il modulo di contatto 🙂
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
Ciao Viki, hai sbagliato l’URl!!!…prova ad inserire questo per la bandiera italiana: http://valmonth.com/wp-content/uploads/2014/11/it.gif mentre per quella inglese non posso aiutarti perchè hai inserito un link sbagliato.
Fammi sapere se funziona 😉
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* !
OOH BENE BENE 🙂 , grazie,
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
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
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
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!!!
ciao non riesco a visualizzare l’immagine della bandiera !! puoi aiutarmi grazie
Ciao, mi sa che hai rimosso tutto e quindi non posso aiutarti. Sorry!