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 creare 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 io vi mostrerò come utilizzare uno switcher lingua personalizzata con Transposh per costruire un sito web multi-lingua 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 qualche tempo riceverai una notifica c'è un aggiornamento disponibile per Transposh: aggiorna e si sono ok.

Una volta Transposh è stato aggiornato alla versione completa, finalmente ottiene il widget e… Come al solito, accade che il widget probabilmente non si integra nel tuo sito web 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! Non so perché, dopo tutto inglese è inglese ed è nato nel Regno Unito. Così, Cosa fare? Bene, stiamo andando a costruire la nostra lingua personalizzata switcher.

 

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 (lasciarli per difetto se non si dispone di 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 gli editori un modo rapido per mettere il sito nella modalità di modifica traduzioni fix per’ errori. Per fare questo si attenersi alla seguente procedura:

• imposteremo una certa regolazione WordPress
• ci carichiamo la nostra installazione di WordPress le bandiere’ Abbiamo bisogno di immagini
• installeremo un paio di plugin
• scriveremo un po' di codiceSelettore di lingua personalizzato passo dopo passo

 

 

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. Solo Google un po 'e troverete un sacco di gratis icone bandiera set: scegliere il vostro preferito scaricare e caricare le bandiere al tuo sito web utilizzando la sezione media di WordPress cruscotto. In tal modo l'articolo userò tre bandiere, inglese, spagnolo (perché io vivo in Spagna) e italiano (perché io sono da Italia), ma ovviamente sentitevi liberi di utilizzare le bandiere si ha realmente bisogno di utilizzare.

Passo 3: alcuni plugin

Per poter utilizzare le nostre bandiere che andremo a utilizzare 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 out of the box con Transposh widget di ma visto che non lo si utilizza dovremo implementare manualmente.

tecnicamente, il Se Menu plugin non è strettamente necessario: Io lo uso perché non voglio che i visitatori possono modificare il testo sito 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 visualizzare o nascondere le voci di menu singole a seconda del ruolo dell'utente.

Passo 4: la creazione del menu

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

Impostazioni per Icon Menu

Quando sei nella sezione Menu, vedrete un nuovo elemento in voci di menu Add sinistra barra laterale: Impostazioni icona del menu. aprirlo, deselezionare le Dashicons opzione preselezionati (non abbiamo bisogno di esso) 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 di voci di menu del switcher lingua

Aggiungeremo 3 voci di menu con le bandiere per consentire agli utenti di passare tra i nostri tre lingue supportate. Poi si aggiungerà una quarta voce per abilitare / disabilitare la modifica di traduzione (per questa voce di menu useremo la logica condizionale offerto da Se plug-Menu. Per ogni voce di menu useremo 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, digitare l'URL di base del tuo sito web come URL e ‘en’ (senza virgolette) come testo link.

sì, è vero! Sto implementando funzionalità multilingua per questo blog scrittura di 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) no_translate tipo’’ (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: aggiungere ‘/ it’ per l'italiano, '/ S’ per lo 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 per il nostro menu: L'ho chiamato Edit on / off. Noi non mettere nulla nel campo URL e dovremo controllare il ‘ Abilita regole di visibilità ‘ casella di controllo per rendere questo elemento visibile solo agli amministratori e per i redattori. Inoltre, dobbiamo aggiungere la classe ‘edit-translation’ che useremo per gestire l'evento click e attivare la modalità di modifica (come puoi vedere, allego qui anche la lezione di non traduzione 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, in modo da non fare nulla… Per farlo funzionare 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 sul nostro menu ‘Edit on / off’, prima impediamo l'evento predefinito, cioè ricaricare la pagina corrente. Quindi il codice usa window.location.origin e window.location.pathname per ottenere l'URL di base corrente 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 della URL corrente che controllare se tpedit la stringa’’ è presente nel URL come parametro. Questo parametro viene utilizzato da Transposh per abilitare la modalità di modifica per le traduzioni: quando si utilizza il widget e controllare 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 reindirizziamo il browser a questo URL (cioè ricarichiamo la pagina di rimuovere il param ‘tpedit’); altrimenti, costruiamo il nuovo URL aggiungendo il parametro 'tpedit=1’ e ricaricare 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 pensando a un nome più carino 🙂

Ora non resta che caricare il file nella nostra cartella del tema, 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 cosa è un tema bambino si può 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, //completo percorso del file
        Vettore('Jquery'), //array di dipendenze
        '', //numero della versione
        true // put script nel piè di pagina
    ); 
}
add_action( '' wp_enqueue_scripts, 'Load_custom_javascript' );

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

Infine, Ce l'abbiamo!

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