Come utilizzare un selettore di lingua personalizzato con Transposh per creare un sito Web WordPress multilingue

In this article you'll learn how to use a custom language switcher with Transposh to build a multi-language website with WordPress.

Quando si tratta di costruire un sito web multi-lingua, WordPress offre un sacco di diversi plugin: WPML, Poliglotta e così via.

Tutti questi plugin hanno una versione gratuita con limitazioni rilevanti: se si desidera un plugin completamente funzionale è necessario acquistare la versione Premium.

Ma questo non è vero per Transposh: Transposh è completamente gratuito, per sempre, senza alcuna limitazione (in numero di lingue, numero di siti web o qualsiasi altra cosa). E funziona benissimo:

  • installare Transposh e attivarlo
  • impostare la lingua predefinita in Impostazioni- Worpdress>parte generale
  • scegliere le lingue che si desidera utilizzare in Transposh->Le lingue
  • in Transposh->Impostazioni impostare chi può modificare traduzioni (tipicamente saranno amministratori e redattori)
  • Abilita riscrittura degli URL
  • Set WordPress Impostazioni->Permalink a nome Messaggio (/%postname% /)
  • that's all. Il vostro testo sarà tradotto automaticamente nella lingua selezionata

Inoltre, Transposh consentono di correggere eventuali errori di traduzione in un modo semplice e veloce! So I'll show you How to use a custom language switcher with Transposh to build a multi-language website with WordPress.

But... Sempre c'è un "ma" 🙂 First, di utilizzare tutte le widget di è necessario aggiornare alla versione completamente: nessun problema, is free. Go to Transposh section of the dashboard and choose Settings, quindi controllare il "Consentire l'aggiornamento alla versione completa da http://transposh.org, che non ha alcun limite sulle lingue utilizzate e include una serie completa di widget" casella di controllo e fare clic sul pulsante Salva modifiche. After some time you'll be notified there is an update available for Transposh: aggiorna e si sono ok.

Una volta Transposh è stato aggiornato alla versione completa, you finally get the widget and... Come al solito, it happens that the widget probably doesn't integrate in your website design, che richiede un sacco di lavoro da aggiungere CSS personalizzato, cercando per lo stile in modo coerente con il resto dei vostri stili. Ultimo ma non meno importante, lingua inglese è rappresentato dalla bandiera degli Stati Uniti! Don't know why, dopo tutto inglese è inglese ed è nato nel Regno Unito. Così, Cosa fare? Bene, we're going to build our custom language switcher.

Che cosa esattamente abbiamo bisogno?

Let's see how Transposh works. Quando si fa clic sulla bandiera di una lingua non predefinita, Transposh ricarica la pagina e cambia il proprio aspetto. Come potete vedere, una casella di controllo appare subito sotto le bandiere: il controllo si ricarica la pagina in modalità Modifica. A seconda delle impostazioni Transposh (leave them to default if you don't have any specific issue with this), ogni testo nella pagina avrà un piccolo pulsante giallo aggiunto: Cliccando su tale pulsante mostrerà un popup per modificare la traduzione o semplicemente li approva (traduzioni approvate avranno un pulsante verde al posto di un giallo)

Così, riassuntivo, prima dobbiamo fornire il nostro utente un modo semplice e possibilmente belli da passare da una lingua all'altra; in secondo luogo, we have to provide to administrators and editors a quick way to put the website in edit mode to fix translations' errors. Per fare questo si attenersi alla seguente procedura:

  • we'll set some WordPress setting
  • we'll upload to our WordPress installation the flags' images we need
  • we'll install a couple of plugins
  • we'll write a bit of code

lingua personalizzata passo dopo passo switcher

Passo 1: impostazioni WordPress

Primo, come ho detto prima, vai alle impostazioni->Permalink ed impostarlo a nome Messaggio (%% postname).

Poi, andare o Aspetto->menu, opzioni aperte schermo cliccando sul tab in alto a destra e selezionare la casella di controllo classi CSS, come mostrato nell'immagine qui sotto.

Passo 2: le bandiere

In primo luogo abbiamo bisogno di ottenere le nostre icone di bandiera. Just google a bit and you'll find a lot of free flag icons sets: scegliere il vostro preferito scaricare e caricare le bandiere al tuo sito web utilizzando la sezione media di WordPress cruscotto. In thus article I'll use three flags, inglese, spagnolo (perché io vivo in Spagna) e italiano (because I'm from Italy), ma ovviamente sentitevi liberi di utilizzare le bandiere si ha realmente bisogno di utilizzare.

Passo 3: alcuni plugin

In order to use our flags we're going to use a couple of useful plugins (anche questi sono totalmente gratuito).

Collegare 1: Icona menu ThemeIsle

Questo piccolo plug adorabile (https://wordpress.org/plugins/menu-icons/) Consente yo set qualsiasi icona o immagine che si desidera associare a una voce di menu. Il plugin permette di scegliere se il testo voce di menu deve essere visibile o nascosto, in modo che possiamo aggiungere alla nostra menu 2 bandiere rapidamente e facilmente.

That's all for now.

Collegare 2: Se Menu

Ora dobbiamo aggiungere un altro elemento di menu per attivare o disattivare l'opzione per modificare la traduzione se non siamo felici con lui. This function works out of the box with Transposh widget but since we're not using it we'll have to implement it manually.

tecnicamente, il Se Menu plugin non è strettamente necessario: I use it because I don't want visitors can change the website text as they want and I suppose that the majority of you will do the same. Se plug-Menu solo fare questo: it allows to add a conditional logic so you can show or hide single menu items depending on the user's role.

Passo 4: la creazione del menu

Va bene, now we're ready to build our menu. Vai a Aspetto->menu.

Impostazioni per Icon Menu

Quando sei nella sezione Menu, you'll see a new element in Add menu items left side bar: Impostazioni icona del menu. aprirlo, deselezionare le Dashicons opzione preselezionati (we don't need it) e selezionare l'opzione Immagini come nell'immagine a sinistra.

Poi passare alla scheda menu corrente e set Nascondi etichetta su Sì. Infine, solo Salva impostazioni!

Una volta che abbiamo completato queste operazioni preliminari, possiamo iniziare ad aggiungere voci di menu per il nostro menu.

Adding the language switcher's menu items

We'll add 3 voci di menu con le bandiere per consentire agli utenti di passare tra i nostri tre lingue supportate. Then we'll add a fourth item to enable/disable translation editing (for this menu item we'll use the conditional logic offered by If Menu plugin. For each menu item we'll use Custom links.

L'immagine sotto mostra come impostare la voce di menu per la lingua di default (nel nostro caso sarà inglese). Scegli i collegamenti personalizzati come tipo di elemento di menu, type the base url of your website as URL and 'en' (senza virgolette) come testo link.

sì, it's true! I'm implementing multilanguage feature for this blog writing this article: eccitante, isn't it?

Va bene, ora la voce di menu dovrebbe assomigliare a questa:

Vedi? C'è una fila che dice Icona: Selezionare. Clicca su Seleziona per caricare la tua bandiera (o per selezionare da voi Mediateca se si aveva già caricato esso).

Vedete l'Union Jack?

Adesso, nelle classi CSS finestra di input (opzionale) type 'no_translate' (ancora, senza virgolette).

Fare lo stesso per ogni lingua che si desidera utilizzare. L'unica cosa che si deve cambiare è l'URL nel tuo link personalizzato: add '/it' for italian, '/es' for spanish and so on...

Risparmiare menu e dare un'occhiata al tuo sito web: è già un sito multi-lingua!!!

Creazione del "Modalità Modifica" elemento del menu

Ma traduzioni automatiche sono spesso poveri, quindi abbiamo bisogno di un modo per cambiare e correggerli. Per farlo, we'll add a new Custom link to our menu: L'ho chiamato Edit on / off. We won't put anything in URL field and we'll have to check the ' Enable visibility rules ' checkbox to make this item visible only to Administrators and to Editors. Inoltre, we have to add the class '.edit-translation' which we'll use to handle the click event and enable the edit mode.

Avviso: questa voce di menu appare solo quando si esplora il sito in una lingua secondaria: Transposh è abbastanza intelligente per sapere che non v'è alcuna traduzione di correzione per la lingua predefinita!

Ma questo articolo non ha URL, so it won't do anything... Per rendere funziona dobbiamo scrivere un po 'di javascript.

Passo 5: un po 'di codifica

Così abbiamo il nostro menu principale con 3 bandiere (che già funzionano bene: Basta fare un tentativo) e la modifica on / off voce per abilitare la modifica manuale del testo tradotto; questa ultima voce di menu sarà visibile solo se l'utente verrà registrato come amministratore o Editor.

Ma al fine di rendere questo lavoro in modo corretto voce di menu abbiamo bisogno di aggiungere un po 'javascript. Eseguire il codice editore di scelta e di creare un nuovo file; poi scrivere in questo codice:

spiegazione rapida: when the user clicks on our menu item 'Edit on/off', prima impediamo l'evento predefinito, cioè ricaricare la pagina corrente. Poi gli usi codice window.location.origin e window.location.pathname per ottenere l'URL corrente di base e il percorso corrente.

Per esempio, se siamo in https://codingfix.com/how-to-use-custom-flags-languages-switcher-with-transposh/ currentOrigin sarà https://www.codingfix.com whereas currentPath will be how-to-use-custom-flags-languages-switcher-with-transposh/. Ma se fossimo in https://www.codingfix.com/es/how-to-use-custom-flags-languages-switcher-with-transposh/, currentPath sarebbe es / how-to-use-custom-bandiere-lingue-switcher-con-Transposh /.

Once we have the components of the current url we check if the string 'tpedit' is present in the url as a parameter. Questo parametro viene utilizzato da Transposh per abilitare la modalità di modifica per le traduzioni: when you use the widget and check the Edit translation checkbox the page is reloaded with the param 'tpedit=1' appended to the url. Quindi dobbiamo controllare se siamo in modalità di modifica: se siamo, creiamo un nuovo URL utilizzando solo currentOrigin e currentPath e reindirizzare il browser a questo URL (that is we reload the page removing the param 'tpedit'); otherwise we build the new url appending the param 'tpedit=1' and reload the page in edit mode.

Ora salvate il file con il nome che preferite: I'll use the name 'myscript.js' because I've no time to waste thinking to a nicer name 🙂

Ora non resta che caricare il file nella nostra cartella del tema, preferably in a subfolder called 'js'. A proposito, Vi consiglio vivamente di utilizzare un tema bambino perché ogni cambiamento che fate per i file del tema saranno persi quando il tema sarà aggiornato (if you don't know what is a child theme you can read this: https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/ Per creare facilmente un tema bambino dal tema corrente è possibile utilizzare il plugin Configuratore Bambino Tema).

Passo 6: il caricamento di script

Ora non resta che modificare il file functions.php per caricare il nostro script. Il codice da utilizzare è leggermente diverso a seconda wheter si utilizza un tema bambino o no.

Se si utilizza un tema bambino (consigliato) si deve aggiungere a voi functions.php il seguente codice:

If you love to live dangerously and you're not using a child theme, basta sostituire get_stylesheet_directory_uri() con get_template_directory_uri().

Finally we've got it!

Va bene, that's all folks! Ora si può iniziare a correggere traduzioni automatiche. Anch'io, I fear...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.