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

In questo articolo imparerai come utilizzare un selettore di lingua personalizzato con Transposh per costruire un sito web multilingue con WordPress totalmente gratuito.

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% /)
• È tutto. Il vostro testo sarà tradotto automaticamente nella lingua selezionata

Inoltre, Transposh consentono di correggere eventuali errori di traduzione in un modo semplice e veloce! Quindi ti mostrerò come utilizzare un selettore di lingua personalizzato con Transposh per creare un sito Web multilingue con WordPress. Ma... Sempre c'è un "ma" Prima, di utilizzare tutte le widget di è necessario aggiornare alla versione completamente: nessun problema, è libero. Vai alla sezione Transposh della dashboard e scegli Impostazioni, 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. Dopo un po 'di tempo ti verrà comunicato che è disponibile un aggiornamento per Transposh: aggiorna e si sono ok.

Una volta Transposh è stato aggiornato alla versione completa, finalmente ottieni il widget e ... Come al solito, succede che il widget probabilmente non si integra nel design del tuo sito web, 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! Non so perché, dopo tutto inglese è inglese ed è nato nel Regno Unito. Così, Cosa fare? Bene, costruiremo il nostro selettore di lingua personalizzato.

 

Che cosa esattamente abbiamo bisogno?

Vediamo come funziona Transposh. 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 (lasciali come predefiniti se non hai alcun problema specifico con questo), 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, dobbiamo fornire agli amministratori e ai redattori un modo rapido per mettere il sito web in modalità di modifica per correggere gli errori di traduzione. Per fare questo si attenersi alla seguente procedura:

• imposteremo alcune impostazioni di WordPress
• caricheremo sulla nostra installazione di WordPress le immagini dei flag di cui abbiamo bisogno
• installeremo un paio di plugin
• scriveremo un po 'di codice

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. Basta google e troverai molti set di icone di bandiere gratuiti: scegliere il vostro preferito scaricare e caricare le bandiere al tuo sito web utilizzando la sezione media di WordPress cruscotto. In questo articolo userò tre flag, inglese, spagnolo (perché io vivo in Spagna) e italiano (perché vengo dall'Italia), ma ovviamente sentitevi liberi di utilizzare le bandiere si ha realmente bisogno di utilizzare.

Passo 3: alcuni plugin

Per utilizzare i nostri flag utilizzeremo un paio di plugin utili (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. È tutto per ora.

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. Questa funzione funziona fuori dagli schemi con il widget Transposh ma poiché non la stiamo usando dovremo implementarla manualmente. tecnicamente, il Se Menu plugin non è strettamente necessario: Lo uso perché non voglio che i visitatori possano modificare il testo del sito web come vogliono e suppongo che la maggior parte di voi farà lo stesso. Se plug-Menu solo fare questo: permette di aggiungere una logica condizionale in modo da poter mostrare o nascondere singole voci di menu a seconda del ruolo dell'utente.

Passo 4: la creazione del menu

Va bene, ora siamo pronti per costruire il nostro menu. Vai a Aspetto->menu.

Impostazioni per Icon Menu

Quando sei nella sezione Menu, vedrai un nuovo elemento nella barra laterale sinistra delle voci di menu Aggiungi: Impostazioni icona del menu. aprirlo, deselezionare le Dashicons opzione preselezionati (non ne abbiamo bisogno) 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.

Aggiunta delle voci di menu del selettore di lingua

Aggiungeremo 3 voci di menu con le bandiere per consentire agli utenti di passare tra i nostri tre lingue supportate. Quindi aggiungeremo un quarto elemento per abilitare / disabilitare la modifica della traduzione (per questa voce di menu useremo la logica condizionale offerta dal plugin If Menu. Per ogni voce di menu utilizzeremo collegamenti personalizzati. 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, digita l'URL di base del tuo sito web come URL e "en" (senza virgolette) come testo link.

sì, è vero! Sto implementando la funzionalità multilingua per questo blog scrivendo questo articolo: eccitante, non è vero? 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).

Adesso, nelle classi CSS finestra di input (opzionale) digita "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: aggiungi "/ it" per l'italiano, "/ es" per spagnolo e così via ...

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, aggiungeremo un nuovo collegamento personalizzato al nostro menu: L'ho chiamato Edit on / off. Non metteremo nulla nel campo URL e dovremo selezionare la casella di controllo "Abilita regole di visibilità" per rendere questo elemento visibile solo agli amministratori e agli editor. Inoltre, dobbiamo aggiungere la classe 'edit-translation' che useremo per gestire l'evento click e abilitare la modalità di modifica (come puoi vedere, allego anche la classe no-translate qui poiché non ho bisogno di tradurre questo elemento).

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, quindi non farà nulla ... 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:

jQuery(documento).pronto(funzione($) {
    var urlParam = funzione (nome) {
        risultati var = new RegExp('[?&]' + nome + '=([^&#]*)').Exec(window.location.search);
        ritorno (risultati !== null) ? risultati[1] || 0 : falso;
    }
    $(documento).su('clic', '.Edit-traduzione', funzione(e){
        e.preventDefault();
        var currentOrigin = window.location.origin;
        var currentPath = window.location.pathname;
        var param = urlParam('Tpedit');
        era newUrl = '';
        Se (param === falso){
            newUrl = currentOrigin + currentPath +'?tpedit = 1';
            $(Questo).attr('Href', NEWURL);
        }altro{
            newUrl = currentOrigin + currentPath;
            $(Questo).attr('Href', NEWURL);
        }
        window.location.href = newUrl;
    })
})

spiegazione rapida: quando l'utente fa clic sulla nostra voce di menu "Modifica 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 HTTP://codingfix.com/how-to-use-custom-flags-languages-switcher-with-transposh/ currentOrigin sarà http://codingfix.com mentre currentPath sarà how-to-use-custom-bandiere-lingue-switcher-con-Transposh /. Ma se fossimo in http://codingfix.com/es/how-to-use-custom-flags-languages-switcher-with-transposh/, currentPath sarebbe es / how-to-use-custom-bandiere-lingue-switcher-con-Transposh /. Una volta che abbiamo i componenti dell'URL corrente controlliamo se la stringa 'tpedit' è presente nell'URL come parametro. Questo parametro viene utilizzato da Transposh per abilitare la modalità di modifica per le traduzioni: quando si utilizza il widget e si seleziona la casella di controllo Modifica traduzione la pagina viene ricaricata con il parametro 'tpedit = 1' aggiunto all'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 (cioè ricarichiamo la pagina rimuovendo il parametro 'tpedit'); altrimenti costruiamo il nuovo url aggiungendo il parametro 'tpedit = 1' e ricarichiamo la pagina in modalità di modifica.
Ora salvate il file con il nome che preferite: Userò il nome 'myscript.js' perché non ho tempo da perdere a pensare a un nome 🙂 più bello Ora dobbiamo caricare questo file nella nostra cartella dei temi, preferibilmente in una sottocartella chiamata "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 (se non sai cos'è un child theme puoi leggere questo: 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:

funzione load_custom_javascript() { 
    wp_enqueue_script( 'Myscript', //nome dello script
        get_stylesheet_directory_uri() . '' /js/myscript.js, //percorso completo del file
        Vettore('Jquery'), //matrice di dipendenze
        '', //numero della versione
        true // inserisce lo script nel piè di pagina
    ); 
}
add_action( '' wp_enqueue_scripts, 'Load_custom_javascript' );

Se ami vivere pericolosamente e non stai usando un child theme, basta sostituire get_stylesheet_directory_uri() con get_template_directory_uri().

Finalmente ce l'abbiamo!

Va bene, è tutto gente! Ora si può iniziare a correggere traduzioni automatiche. Anch'io, Ho paura...