Come cambiare le bandierine di Polylang

Se usi Polylang per tradurre un sito e le bandierine standard ti fanno un po’ storcere il naso… ti capisco (fanno un po’ 💩).
Sono piccole, un po’ datate e spesso non si integrano bene con il design del sito.

La buona notizia è che puoi cambiarle in modo molto semplice ed in questa breve guida ti porto passo passo dentro il procedimento, e se non hai voglia di leggere, ti lascio anche il video tutorial! Vamonos!

Step 1: Attiva un Child Theme

Prima di toccare qualsiasi cosa assicurati di avere attivo il child theme!

Io, nel video, stavo lavorando con Bricks e ho semplicemente installato il Bricks Child.
Ma vale per qualsiasi tema: Astra, GeneratePress, ecc.

Perché è così importante? Perché se fai le modifiche nel tema principale al primo aggiornamento adios… sparisce tutto! Con un tema child attivo invece, le modifiche restano al sicuro!

Step 2: Creare la cartella per le bandierine

Una volta attivato il child theme, avrai bisogno di accedere alla gestione dei file del tuo sito.
Puoi farlo:

• dal File Manager del tuo hosting
• oppure da un plugin per gestire i file direttamente da WordPress

Il percorso è questo:

wp-content → themes → nome-del-tuo-child

Una volta dentro alla cartella del tuo child crea una nuova cartella chiamata:

polylang

Mi raccomando, scrivi polylang così come lo vedi, senza maiuscole o altro, altrimenti non funzia!
Una volta creata la cartella aprila, qui dentro dovrai caricare i file delle tue bandierine personalizzate!

Step 3: Caricare i file delle bandierine custom

Scarica / crea i file delle tue bandierine personalizzate, ma prima di caricarle rinominale con il codice lingua corretto!

Ad esempio:

• inglese → en_GB
• italiano → it_IT

Quando avrai rinominato i file, caricali nella famosa cartella polylang.

Un suggerimento: evita immagini pesanti! Non servono file da 300–500px ti bastano file da 25/30px di larghezza. Se li scarichi da librerie di icone potrebbero essere grandi anche 200px e pesare pochi KB, in quel caso non succede nulla perché poi ti mostro come ridimensionarlo. Se invece hai creato tu la bandierina da zero, allora ti suggerisco tenere la dimensione “reale” del file.

Step 4: Salva le impostazioni in Polylang

Fantastico, ci siamo quasi! Una volta inserite le immagini, ti basterà andare nelle impostazioni di Polylang: non devi cambiare nulla, ti basterà semplicemente salvare il tutto.

Vai in:

Lingue → Impostazioni → clic su Salva

È un po’ come quando si risalvano i permalink: clicchi, aggiorni, e magicamente tutto funziona (o torna a funzionare 😅). Infatti a questo punto, se ricarichi il sito, dovresti già vedere le bandierine nuove!

CSS Custom per cambiare la dimensione bandierine di Polylang

Di default Polylang usa la dimensione reale dell’immagine caricata, quindi se la bandiera è troppo grande o troppo piccola, in frontend comparirà esattamente così com’è!

Se vuoi controllare meglio dimensioni e allineamento, puoi aggiungere un po’ di CSS, per esempio:

.widget_polylang img,
.wp-block-polylang-language-switcher img {
    width: 23px;
    height: 23px;
}

Io di solito aumento leggermente la dimensione, perché trovo che la dimensione “default” di Polylang sia un po’ piccola, ma puoi ovviamente modificare i valori finché non trovi la quadra che ti piace!

Nota: Se carichi già le immagini alla misura ideale, puoi anche evitare questo passaggio.

Riassunto

• attiva il child theme
• crea la cartella polylang dentro al child
• carica le bandierine rinominate con il codice lingua corretto
• risalva le impostazioni di Polylang
• se serve, regola le dimensioni via CSS

Et voilà! E come sempre, se ti ritrovi in difficoltà, sai a chi rivolgerti! 😉

Consulenza, mentoring e formazione per web designer

Se sei un web designer e stai cercando supporto tecnico, emotivo, psicologico (🙃) dai un’occhiata al mio servizio di mentoring personalizzato per web designer.

Formazione per web designer