Riassunto AI
Vuoi localizzare le stringhe del Date Picker nel campo Data/Ora di WPForms? La lingua predefinita del Date Picker è l'inglese. Tuttavia, con una libreria JavaScript di terze parti, puoi tradurre le stringhe del Date Picker in altre lingue supportate.
In questo tutorial, ti guideremo attraverso le basi della localizzazione delle stringhe del Date Picker utilizzando JavaScript.
Comprendere il funzionamento del Date Picker di WPForms
WPForms utilizza lo script di data Flatpickr per generare il suo Date Picker. Flatpickr costruisce il date picker utilizzando JavaScript. Con oltre 25 lingue disponibili, Flatpickr offre un ampio supporto linguistico, rendendo facile localizzare le stringhe del Date Picker.
Localizzazione delle stringhe del Date Picker
La localizzazione ti consente di adattare il tuo sito WordPress e i suoi plugin a diverse lingue, garantendo un'esperienza fluida per gli utenti di tutto il mondo. Di seguito, copriremo i passaggi per tradurre le stringhe del Date Picker in WPForms.
1. Trovare l'URL e il codice della lingua
Per trovare l'URL della lingua di cui avrai bisogno per questo snippet, naviga nel Repository GitHub di Flatpickr e individua il file della lingua corrispondente alla tua lingua preferita, ad esempio es per lo spagnolo o fr per il francese. Una volta trovato il file della lingua appropriato, costruisci un URL utilizzando il seguente formato:
https://npmcdn.com/[email protected]/dist/l10n/{language_code}.js
Sostituisci {language_code} con il codice della lingua scelta. Ad esempio, se stai localizzando in francese, il tuo URL sarebbe:
https://npmcdn.com/[email protected]/dist/l10n/fr.js
Questo URL fornirà il file JavaScript necessario contenente le stringhe del Date Picker localizzate per la lingua scelta.
Nota: Se il codice della tua lingua non è elencato nel Repository GitHub di Flatpickr, allora la tua lingua non è attualmente supportata.
2. Caricare la localizzazione del Date Picker
Dopo aver ottenuto l'URL per localizzare wpforms-datepicker-locale, il passo successivo è aggiungere il codice al tuo sito. Per questo, dovrai aggiungere alcuni snippet di codice JavaScript personalizzati al tuo sito.
Nota: Se hai bisogno di assistenza su come e dove aggiungere snippet personalizzati, consulta il nostro tutorial su come aggiungere snippet personalizzati in WordPress per una guida dettagliata.
Per questo tutorial, useremo il francese, quindi nello snippet qui sotto, noterai che stiamo accodando lo script https://npmcdn.com/[email protected]/dist/l10n/fr.js. Dovrai aggiornare lo script per corrispondere alla lingua che desideri localizzare.
Lo snippet sopra controlla se ci sono campi Data/Ora nei moduli sul tuo sito, e poi modifica la localizzazione predefinita del Date Picker di WPForms per corrispondere a quella specificata.
3. Applicare la localizzazione
Il secondo passo è applicare la localizzazione dei Date Picker alla pagina, cosa che viene fatta tramite JavaScript. Procedi ad aggiungere gli snippet di codice sottostanti al tuo sito.
Quando gli utenti apriranno il date picker nel tuo modulo, le stringhe saranno tradotte nella lingua specificata.
Aggiungere la logica condizionale (facoltativo)
Se stai usando il plugin WPML sul tuo sito, sarai in grado di caricare condizionalmente il modulo di localizzazione del date picker. In questo modo le stringhe del date picker cambieranno solo se l'utente sta visualizzando quella specifica localizzazione. L'esempio seguente applicherà la localizzazione solo se l'utente ha specificato che desidera visualizzare la versione spagnola della pagina (es).
Domande frequenti
Di seguito, abbiamo risposto ad alcune domande comuni sulla traduzione delle stringhe del Date Picker in WPForms.
D: Quando seleziono la data, perché non mostra il formato corretto?
R: Utilizzando questo snippet, localizzi solo il Mese e i Giorni nel date picker. Se desideri cambiare il formato di come appare la data, dai un'occhiata a questo tutorial invece.
Fatto! Hai localizzato con successo il testo per il Date Picker.
Vuoi personalizzare il campo modulo Data / Ora? Dai un'occhiata al nostro tutorial su Come personalizzare le opzioni data del campo Data Ora.