Come aggiungere un commutatore di lingua WordPress al vostro sito

State pensando di aggiungere un cambio di lingua di WordPress al vostro sito web? Se sì, continuate a leggere!

Tradurre i vostri contenuti in modo che i visitatori possano leggerli nella loro lingua offre enormi vantaggi alla vostra azienda. Ad esempio, può aiutarvi a raggiungere nuovi mercati, offrire maggiori opportunità di ottimizzazione per i motori di ricerca (SEO) e di visibilità online e aiutarvi a stabilire un rapporto di fiducia con un nuovo pubblico.

A fronte di un investimento minimo di tempo e denaro, anche il ritorno sull'investimento (ROI) di un sito web multilingue WordPress è interessante. Secondo l'Industry Specification Group for Localization (ISG), per ogni 1 dollaro speso per la localizzazione, un'azienda avrà un ritorno di 25 dollari. Si tratta di un ritorno del 2.500%! Si tratta quindi di un'iniziativa da prendere in considerazione se si vuole posizionare al meglio la propria azienda per il successo nei mercati esteri.

Per sfruttare al massimo i vantaggi, compreso l'elevato ROI, è fondamentale rendere semplice per i visitatori cambiare la lingua sul vostro sito con un commutatore di lingua WordPress facile da trovare, ben progettato e intuitivo da usare.

In questa guida troverete tutto quello che c'è da sapere quando si tratta di aggiungere un cambio di lingua di WordPress al vostro sito. Vi mostreremo molti esempi reali, alcuni suggerimenti sulle migliori pratiche e come creare e personalizzare un cambio di lingua utilizzando Weglot.

Che cos'è il Language Switcher di WordPress?

In parole povere, un language switcher di WordPress è un pulsante su una pagina che i visitatori possono cliccare per cambiare la lingua corrente del contenuto.

Tuttavia, i commutatori di lingua non sono sempre pulsanti: possono essere testi, codici di lingua, menu a tendina o bandiere. È possibile posizionarli in qualsiasi punto della pagina.

Spesso si trova un selettore di lingua di WordPress nell'intestazione, nel piè di pagina, nella barra laterale o nella navigazione.

Commutatore di lingua Weglot
Commutatore di lingua Weglot

Sul sito web di Weglot, il selettore di lingua di WordPress si trova accanto al logo in alto a sinistra della pagina. È caratterizzato da un design a tendina che consente ai visitatori di scegliere tra inglese, francese, spagnolo, giapponese e tedesco. In questo modo gli utenti hanno un modo chiaro per accedere alla propria lingua e iniziare a navigare nel vostro sito.

3 esempi di cambi di lingua di successo

Durante la navigazione in rete si vedono spesso dei commutatori di lingua. Tuttavia, se non si parla un'altra lingua (o non si cerca un'opzione), si potrebbe non essere consapevoli di quanto possano essere diversi in termini di design e posizione sulla pagina.

Nelle prossime sezioni vedremo alcuni esempi di commutatori di lingua.

1. Traduttore Microsoft

Il sito di Microsoft Translator consente ai visitatori di scegliere tra quasi 40 lingue grazie a un menu a tendina (o, in questo caso, a "tendina") situato vicino al piè di pagina. Si è inoltre scelto di visualizzare il nome di ogni lingua per intero, utilizzando la lingua madre. In questo modo i visitatori possono riconoscere la propria lingua a colpo d'occhio e le opzioni di cambio lingua sono chiare.

Commutatore di lingua di Microsoft Translate
Commutatore di lingua di Microsoft Translate

Ci piace che si possa scegliere di visitare anche una versione regionale del sito, come opzione separata. Troppo spesso i grandi marchi rendono difficile la scelta della lingua, costringendo invece gli utenti a cambiare regione.

2. Etsy

Essendo un mercato internazionale in cui gli artigiani possono vendere i loro prodotti fatti a mano, non sorprende che Etsy offra un selettore di lingua ben progettato. Si trova nel piè di pagina di ogni pagina del sito.

Commutatore di lingua Etsy
Commutatore di lingua Etsy

È possibile scegliere una regione, una lingua e una valuta. Facendo clic su di essa, si apre una casella modale in cui è possibile modificare ciascuna di queste opzioni. Si tratta di un design elegante, intuitivo e che consente all'utente di scegliere la propria lingua senza dover essere reindirizzato a una versione regionale del sito.

3. Evernote

La popolare app per prendere appunti Evernote mantiene semplice il suo selettore linguistico, utilizzando un menu a discesa nel piè di pagina per cambiare lingua.

Commutatore di lingua di Evernote
Commutatore di lingua di Evernote

È facile da trovare e offre un'etichettatura chiara: "Scegli una lingua". In questo modo, se si fa clic su di essa, si sa cosa si sta per vedere.

A volte non è necessario ricorrere a complicati commutatori di lingua, se non è necessario. Dopotutto, se ostacolate il visitatore, potreste allontanarlo dal vostro sito.

4 buone pratiche per la visualizzazione dei commutatori di lingua di WordPress

Per gran parte del mondo, leggere in una lingua madre è un lusso. Secondo Ethnologue, l'inglese è la prima lingua parlata al mondo, con oltre 1,3 miliardi di parlanti. È anche al primo posto tra le lingue più usate online, con quasi il 62% dei siti che lo utilizzano.

Se non parlate lo spagnolo, il cinese o qualsiasi altra lingua che non riuscite a capire, probabilmente cercherete innanzitutto un commutatore di lingua. Tuttavia, i commutatori di lingua si dividono spesso in due campi, con le relative caratteristiche:

  • inesistente. In altre parole, non offre alcuna traduzione.
  • Difficile da trovare. Il selettore di lingua potrebbe essere nascosto nella navigazione o in un'altra posizione, costringendo l'utente a giocare a nascondino.
  • Facile da trovare. Al contrario, potreste trovare il selettore di lingua di WordPress in un punto ben visibile, come l'intestazione o il piè di pagina.
  • Molto facile da trovare. Avrete una buona fortuna se il selettore di lingua di WordPress si trova in una zona ben visibile dello schermo, ad esempio nell'intestazione. In questo modo è possibile scegliere rapidamente la lingua giusta.

In breve, se qualcuno non riesce a leggere il vostro sito, chiuderà la scheda del browser. Anche se potrebbero provare a usare Google Translate, i risultati non saranno all'altezza di quelli ottenuti con il cambio di lingua. Se è difficile trovare il cambio di lingua, gli utenti potrebbero mettere in dubbio la qualità del vostro design e perdere la fiducia nella vostra azienda.

Per questo motivo, è fondamentale che i visitatori del sito possano scegliere facilmente la lingua preferita. In un mondo ideale, dovreste essere in grado di farlo senza bisogno di componenti aggiuntivi.

Diamo quindi un'occhiata ad alcune best practice per la visualizzazione di un commutatore di lingua.

1. Scegliere con cura le lingue

I plugin multilingua per WordPress come WPML e Polylang spesso forniscono traduzioni automatiche (o traduzioni automatiche) in decine di lingue diverse. A differenza di WPML e Polylang, Weglot offre oltre 100 lingue. Tuttavia, il fatto che si possa abilitare ogni lingua non significa che si debba farlo.

Cercate invece di attivare solo le lingue di cui avete bisogno. Ciò significa prendere in considerazione il vostro pubblico di riferimento e le lingue che parla. Considerate anche eventuali nuovi mercati esteri in cui vorreste espandere la vostra azienda in futuro.

Le aziende più piccole spesso forniscono una manciata di lingue, mentre i grandi marchi e le multinazionali come Apple e Microsoft offrono una miriade di lingue e persino siti web regionali. Pertanto, se gestite un negozio WooCommerce , pensate ai territori in cui vendete.

La scelta selettiva delle lingue da offrire sul vostro sito vi consentirà anche di non creare ulteriore lavoro per voi e per il vostro team. In altre parole, maggiore è il numero di lingue offerte, maggiore sarà il numero di contenuti che dovrete revisionare per individuare eventuali errori di traduzione e sfumature culturali. Meno sono e più sono mirate le lingue, meglio è.

2. Assicurarsi che il commutatore di lingua sia facile da trovare

I visitatori non dovrebbero impiegare più di un paio di secondi per trovare il cambio di lingua. È una buona idea posizionare il commutatore di lingua nell'intestazione o nel piè di pagina della pagina: entrambe sono ottime posizioni. Per i dispositivi mobili, i commutatori di lingua si trovano spesso nella navigazione principale come voce di menu.

Il design del vostro sito web dovrebbe evitare di allontanarsi troppo da queste norme consolidate. Gli utenti che non sono madrelingua della lingua predefinita del sito possono avere difficoltà a trovare il selettore di lingua se è difficile da trovare o si trova in una posizione insolita. Anche in questo caso, gli utenti che abbandonano il sito per frustrazione influiscono sul vostro SEO complessivo.

In generale, volete che i visitatori bilingue e multilingue del vostro sito si sentano benvenuti e a proprio agio nella navigazione e nell'accesso ai vostri contenuti, indipendentemente dalla loro lingua madre. Per esempio, date un'occhiata a quanto è evidente il commutatore linguistico dell'agenzia di sviluppo WordPress Human Made, con una sola lingua:

Sito web creato dall'uomo
Sito web creato dall'uomo

Spesso, alcuni siti impostano la lingua in base al browser web dell'utente. Se da un lato questo aiuta l'utente eliminando il lavoro necessario, dall'altro alcuni utenti potrebbero finire sulla versione sbagliata del vostro sito.

Ad esempio, un visitatore potrebbe trovarsi fisicamente in Germania e il vostro sito WordPress multilingue potrebbe rilevarlo automaticamente e visualizzare il tedesco. Tuttavia, se si tratta di un viaggiatore non madrelingua senza la capacità di parlare tedesco, non avrà una grande esperienza con voi. 

In breve, un modo per rilevare automaticamente la posizione geografica è una caratteristica solida, ma dovreste anche fornire un commutatore di lingua in modo che i visitatori possano scegliere la loro lingua preferita, se necessario.

3. Adattare il commutatore di lingua di WordPress al vostro design

La maggior parte dei plugin di traduzione fornisce un pulsante predefinito per il cambio di lingua, anche se alcuni non lo fanno e bisogna crearne uno proprio. Sebbene si possa essere tentati di utilizzare il pulsante generico per il cambio di lingua, personalizzarlo per adattarlo all'aspetto del sito è un'ottima idea.

Ad esempio, si potrebbe configurare le impostazioni del plugin in modo da visualizzare il testo al posto dei pulsanti o i codici della lingua al posto delle bandiere della lingua. Weglot consente di personalizzare il CSS del commutatore di lingue di WordPress. Ciò consente di apportare modifiche stilistiche più avanzate al commutatore di lingue.

Ad esempio, Weglot offre una serie di opzioni semplici e più complesse per personalizzare il design del sito. Le esploreremo in modo più approfondito più avanti. Tuttavia, per mostrarvi un esempio di come la personalizzazione del commutatore di lingua possa fare la differenza, ecco un'occhiata al commutatore di lingua predefinito fornito con Weglot:

Commutatore di lingua predefinito di Weglot
Commutatore di lingua predefinito di Weglot

Weglot posizionerà il selettore di lingua nell'angolo in basso a destra. Questo va bene, ma non è l'ideale per il sito in questione. In questo caso, il cambio di lingua risalta sia per il suo posizionamento sia perché non si adatta al design generale del sito.

Diamo poi un'occhiata alle Olimpiadi Internazionali della Chimica (IChO) IChO Francia. Per questo design audace, il cambio di lingua di WordPress è raggruppato con le icone dei social media lontano dalla navigazione principale:

Olimpiadi Internazionali della Chimica (IChO) IChO France Language Switcher
Olimpiadi Internazionali della Chimica (IChO) IChO France Language Switcher

Il designer ha utilizzato un selettore CSS dedicato per creare forme intorno ai codici delle lingue e, eventualmente, un codice HTML o uno shortcode. In questo modo, l'occhio del visitatore viene indirizzato verso la parte superiore destra della pagina, dove si trova il selettore di lingua di WordPress. In questo modo i visitatori, soprattutto quelli che partecipano, sapranno subito come selezionare la loro lingua preferita.

4. Selezionare le bandiere o i nomi per le lingue scelte.

Le bandiere dei Paesi sono spesso utilizzate per rappresentare le diverse lingue per i passanti linguistici. Sebbene l'uso delle bandiere sia allettante per i designer per molte ragioni (sono colorate, iconiche e poco ingombranti), le bandiere non sono state progettate per rappresentare le lingue. Questo comporta diversi problemi.

Per esempio, consideriamo il portoghese. È la lingua ufficiale in Portogallo, Brasile, Capo Verde, Guinea-Bissau, Mozambico, Angola, São Tomé e Principe, Timor Est, Guinea Equatoriale e Macao. È inoltre presente culturalmente (nelle varianti tradizionali e creole) in India, Sri Lanka, Malesia, nelle isole ABC dei Caraibi e nell'isola indonesiana di Flores. In questo caso, la scelta della bandiera è una decisione difficile, che potrebbe allontanare o confondere quasi tutti coloro che parlano la lingua in questione.

C'è anche il problema che i visitatori potrebbero non riconoscere una bandiera a causa delle dimensioni dell'icona, oppure potrebbero essere confusi da bandiere dall'aspetto simile.

Il blog Flags are not languages, dedicato alla progettazione di esperienze utente globali, raccomanda di utilizzare sempre il nome di una lingua nel suo formato locale. Ad esempio, invece di usare le forme inglesi di "tedesco" e "cinese", etichettatele come "Deutsch" e "中文".

Come creare un selettore di lingua per WordPress con Weglot

Vi mostriamo come configurare un semplice selettore di lingua di WordPress con Weglot. Successivamente, vedremo come creare uno stile utilizzando i CSS per le personalizzazioni avanzate.

Weglot è uno dei plugin per il cambio di lingua di WordPress più popolari e facili da usare. Con Weglot, potete aggiungere un'altra lingua al vostro sito in meno di cinque minuti e iniziare ad adattarla al design del vostro sito.

Potete aggiungere un cambio di lingua di WordPress al vostro sito in diversi modi: nella navigazione, con un widget, con uno shortcode o con un codice HTML. In questo caso, aggiungeremo un cambio di lingua al piè di pagina del vostro sito utilizzando i codici di lingua anziché le bandiere.

Per prima cosa, però, è necessario impostare il plugin Weglot sul proprio sito WordPress. Nel nostro Centro risorse abbiamo un tutorial completo su come installare e attivare il plugin Weglot.

A un certo punto, dovrete inserire la vostra chiave API, la lingua originale e la lingua in cui desiderate tradurre i vostri contenuti. Se non si dispone già di un account Weglot, è necessario crearne uno per ottenere la chiave API. Quindi aggiungere la lingua originale del sito e le lingue che si desidera aggiungere (lingue di destinazione). 

Configurazione di Weglot WordPress
Configurazione di Weglot WordPress

Una volta salvate le modifiche, date un'occhiata al front-end del vostro sito. Vedrete un nuovo selettore di lingua di WordPress nell'angolo in basso a destra. Facendo clic su di esso, si espanderà per visualizzare le lingue disponibili e consentirà di scegliere e visualizzare la traduzione preferita.

Commutatore di lingua predefinito di Weglot
Commutatore di lingua predefinito di Weglot

Questo è il design predefinito fornito da Weglot, ma è possibile personalizzare l'aspetto e la posizione del commutatore di lingua di WordPress in diversi modi.

Per iniziare a effettuare le personalizzazioni di base, andate su Weglot > Progettazione del pulsante della lingua (opzionale) nel back end di WordPress. In questa schermata è possibile scegliere:

Weglot WordPress Lingua Design
Weglot WordPress Lingua Design Personalizzazione
  • Se utilizzare un menu a discesa
  • Se si intende utilizzare le bandiere all'interno dello switcher e il tipo di
  • Se si visualizzano i nomi delle lingue
  • Per visualizzare solo il codice della lingua

C'è anche una sezione per sovrascrivere i CSS e sostituirli con selettori personalizzati, di cui parleremo tra poco. Per ora, personalizziamo il selettore di lingua in modo da visualizzare i nomi delle lingue senza bandiere, ma mantenendo il menu a tendina.

Per farlo, deselezionate "Con bandiere" e selezionate "È nome completo", quindi date un'occhiata al vostro sito:

Si possono anche effettuare alcune personalizzazioni avanzate. Ad esempio, si può scegliere di visualizzare il selettore di lingua nell'intestazione.

Ci sono alcuni modi per farlo: in un menu, come widget, usando uno shortcode o con l'HTML. Si noti che non è necessario conoscere il PHP o accedere ai template principali. In questo modo si ottiene un potere a livello di sviluppatore, senza la necessità di avere un'esperienza da esperto.

Tornate alla schermata Weglot nella dashboard di WordPress e scorrete la pagina fino a visualizzare le opzioni per il cambio di lingua:

Weglot WordPress Posizione linguistica
Weglot WordPress Posizione linguistica

Si noti che alcuni posizionamenti possono essere adatti a diversi approcci. Ad esempio, si vorrà utilizzare l'opzione [weglot_switcher] per gli elementi della pagina in linea, utilizzando la funzionalità del vostro costruttore di pagine preferito (l'Editor di blocchi utilizza il codice Blocco di codici brevi). Naturalmente, per un commutatore di intestazione o piè di pagina, un widget o un menu potrebbero funzionare meglio.

Quando si è pronti e si sono salvate le modifiche, si può dare di nuovo un'occhiata al front-end:

Bloom Designs Commutatore di lingua predefinito
Bloom Designs Commutatore di lingua predefinito

Sebbene il selettore di lingua sia all'interno dell'intestazione, non viene visualizzato nel modo giusto. Inoltre, si potrebbero utilizzare codici di lingua in linea, anziché un menu a discesa.

È qui che si utilizzano i CSS. Innanzitutto, disattivate l'impostazione a discesa nel menu Weglot di WordPress. Quindi, selezionare la casella per visualizzare i codici delle lingue.

Da qui, è possibile utilizzare la casella di testo Sovrascrivi CSS per impostare i selettori per i caratteri, i colori e il peso del testo in modo che si adatti al design del sito:

Weglot WP Commutatore di lingua personalizzato Sovrascrittura CSS
Weglot WP Commutatore di lingua personalizzato Sovrascrittura CSS

Infine, date un'occhiata al vostro progetto sul lato anteriore:

Bloom Designs Commutatore di lingua personalizzato
Bloom Designs Commutatore di lingua personalizzato

Con il giusto posizionamento e poche righe di CSS, è possibile adattare rapidamente e facilmente il cambio di lingua di Weglot al proprio sito, senza dover ricorrere a complesse operazioni di modifica dei modelli, HTML o PHP.

Caso di studio: Come Baltazare utilizza Weglot

Studio di caso sulla traduzione del sito web di Baltazar Weglot
Studio di caso sulla traduzione del sito web di Baltazar Weglot

Fondata nel 2014, la web agency Baltazare progetta e sviluppa siti web per grandi marchi come Candia, Royal Monceau e AXA. Utilizzando WordPress, l'agenzia sviluppa più di 40 progetti di siti web ogni anno.

Prima di scoprire Weglot, i progetti multilingue sono sempre stati un problema per Baltazare. Il team faticava a trovare una buona soluzione di traduzione che rispondesse alle esigenze dei clienti. Per un po', sembrava che WPML, un altro popolare plugin di traduzione per WordPress, fosse una buona soluzione. Tuttavia, il team voleva qualcosa di meno complesso e più efficiente.

Dopo aver testato l'approccio WordPress Multisite con un sito per lingua e aver constatato che la manutenzione era troppo complicata, il team ha scoperto Weglot. Il fondatore di Baltazare, Guillaume Vergano, si è detto entusiasta di scoprire che Weglot si integra perfettamente con qualsiasi sito WordPress, compresi temi e plugin, e traduce tutti i contenuti, compresi i tipi di post e le tassonomie personalizzate.

"Imparare a usare Weglot è molto semplice sia per noi che per i nostri clienti. Creiamo sempre un breve video tutorial che spiega in pochi minuti come usare Weglot a ciascuno di loro e il gioco è fatto", ha detto Guillaume.

Baltazare utilizza ora Weglot per una serie di siti live, tra cui il sito IChO France 2019, e il team raccomanda sempre Weglot ai clienti come soluzione affidabile per i siti multilingue. È un'alternativa semplice e flessibile a WPML o Multisite.

Ottimizzazione culturale completa grazie a un commutatore di lingua WordPress ben progettato

In generale, il compito di un designer è quello di creare progetti significativi che soddisfino gli utenti. Quando si tratta di siti web multilingue, il lavoro del designer è ancora più importante: le traduzioni sono utili solo se i commutatori di lingua sono facili da trovare e intuitivi.

Un commutatore linguistico ben progettato è un bonus, ma anche un obiettivo da perseguire. Se il vostro nuovo cambia-lingua ha l'aspetto e la sensazione di essere parte integrante dell'esperienza del vostro sito web, i visitatori e i clienti si sentiranno più a loro agio navigando tra i vostri contenuti tradotti. Questo aiuta a stabilire (e ad aumentare) la fiducia e contribuisce a creare un forte legame con il vostro marchio.

Un commutatore linguistico progettato con cura è un componente fondamentale di qualsiasi sito web internazionale. Armati di queste conoscenze, i progettisti possono creare esperienze di traduzione che favoriscono gli utenti anziché ostacolarli.

Sei interessato a provare Weglot gratuitamente?
Con la nostra prova gratuita di 10 giorni puoi tradurre velocemente un sito web attivo e funzionante!
forma sfondo
forma sfondo