- \n
- Bottom right<\/strong> \u2014 angolo in basso a destra, la posizione standard<\/li>\n
- Bottom left<\/strong> \u2014 angolo in basso a sinistra, utile se in basso a destra hai una chat o un pulsante WhatsApp<\/li>\n
- Top right \/ Top left<\/strong> \u2014 posizioni meno comuni, utili per layout specifici<\/li>\n<\/ul>\n
Il vantaggio principale del selettore flottante consiste nella visibilit\u00e0 costante: il visitatore lo trova immediatamente senza dover cercare nel menu o scorrere la pagina. Lo svantaggio riguarda la possibile sovrapposizione con altri elementi flottanti come chat widget, cookie banner o pulsanti di contatto rapido.<\/p>\n
![\"Impostazioni](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp-02-settings.png\")
<\/p>\nSelettore nel Menu di Navigazione (Menu Item)<\/h3>\n
Questa opzione integra il selettore di lingua direttamente nel menu principale del sito WordPress. Il risultato finale mostra le lingue disponibili come voci del menu, con bandiere e nomi delle lingue configurabili.<\/p>\n
Per aggiungere il selettore al menu:<\/p>\n
- \n
- Vai su Aspetto \u2192 Menu<\/strong> nella dashboard di WordPress<\/li>\n
- Nel pannello laterale troverai una nuova sezione chiamata Language Switcher<\/strong><\/li>\n
- Seleziona le lingue che vuoi mostrare nel menu<\/li>\n
- Clicca su Aggiungi al menu<\/strong><\/li>\n
- Posiziona le voci di lingua nella posizione desiderata (generalmente alla fine del menu)<\/li>\n
- Salva il menu<\/li>\n<\/ol>\n
Il selettore nel menu risulta la scelta migliore per siti con un design pulito dove il selettore flottante potrebbe risultare troppo invadente. Si integra perfettamente nel layout esistente e non richiede spazio aggiuntivo sullo schermo. Tuttavia, su dispositivi mobili il selettore potrebbe finire nascosto dentro il menu hamburger, rendendolo meno immediato da trovare.<\/p>\n
Selettore tramite Shortcode<\/h3>\n
Lo shortcode
[language-switcher]<\/code> offre la massima flessibilit\u00e0 di posizionamento. Puoi inserirlo in qualsiasi punto del sito: pagine, articoli, widget, header, footer o template del tema.<\/p>\nVarianti dello shortcode disponibili:<\/p>\n
- \n
[language-switcher]<\/code> \u2014 selettore standard con tutte le lingue configurate<\/li>\n[language-switcher display=\"flags\"]<\/code> \u2014 mostra solo le bandiere senza testo<\/li>\n[language-switcher display=\"names\"]<\/code> \u2014 mostra solo i nomi delle lingue senza bandiere<\/li>\n[language-switcher display=\"flags_names\"]<\/code> \u2014 mostra bandiere e nomi insieme<\/li>\n[language-switcher display=\"short_names\"]<\/code> \u2014 mostra i codici abbreviati delle lingue (IT, EN, FR)<\/li>\n<\/ul>\nLo shortcode risulta particolarmente utile quando vuoi posizionare il selettore in una zona specifica del template, come la top bar sopra il menu principale, il footer o una sidebar dedicata. Con Elementor o altri page builder, puoi inserire lo shortcode in un widget di testo e posizionarlo con precisione pixel-perfect.<\/p>\n
Selettore come Widget<\/h3>\n
TranslatePress registra automaticamente un widget WordPress che puoi aggiungere alle aree widget del tema (sidebar, footer, header widget area). Il funzionamento risulta simile allo shortcode ma con una interfaccia di configurazione visuale direttamente nel Customizer di WordPress.<\/p>\n
Personalizzazione Grafica del Selettore<\/h2>\n
Un selettore di lingua ben progettato si integra armoniosamente con il design del sito. TranslatePress offre diverse opzioni di personalizzazione visuale, e con un minimo di CSS personalizzato puoi ottenere risultati professionali.<\/p>\n
Bandiere, Nomi delle Lingue e Codici<\/h3>\n
Nelle impostazioni del selettore puoi scegliere cosa mostrare per ogni lingua:<\/p>\n
- \n
- Solo bandiere<\/strong> \u2014 compatto e universalmente riconoscibile, ma potrebbe creare confusione (la bandiera britannica rappresenta inglese o cultura britannica?)<\/li>\n
- Solo nomi delle lingue<\/strong> \u2014 chiaro e accessibile, occupa maggiore spazio orizzontale<\/li>\n
- Bandiere + nomi<\/strong> \u2014 la combinazione migliore per la comprensibilit\u00e0, richiede lo spazio maggiore<\/li>\n
- Codici abbreviati<\/strong> \u2014 IT, EN, FR, DE \u2014 compatti e professionali, adatti a siti con molte lingue<\/li>\n<\/ul>\n
Un aspetto importante riguarda la scelta tra bandiere nazionali e bandiere linguistiche<\/strong>. La lingua spagnola, ad esempio, viene parlata in decine di paesi diversi. Utilizzare la bandiera della Spagna potrebbe non rappresentare adeguatamente i visitatori ispanofoni del Sudamerica. TranslatePress permette di personalizzare la bandiera associata a ogni lingua, risolvendo questo problema.<\/p>\n
Immagini delle Bandiere Personalizzate<\/h3>\n
Se le bandiere predefinite di TranslatePress non soddisfano le tue esigenze, puoi utilizzare bandiere personalizzate. Carica le immagini delle bandiere nella libreria media di WordPress e inserisci il percorso nel campo dedicato nelle impostazioni del plugin. Le dimensioni consigliate per le bandiere personalizzate sono:<\/p>\n
- \n
- 18×12 pixel<\/strong> \u2014 per selettori compatti nel menu<\/li>\n
- 24×16 pixel<\/strong> \u2014 dimensione standard, buon compromesso tra visibilit\u00e0 e ingombro<\/li>\n
- 36×24 pixel<\/strong> \u2014 per selettori flottanti o posizioni prominenti<\/li>\n<\/ul>\n
Utilizza il formato PNG con sfondo trasparente per risultati ottimali. Le bandiere in formato SVG garantiscono la nitidezza su ogni dispositivo e risoluzione, ma richiedono che WordPress accetti il caricamento di file SVG (di norma bloccato per ragioni di sicurezza).<\/p>\n
![\"Gestione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/tp-05-plugins.png\")
<\/p>\nPersonalizzazione CSS del Selettore di Lingua<\/h2>\n
Per ottenere un selettore perfettamente integrato nel design del sito, il CSS personalizzato rappresenta lo strumento definitivo. Ecco i selettori CSS principali utilizzati da TranslatePress e come modificarli.<\/p>\n
Selettore Flottante \u2014 Classi CSS<\/h3>\n
Il selettore flottante utilizza le seguenti classi CSS:<\/p>\n
- \n
.trp-floater-ls-wrap<\/code> \u2014 container esterno del selettore flottante<\/li>\n.trp-floater-ls-current-language<\/code> \u2014 la lingua attualmente selezionata<\/li>\n.trp-floater-ls-dropdown<\/code> \u2014 il menu a tendina con le altre lingue<\/li>\n.trp-ls-link<\/code> \u2014 singolo link di lingua nel dropdown<\/li>\n.trp-flag-image<\/code> \u2014 immagine della bandiera<\/li>\n<\/ul>\nUn esempio pratico di personalizzazione CSS per adattare il selettore a un sito con tema scuro:<\/p>\n
.trp-floater-ls-wrap { background: #1a1a2e; border: 1px solid #16213e; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }<\/code><\/p>\n.trp-floater-ls-current-language { color: #e2e8f0; padding: 10px 16px; }<\/code><\/p>\n.trp-ls-link:hover { background: #16213e; }<\/code><\/p>\nSelettore nel Menu \u2014 Classi CSS<\/h3>\n
Quando il selettore viene aggiunto al menu di navigazione, utilizza classi CSS leggermente diverse:<\/p>\n
- \n
.menu-item-language<\/code> \u2014 la voce di menu contenente il selettore<\/li>\n.menu-item-language-current<\/code> \u2014 la voce della lingua attualmente attiva<\/li>\n.trp-ls-shortcode-current-language<\/code> \u2014 stile della lingua corrente nello shortcode<\/li>\n<\/ul>\nIl CSS personalizzato va inserito nel campo CSS aggiuntivo<\/strong> del Customizer di WordPress (Aspetto \u2192 Personalizza \u2192 CSS aggiuntivo) oppure nel file
style.css<\/code> del tema child.<\/p>\nSelettore di Lingua Ottimizzato per Mobile<\/h2>\n
Su dispositivi mobili, lo spazio sullo schermo risulta limitato e il selettore di lingua deve adattarsi di conseguenza. Ecco le best practice per un language switcher mobile-friendly:<\/p>\n
- \n
- Selettore flottante con dimensioni ridotte<\/strong> \u2014 su mobile riduci il padding e la dimensione del font per evitare che il selettore occupi troppo spazio<\/li>\n
- Solo bandiere su mobile<\/strong> \u2014 elimina il testo e mostra solo le bandiere per risparmiare spazio orizzontale<\/li>\n
- Posizionamento strategico<\/strong> \u2014 evita la posizione in basso a destra se il sito ha un pulsante di chat o contatto nella stessa zona<\/li>\n
- Touch target adeguato<\/strong> \u2014 assicurati che ogni opzione di lingua nel dropdown abbia almeno 44×44 pixel di area cliccabile (standard Apple per la accessibilit\u00e0 touch)<\/li>\n<\/ul>\n
Un esempio di CSS responsive per adattare il selettore ai dispositivi mobili:<\/p>\n
@media (max-width: 768px) { .trp-floater-ls-wrap { bottom: 70px !important; right: 10px !important; } .trp-flag-image { width: 20px; height: 14px; } }<\/code><\/p>\nNascondere il Selettore su Pagine Specifiche<\/h2>\n
In alcuni casi potresti voler nascondere il selettore di lingua su determinate pagine. Ad esempio, landing page per campagne Google Ads specifiche per un paese, pagine di checkout dove il cambio lingua potrebbe causare problemi, oppure pagine di ringraziamento post-acquisto.<\/p>\n
Per nascondere il selettore su pagine specifiche, utilizza CSS condizionale basato sulle classi body di WordPress:<\/p>\n
.page-id-123 .trp-floater-ls-wrap { display: none !important; }<\/code><\/p>\nOppure, per nascondere il selettore su tutte le pagine WooCommerce di checkout:<\/p>\n
.woocommerce-checkout .trp-floater-ls-wrap { display: none !important; }<\/code><\/p>\nSe utilizzi un plugin di page builder come Elementor, puoi anche inserire lo shortcode del selettore solo nelle pagine dove desideri mostrarlo, evitando il selettore flottante globale.<\/p>\n
Accessibilit\u00e0 del Selettore di Lingua<\/h2>\n
Un selettore di lingua accessibile permette a tutti gli utenti, inclusi quelli che utilizzano screen reader o navigano da tastiera, di cambiare lingua senza difficolt\u00e0. TranslatePress include alcune funzionalit\u00e0 di accessibilit\u00e0 di base, ma puoi migliorarle ulteriormente.<\/p>\n
Navigazione da Tastiera<\/h3>\n
Verifica che il selettore di lingua sia raggiungibile tramite il tasto Tab e che le opzioni del dropdown siano selezionabili con le frecce direzionali e il tasto Invio. Se il selettore flottante non risulta raggiungibile da tastiera, aggiungi un
tabindex=\"0\"<\/code> al container tramite JavaScript personalizzato.<\/p>\nEtichette ARIA<\/h3>\n
Per migliorare la compatibilit\u00e0 con gli screen reader, aggiungi attributi ARIA al selettore:<\/p>\n
- \n
aria-label=\"Seleziona la lingua\"<\/code> \u2014 descrizione del controllo<\/li>\naria-expanded=\"false\"<\/code> \u2014 indica se il dropdown risulta aperto o chiuso<\/li>\naria-current=\"true\"<\/code> \u2014 identifica la lingua attualmente selezionata<\/li>\nrole=\"navigation\"<\/code> \u2014 identifica il selettore come elemento di navigazione<\/li>\n<\/ul>\nContrasto dei Colori<\/h3>\n
Il testo del selettore di lingua deve rispettare i requisiti WCAG 2.1 di contrasto minimo (rapporto 4.5:1 per testo normale, 3:1 per testo grande). Verifica il contrasto con strumenti come il WebAIM Contrast Checker, specialmente se hai personalizzato i colori del selettore tramite CSS.<\/p>\n
Testo Alternativo per le Bandiere<\/h3>\n
Le immagini delle bandiere devono avere un attributo
alt<\/code> descrittivo. TranslatePress aggiunge automaticamente il nome della lingua come testo alternativo, ma verifica che la descrizione risulti chiara e comprensibile. Ad esempio,alt=\"Passa alla versione inglese\"<\/code> risulta preferibile rispetto aalt=\"en_GB\"<\/code>.<\/p>\nBandiere Nazionali vs Nomi delle Lingue: Quale Approccio Scegliere<\/h2>\n
La scelta tra bandiere e nomi delle lingue merita una riflessione approfondita, dato che influenza sia la usabilit\u00e0 che la percezione del brand internazionale.<\/p>\n
Vantaggi delle bandiere:<\/strong><\/p>\n
- \n
- Riconoscimento immediato e universale<\/li>\n
- Occupano poco spazio<\/li>\n
- Funzionano bene anche senza traduzione del testo del selettore stesso<\/li>\n<\/ul>\n
Svantaggi delle bandiere:<\/strong><\/p>\n
- \n
- Una bandiera rappresenta un paese, non una lingua (il portoghese si parla in Brasile e Portogallo)<\/li>\n
- Possono risultare ambigue (bandiera USA vs UK per la lingua inglese)<\/li>\n
- Alcuni visitatori potrebbero non riconoscere le bandiere di paesi meno noti<\/li>\n<\/ul>\n
Vantaggi dei nomi delle lingue:<\/strong><\/p>\n
- \n
- Chiarezza assoluta su quale lingua verr\u00e0 visualizzata<\/li>\n
- Nessuna ambiguit\u00e0 culturale o geopolitica<\/li>\n
- Migliore accessibilit\u00e0 per screen reader<\/li>\n<\/ul>\n
La combinazione bandiere + nomi<\/strong> rappresenta la soluzione consigliata nella maggior parte dei casi. Le bandiere attirano lo sguardo e i nomi eliminano le ambiguit\u00e0. Per siti con molte lingue (sei o sette), i soli codici abbreviati (IT, EN, FR, DE, ES, PT) offrono un buon compromesso tra compattezza e chiarezza.<\/p>\n
Consigli Finali per un Language Switcher Efficace<\/h2>\n
Ecco un riepilogo delle best practice per implementare un selettore di lingua professionale:<\/p>\n
- \n
- Posiziona il selettore in alto a destra<\/strong> \u2014 la convenzione internazionale prevede il language switcher nella zona superiore destra del sito, dove gli utenti si aspettano di trovarlo<\/li>\n
- Mostra la lingua corrente<\/strong> \u2014 il selettore deve indicare chiaramente quale lingua risulta attiva in quel momento<\/li>\n
- Scrivi i nomi delle lingue nella lingua di destinazione<\/strong> \u2014 mostra “English” invece di “Inglese” e “Deutsch” invece di “Tedesco”, permettendo ai visitatori di riconoscere la propria lingua<\/li>\n
- Testa su tutti i dispositivi<\/strong> \u2014 verifica il funzionamento su desktop, tablet e smartphone, sia in orientamento verticale che orizzontale<\/li>\n
- Non nascondere il selettore<\/strong> \u2014 un visitatore che non trova come cambiare lingua abbandoner\u00e0 il sito immediatamente<\/li>\n
- Evita il rilevamento automatico senza fallback<\/strong> \u2014 se utilizzi il rilevamento della lingua del browser, mantieni sempre visibile il selettore manuale come alternativa<\/li>\n<\/ol>\n
Se hai bisogno di supporto nella configurazione del selettore di lingua o nella personalizzazione del design per il tuo sito multilingue, contatta il nostro team<\/a>. Offriamo anche soluzioni di hosting WordPress ottimizzato<\/a> con configurazioni specifiche per siti multilingue ad alte prestazioni.<\/p>\n
Articoli Correlati sulla Traduzione di WordPress<\/h2>\n
- \n
- TranslatePress Free vs Premium: Funzionalit\u00e0 e Quale Scegliere<\/a><\/li>\n
- TranslatePress: Impostazioni Avanzate e Ottimizzazione Performance<\/a><\/li>\n<\/ul>\n
\nMigliora il Tuo Sito WordPress<\/h3>\n
Scopri le nostre guide dedicate ai migliori plugin per WordPress:<\/p>\n
- \n
- Guida completa a Elementor<\/a><\/li>\n
- Guida a WP Rocket per velocizzare WordPress<\/a><\/li>\n
- Guida a SEOPress per la SEO di WordPress<\/a><\/li>\n
- Guida a UpdraftPlus per il backup di WordPress<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Come Aggiungere il Selettore di Lingua al Sito WordPress con TranslatePress Il selettore di lingua rappresenta il punto di accesso principale per i visitatori internazionali…<\/p>\n","protected":false},"author":2,"featured_media":166740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Selettore Lingua WordPress con TranslatePress | Guida Completa","_seopress_titles_desc":"Come aggiungere e personalizzare il selettore di lingua con TranslatePress: floating, shortcode, menu, widget, bandiere e stili CSS personalizzati.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2956,2957,2954,2955,2934,492],"class_list":["post-166755","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-bandiere","tag-css","tag-language-switcher","tag-selettore-lingua","tag-translatepress","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166755","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166755"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166755\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166740"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Guida a WP Rocket per velocizzare WordPress<\/a><\/li>\n
- TranslatePress: Impostazioni Avanzate e Ottimizzazione Performance<\/a><\/li>\n<\/ul>\n
- Mostra la lingua corrente<\/strong> \u2014 il selettore deve indicare chiaramente quale lingua risulta attiva in quel momento<\/li>\n
- Posiziona il selettore in alto a destra<\/strong> \u2014 la convenzione internazionale prevede il language switcher nella zona superiore destra del sito, dove gli utenti si aspettano di trovarlo<\/li>\n
- Solo bandiere su mobile<\/strong> \u2014 elimina il testo e mostra solo le bandiere per risparmiare spazio orizzontale<\/li>\n
- 24×16 pixel<\/strong> \u2014 dimensione standard, buon compromesso tra visibilit\u00e0 e ingombro<\/li>\n
- Solo nomi delle lingue<\/strong> \u2014 chiaro e accessibile, occupa maggiore spazio orizzontale<\/li>\n
- Nel pannello laterale troverai una nuova sezione chiamata Language Switcher<\/strong><\/li>\n
- Bottom left<\/strong> \u2014 angolo in basso a sinistra, utile se in basso a destra hai una chat o un pulsante WhatsApp<\/li>\n