In questo post
TranslatePress offre numerose opzioni per personalizzare fin da subito il design del modulo selettore di lingua del tuo sito web. Ciò ne facilita l'integrazione con il design del tuo sito e garantisce la coerenza del tuo marchio. Inoltre, puoi personalizzarlo ulteriormente tramite codice e persino creare da zero il tuo selettore personalizzato.
Quindi, in questo articolo, ti mostrerò come crearne uno in 3 modi distinti, partendo dall'opzione no-code più semplice, fino ad arrivare a crearne uno da zero con PHP.
Ma prima di tutto, esaminiamo i vantaggi derivanti dalla modifica del design del vostro selettore di lingua. Successivamente, approfondirò le opzioni disponibili nelle impostazioni del TranslatePress e vi spiegherò come apportare modifiche al vostro switcher utilizzando il markup.
Perché realizzare un selettore di lingua personalizzato in TranslatePress?
Personalizzare il tuo selettore di lingua può aiutarti a migliorare il design, l'usabilità, l'accessibilità, la credibilità e l'efficacia del tuo sito multilingue:
- Garantisce che questa parte necessaria della tua interfaccia utente si integri bene con il resto del tuo progettazione del sito, portando a un marchio coerente, un'esperienza utente piacevole e un'impressione professionale.
- I visitatori possono accedere più facilmente ai contenuti nella loro lingua desiderata, aumentando le possibilità che rimangano più a lungo sul tuo sito web. Questo aumenta anche la fiducia e rende il tuo sito web più coinvolgente.
- Puoi fare scelte di design appropriate per visitatori con disabilità, come un contrasto di colori sufficiente e pulsanti abbastanza grandi.
Infine, la possibilità di personalizzare il design del tuo selettore di lingua ti offre maggiore libertà e controllo sull’aspetto del tuo sito. Puoi sperimentare diverse posizioni, forme, colori e stili dello switcher, font, e persino design personalizzati per dispositivi mobili.
Ok, passiamo ora ai 3 metodi con cui puoi aggiungere un selettore di lingua personalizzato al tuo sito se utilizzi TranslatePress, dal più semplice al più complesso.
Metodo semplice: opzioni di personalizzazione integrate in TranslatePress
Iniziamo con il metodo più semplice (e il migliore, se me lo chiedete). Semplice, veloce, senza codice, ma con un sacco di opzioni di personalizzazione.
Il plugin TranslatePress offre numerose opzioni native per personalizzare il plugin integrato selettore di lingua, consentendoti di apportare modifiche radicali con pochi clic. Le trovi tutte nella tua dashboard di WordPress alla voce Impostazioni → TranslatePress → Cambio lingua.
Il modello predefinito TranslatePress selettore di lingua è disponibile in tre versioni:
- come pulsante fluttuante
- il
- o come voce di menu
Ognuno di questi offre le proprie opzioni di personalizzazione. Esaminiamoli singolarmente.
Il Floating selettore di lingua
Puoi attivare il selettore fluttuante con l'interruttore a destra. Un'anteprima nell'angolo in alto a sinistra ti consente di vedere come apparirà sulla pagina. Questo selettore rimarrà in cima al tuo sito e seguirà i tuoi visitatori in ogni pagina in cui andranno.
Sotto Tipo di commutatore, puoi prima decidere se vuoi che le tue lingue appaiano come un menu a discesa, o, se offri esattamente due lingue sul tuo sito, puoi visualizzarle una accanto all'altra. Sotto trovi una serie di preset di design. Attivali con un solo clic.
Inoltre, il Personalizza il Design Questa sezione offre decine di opzioni per personalizzare quasi ogni aspetto dello switcher, ad esempio:
- Colore di sfondo e colore al passaggio del mouse
- Colore testo (normale e al passaggio del mouse)
- Colore del bordo, larghezza e raggio (inteso come curvatura degli angoli)
- Animazioni di movimento del menu a discesa
- Bandiera e dimensione del testo (normale o grande)
- Icona bandiera forma (rettangolo o quadrato)
Hai anche la possibilità di inserire codice CSS personalizzato, ma ne parleremo più avanti.
Sotto Personalizza layout, puoi regolare la posizione e altri aspetti dell'aspetto del tuo selettore di lingua.
In particolare, puoi:
- Posizionalo nell'angolo in basso o in alto a sinistra e destra dello schermo
- Regola larghezza pulsante
- Personalizza il padding (cioè lo spazio interno intorno al testo)
- Posiziona le bandiere delle lingue prima o dopo il nome, oppure nascondile completamente
- Mostra i nomi completi delle lingue, il loro codice ISO (EN, DE, ecc.) o niente
Nota che puoi anche avere impostazioni diverse per il desktop e per visitatori da dispositivi mobili.
Finalmente, c'è Impostazioni aggiuntive.
Ha solo due impostazioni:
- Quando hai esattamente due lingue sul tuo sito, puoi decidere che il selettore mostri sempre la lingua opposta a quella attiva al momento.
- Puoi inserire una piccola etichetta con la scritta “Powered by TranslatePress” nel riquadro mobile selettore di lingua (ti saremmo grati se lo facessi ☺️).
Salva le modifiche per renderle permanenti. Usa il Annulla modifiche pulsante per tornare alle impostazioni predefinite.
Lo shortcode/blocco selettore di lingua
Le impostazioni dello shortcode offrono opzioni simili a quelle del selettore di lingua mobile. Una differenza fondamentale è che è possibile posizionare questo selettore in punti specifici del sito, come il piè di pagina o una pagina specifica.
Puoi copiarlo e incollarlo ovunque sul tuo sito per far apparire il commutatore in quella posizione specifica.
Tuttavia, lo shortcode è principalmente destinato a classico temi. Per i temi a blocchi, TranslatePress offre una sezione dedicata Cambio lingua blocco.
Puoi cambiare il design del pulsante più o meno nello stesso modo in cui si cambia il selettore flottante.
Sotto Impostazioni aggiuntive, c'è un'opzione aggiuntiva che permette di aprire il selettore di lingua al clic, anziché al passaggio del mouse.
L'interruttore della voce di menu
Infine, hai la possibilità di aggiungere il selettore di lingua come menù elemento al tuo menu di WordPress.
Questo tipo di commutatore è molto utile anche per i temi classici. Per i temi che utilizzano blocchi, potrebbe essere più facile usare quanto sopra menzionato Cambio lingua blocco invece.
Questo è un po' più restrittivo in termini di personalizzazione, poiché il design del menu è collegato al design del tuo tema. Pertanto, le uniche opzioni di personalizzazione qui sono le posizioni delle icone della bandiera e i nomi delle lingue. Troverai anche un'impostazione per controllare la forma delle icone della bandiera (rettangolare, quadrata, arrotondata).
La parte difficile qui è che dovrai anche aggiungere manualmente le tue lingue nel menu dalle Impostazioni del menu. Ciò significa navigare su Aspetto → Menu, e selezionando il menu specifico a cui vuoi aggiungere il tuo switcher.
Poi, da Aggiungi voci di menu sezione a sinistra, apri la Cambio lingua tab, e aggiungi le lingue che desideri nel tuo menu, inserendole come sotto-elementi sotto Lingua Corrente. Ciò creerà un selettore simile a un menu a discesa, dove gli utenti potranno selezionare la loro lingua preferita.
Modifica bandiere della lingua predefinite
L'ultima opzione integrata che voglio illustrare per la creazione di un selettore di lingua personalizzato riguarda la modifica dei flag di lingua predefiniti.
Se vuoi usare un'icona di bandiera diversa per qualsiasi lingua, la prima cosa da fare è caricare il file sul tuo sito WordPress tramite Media → Aggiungi file multimediali.
Quando hai finito, apri l'immagine nella libreria dei media e copia il link alla sua posizione.
Poi vai a Impostazioni → TranslatePress → Avanzate → Lingua personalizzata. Qui, inserisci il Codice ISO della lingua di cui vuoi cambiare l'icona della bandiera sotto Codice lingua, poi, nel file delle bandiere, fornisci il link al tuo file caricato di recente in URL della bandiera campo e clic Aggiungere, quindi salva.
Puoi farlo per tutte le lingue che stai utilizzando. Quando salvi, la nuova icona della bandiera apparirà nel frontend del tuo sito.
Metodo avanzato: come personalizzare TranslatePress e selettore di lingua tramite CSS
Mentre le impostazioni che ti ho già illustrato ti offrono ampie opzioni di personalizzazione senza dover scrivere una sola riga di codice, potrebbero esserci casi in cui desideri spingerti un po' oltre.
Per personalizzare il selettore di lingua oltre i limiti consentiti dalle impostazioni predefinite, hai sempre la possibilità di utilizzare un CSS personalizzato.
Come accennato in precedenza, il menu mobile selettore di lingua dispone di un'apposita CSS personalizzato opzione. Puoi attivarlo e inserire il tuo markup per modificare ulteriormente il design dello switcher.
Esaminiamo ciò che è possibile. Subito dopo un corso intensivo per principianti sui CSS.
Breve introduzione ai CSS
Nel caso in cui tu sia un principiante assoluto, i CSS sono il linguaggio di marcatura che determina gran parte dell'aspetto, del layout e del comportamento dei siti web. Mentre gli elementi HTML forniscono la struttura, i CSS sono ciò che decide:
- quanto sono grandi questi elementi
- Quali colori hanno
- quale carattere usano
- come sono posizionati
- quanto spazio hanno intorno
- e molto altro
Ecco come appare un tipico pezzo di codice CSS (chiamato “insieme di regole”):
.button {
background-color: #0073aa;
color: #ffffff;
font-size: 16px;
}Consiste in diverse parti:
- Selettore In cima, prima delle parentesi graffe aperte, si trova il cosiddetto selettore. Si chiama così perché determina o seleziona quale elemento del sito web il CSS modificherà. In questo caso, si tratta di un elemento con una classe chiamata “button”, quindi probabilmente un pulsante vero e proprio sulla pagina.
- Proprietà: Questa è la parte che determina quale attributo dell'elemento selezionato viene preso di mira dal set di regole. In questo caso, si tratta del colore di sfondo, del colore del carattere e della dimensione del carattere dell'elemento. Ma esistono molte proprietà CSS, tra cui larghezza, altezza della riga o allineamento del testo.
- Valore Le proprietà devono avere un valore; è proprio questo che determina la qualità che la proprietà in questione assume. Ad esempio, in questo caso la dimensione del carattere è impostata su 16 pixel e il colore del carattere su #ffffff, che è il codice esadecimale del bianco. Una coppia proprietà-valore è chiamata dichiarazione. Come si può vedere, è possibile avere diverse dichiarazioni in un unico insieme di regole.
La parte finale che è importante è la sintassi. Le dichiarazioni CSS richiedono un punto e virgola alla fine e i set di regole richiedono parentesi graffe aperte e chiuse. Naturalmente, c'è molto altro da imparare, ma questo andrà bene per ora.
Individuare i selettori giusti
Come puoi immaginare, per apportare modifiche tramite CSS è necessario selezionare i selettori giusti. Puoi trovarli utilizzando gli strumenti di sviluppo del browser. Fai semplicemente clic con il pulsante destro del mouse su un elemento qualsiasi di una pagina web nel tuo browser e poi scegli Ispeziona.
Gli strumenti per sviluppatori del browser mostreranno la struttura HTML della pagina e il codice CSS dell'elemento scelto. Ci vuole un po' di pratica per capire quale dei box si desidera modificare, ma ci prenderai la mano rapidamente.
I selettori più importanti per personalizzare i modelli TranslatePress e selettore di lingua sono:
.trp-language-switcher: È la classe dell'elemento selettore di lingua stesso..trp-language-switcher-innerL'elemento wrapper per l'elenco delle lingue..trp-switcher-dropdown-listConsente di personalizzare l'elenco a discesa della lingua..trp-language-itemPer le singole lingue nella tua lista..trp-language-item__currentLa classe per la lingua attualmente attiva nella tua lista..trp-flag-image: Ha come bersaglio le immagini delle bandiere delle lingue.
Le diverse varianti di selettore di lingua potrebbero anche avere classi aggiuntive. Ad esempio, il blocco selettore di lingua presenta un elemento wrapper con la classe .trp-block-container. Queste classi possono aiutarti a distinguere il codice destinato esclusivamente a un tipo specifico di selettore di lingua. Inoltre, diversi elementi presentano più di una classe o un ID, il che può aiutarti a crea un selettore più specifico per sovrascrivere altri markup.
Non preoccuparti se non capisci ancora tutto questo. Diventerà più chiaro una volta che avrò esaminato gli esempi.
Modifica la posizione selettore di lingua
Il pulsante selettore di lingua mobile è preconfigurato con quattro posizioni predefinite. Se vuoi posizionarlo altrove, devi farlo tramite codice.
Il modo più semplice è sovrascrivere il CSS esistente. Quando si posiziona il selettore di lingua nell'angolo in basso a destra tramite le sue impostazioni e lo si esamina negli strumenti di sviluppo del browser, è possibile notare queste due dichiarazioni ad esso associate:
--bottom: 0px;
--right: 10vw;(Se sei confuso dal fatto che abbiano un aspetto diverso dalle altre proprietà CSS che sto usando, è perché sono proprietà personalizzate o variabili.)
Puoi sovrascriverli con .trp-language-switcher così:
.trp-language-switcher {
right: 0px;
bottom: 50%;
}Quando inserisci il markup qui sopra nel CSS personalizzato campo nelle impostazioni selettore di lingua e salvando, si ottiene il seguente risultato (ho anche disattivato i nomi delle lingue per rendere il tutto più chiaro).
Si noti che, se nelle impostazioni è stata configurata una posizione diversa per selettore di lingua (ad esempio, in alto a sinistra anziché in basso a destra), potrebbe essere necessario sovrascrivere alcune dichiarazioni CSS per spostarlo.
Personalizza forma e stile
È anche possibile utilizzare i CSS per modificare l'aspetto di selettore di lingua. Ad esempio, in questo caso, voglio trasformare il selettore e l'elenco delle lingue in cerchi. È già posizionato dove voglio che sia; mi serve solo un po' di spazio a destra. Ciò è possibile con questo codice CSS:
.trp-language-switcher {
bottom: 50%;
right: 1.5vw;
}Per rendere visibili le modifiche successive, dobbiamo prima impostare il colore di sfondo e il colore del bordo su trasparente nelle impostazioni.
A questo punto, possiamo trasformare il selettore di lingua in un cerchio e ridargli un po’ di colore:
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border-radius: 50%;
padding: 16px;
}Questo arrotonda gli angoli e aggiunge anche dello spazio interno per rendere ogni pulsante della lingua perfettamente rotondo. Finisce per apparire così:
Ora voglio degli spazi tra i campi della lingua:
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
Il layout è pronto, ora serve solo un po' di stile e qualche aggiustamento al modo in cui si apre:
.trp-language-switcher {
box-shadow: none;
pointer-events: none;
}
.trp-language-switcher .trp-language-item {
border: none;
pointer-events: auto;
}
.trp-language-switcher .trp-language-item:hover,
.trp-language-switcher .trp-language-item:focus-visible,
.trp-language-item:has(.trp-language-item__current:hover),
.trp-language-item:has(.trp-language-item__current:focus-visible) {
background-color: rgb(160, 8, 55);
}Il codice sopra:
- Aggiunge un nuovo colore di sfondo
- Regola il colore di sfondo al passaggio del mouse
- Sposta l'attivatore del menu a tendina sugli elementi della lista
Di seguito è riportato il risultato.
Ecco tutto il codice in un unico blocco:
.trp-language-switcher {
bottom: 50%;
box-shadow: none;
pointer-events: none;
right: 1.5vw;
}
.trp-language-switcher-inner,
.trp-language-switcher .trp-switcher-dropdown-list {
gap: 5px;
}
.trp-language-switcher .trp-language-item {
background-color: rgb(181, 11, 62);
border: none;
border-radius: 50%;
padding: 16px;
pointer-events: auto;
}
.trp-language-switcher .trp-language-item:hover,
.trp-language-switcher .trp-language-item:focus-visible,
.trp-language-item:has(.trp-language-item__current:hover),
.trp-language-item:has(.trp-language-item__current:focus-visible) {
background-color: rgb(160, 8, 55);
}Regola il design mobile
L'ultimo argomento che voglio trattare riguardo ai CSS è come personalizzare il design per dispositivi mobili del tuo selettore di lingua. Ciò può essere necessario per adattare il design alle dimensioni ridotte dello schermo.
È possibile introdurre modifiche di design specifiche per i dispositivi mobili tramite le cosiddette “media query”. Queste introducono condizioni nel markup CSS. In pratica dicono “utilizza questo markup solo quando lo schermo è inferiore o superiore a una certa dimensione”. Ecco un esempio:
@media (max-width: 480px) {
.trp-language-switcher {
bottom: 1.5vw;
}
}La prima riga recita semplicemente: “I seguenti insiemi di regole si applicano solo alle schermate con una larghezza massima di 480 pixel”. Sotto c'è una variante del codice di posizionamento che abbiamo usato in precedenza. Questo sposta l'elemento personalizzato selettore di lingua nuovamente nella parte inferiore dello schermo.
Nota che devi includere solo le dichiarazioni che desideri sovrascrivere. Qui stiamo modificando solo parte inferiore proprietà di .trp-language-switcher. Tutto il resto rimane come lo abbiamo impostato prima.
Infine, è importante posizionare le media query alla fine del codice CSS. I browser elaborano il CSS dall'alto verso il basso. Pertanto, se si desidera sovrascrivere dichiarazioni o set di regole precedenti, il nuovo codice deve apparire dopo quello originale.
Metodo professionale: come creare un selettore di lingua utilizzando PHP
Questa sezione è riservata ai professionisti. Se, per qualche motivo specifico, volete spingervi ancora oltre, potete anche realizzare da zero un TranslatePress o un selettore di lingua personalizzato.
Questo, ad esempio, ti evita di dover sovrascrivere il codice CSS esistente. Al contrario, ti permette di avere il pieno controllo sulla struttura, sul layout, sull’interattività e sullo stile del tuo selettore di lingua fin dall’inizio.
Per mostrarti come funziona, creeremo un selettore orizzontale minimalista, basato solo su bandiere, che può comparire facilmente in diverse aree del tuo sito web.
1. Conosci la funzione PHP
TranslatePress offre una funzione personalizzata che consente di creare il proprio selettore di lingua. Restituisce i parametri relativi a tutti i dati rilevanti per le lingue attive sul tuo sito:
- lingua_nome Il nome completo della lingua (ad esempio, “inglese”).
- codice lingua Il codice della lingua (ad es. “EN”).
- nome_lingua_breve Lo slug della lingua utilizzato negli URL.
- collegamento_bandiera: L'URL dell'immagine della bandiera della lingua.
- URL della pagina corrente: L'URL della pagina in cui si trova il visitatore, ma in quella lingua.
Puoi utilizzarlo per creare il tuo selettore di lingua personalizzato con il tuo markup. Un'opzione è quella di inserirlo direttamente in un file del tema all'interno della directory di un tema figlio (non nel tema principale, poiché le tue modifiche verrebbero sovrascritte in caso di aggiornamento del tema). In alternativa, puoi creare uno shortcode in functions.php, un plugin per frammenti di codice oppure con un plugin personalizzato di tua creazione, e utilizza lo shortcode per inserire selettore di lingua sul tuo sito.
Optiamo per la seconda opzione.
2. Crea lo Shortcode
La prima cosa che faremo è impostare l'impalcatura per lo shortcode che creeremo. Inseriscila all'interno del tuo tema child functions.php o un file PHP nel tuo plugin personalizzato:
<?php
function my_custom_language_switcher() {
// selettore di lingua code goes here
}
add_shortcode( 'my_language_switcher', 'my_custom_language_switcher' );;Questo configura la funzione PHP che alla fine registrerà e mostrerà lo shortcode in WordPress.
3. Creare il codice HTML selettore di lingua
Il prossimo passo consiste nel creare la struttura di base del selettore di lingua. Dato che puntiamo a un approccio minimalista, l'operazione è relativamente semplice.
<div class="my-language-switcher">
<ul>
<li class="language-item">
<a href="#"><img src="flag.png" alt="Bandiera della lingua"></a>
</li>
</ul>
</div>È essenzialmente un elemento wrapper con un elenco puntato all'interno. Ogni elemento dell'elenco contiene un elemento link per la lingua, che ha l'immagine della bandiera all'interno.
4. Aggiungi dati PHP dinamici
Ora aggiungeremo la struttura HTML alla nostra funzione di shortcode e inseriremo i dati della lingua tramite PHP.
<?php
function my_custom_language_switcher() {
// Get all active languages
$languages = trp_custom_language_switcher();
// If no languages, return empty
if ( empty( $languages ) ) {
return '';
}
// Start capturing HTML
ob_start();
?>
<div class="my-language-switcher" data-no-translation>
<ul>
<?php foreach ( $languages as $language ) : ?>
<li class="language-item <?php echo !empty($language['current_language']) ? 'current' : ''; ?>">
<a href="<?php echo esc_url( $language['current_page_url'] ); ?>"><img src="<?php echo esc_url( $language['flag_link'] ); ?>" alt="<?php echo esc_attr( $language['language_name'] ); ?> flag"></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
// Restituisce l'HTML per lo shortcode
return ob_get_clean();
}
// Registra lo shortcode
add_shortcode('my_language_switcher', 'my_custom_language_switcher');Questo crea lo stesso markup HTML che abbiamo visto prima, ma per ciascuna lingua attiva sul tuo sito. Inserisce inoltre l'URL della lingua, il link all'immagine della bandiera e il nome della lingua come tag ALT dell'immagine. In aggiunta, aggiunge una classe extra alla lingua attualmente attiva nel caso in cui tu voglia aggiungere uno stile supplementare.
5. Testa l'output sul tuo sito
Questo funziona già. Puoi usare lo shortcode [my_language_switcher] per posizionare il selettore personalizzato dove preferisci sul tuo sito, ad esempio tramite il Codice breve blocco nell'editor a blocchi di WordPress. In alternativa, posizionalo in un file come header.php o footer.php utilizzando questa riga di codice:
<?php echo do_shortcode('[my_language_switcher]'); ?>Dovresti già vedere il tuo elenco di lingue, tuttavia, completamente privo di stile.
Il passaggio finale è cambiare questo.
6. Aggiungi stili tramite CSS
L'ultimo passaggio per creare il tuo tema personalizzato TranslatePress selettore di lingua consiste nel renderlo esteticamente gradevole. Per ottenere il risultato mostrato in precedenza, aggiungi questo codice al tuo tema figlio, al foglio di stile del plugin o al CSS aggiuntivo campo nell'editor di WordPress:
.my-language-switcher {
display: inline-block;
}
.my-language-switcher ul {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
margin: 0;
}
.my-language-switcher li a {
display: block;
overflow: hidden;
}
.my-language-switcher li a img {
width: 100%;
height: 100%;
display: block;
}
Crea oggi stesso il tuo selettore di lingua personalizzato
Personalizzare i modelli TranslatePress e selettore di lingua garantisce che si integrino perfettamente con il resto del design del tuo sito web e offra la migliore esperienza possibile ai tuoi utenti.
In precedenza ho illustrato diversi modi per personalizzarne l'aspetto, dalle impostazioni integrate del plugin, facili da usare, alle personalizzazioni CSS, fino a uno switcher realizzato interamente da zero tramite PHP. Spero che ora vi sentiate pronti a integrare pienamente TranslatePress nel design del vostro sito web.
Come puoi facilmente constatare, c'è un'opzione che spicca in termini di praticità e velocità. TranslatePress offre numerose opzioni di personalizzazione già pronte all'uso, quindi non devi essere un esperto di programmazione per avere un selettore di lingua perfettamente funzionante e personalizzato.
TranslatePress Multilingue
Provalo oggi stesso e avrai il tuo selettore di lingua pronto in pochi minuti!
