Resumen de IA
¿Te gustaría localizar las cadenas del selector de fechas dentro del campo Fecha/Hora de WPForms? El idioma predeterminado del selector de fechas es el inglés. Sin embargo, con una biblioteca JavaScript de terceros, puedes traducir las cadenas del selector de fechas a otros idiomas admitidos.
En este tutorial, te guiaremos a través de los fundamentos de la localización de cadenas del selector de fechas utilizando JavaScript.
Comprender cómo funciona el selector de fechas de WPForms
WPForms utiliza el script de fecha Flatpickr para generar su selector de fechas. Flatpickr construye el selector de fechas utilizando JavaScript. Con más de 25 idiomas disponibles, Flatpickr ofrece un amplio soporte de idiomas, lo que facilita la localización de las cadenas del selector de fechas.
Localizar las cadenas del selector de fechas
La localización te permite adaptar tu sitio de WordPress y sus complementos a diferentes idiomas, garantizando una experiencia fluida para los usuarios de todo el mundo. A continuación, cubriremos los pasos para traducir las cadenas del selector de fechas en WPForms.
1. Encontrar la URL y el código de idioma
Para encontrar la URL del idioma que necesitarás para este fragmento, navega al Repositorio de GitHub de Flatpickr y localiza el archivo de idioma correspondiente a tu idioma preferido, como es para español o fr para francés. Una vez que hayas encontrado el archivo de idioma apropiado, construye una URL utilizando el siguiente formato:
https://npmcdn.com/[email protected]/dist/l10n/{language_code}.js
Reemplaza {language_code} con el código de tu idioma elegido. Por ejemplo, si estás localizando al francés, tu URL sería:
https://npmcdn.com/[email protected]/dist/l10n/fr.js
Esta URL proporcionará el archivo JavaScript necesario que contiene las cadenas localizadas del selector de fechas para tu idioma elegido.
Nota: Si tu código de idioma no aparece en el Repositorio de GitHub de Flatpickr, entonces tu idioma no es compatible actualmente.
2. Cargar la configuración regional del selector de fechas
Después de obtener la URL para localizar la configuración regional de wpforms-datepicker-locale, el siguiente paso es añadir el código a tu sitio. Para ello, necesitarás añadir algunos fragmentos de JavaScript personalizados a tu sitio.
Nota: Si necesitas ayuda sobre cómo y dónde añadir fragmentos personalizados, consulta nuestro tutorial sobre cómo añadir fragmentos personalizados en WordPress para una guía detallada.
Para este tutorial, usaremos francés, por lo que en el fragmento de abajo, notarás que estamos encolando el script https://npmcdn.com/[email protected]/dist/l10n/fr.js. Necesitarás actualizar el script para que coincida con el idioma que deseas localizar.
El fragmento anterior comprueba si hay algún campo de Fecha/Hora en los formularios de tu sitio y luego modifica la configuración regional predeterminada del selector de fechas de WPForms para que coincida con la que especificaste.
3. Aplicar la localización
El segundo paso es aplicar la localización de los Selectores de Fecha a la página, lo cual se hace a través de JavaScript. Continúa agregando los fragmentos de código a continuación en tu sitio.
Cuando los usuarios abran el selector de fecha en tu formulario, los textos se traducirán al idioma que hayas especificado.
Añadir Lógica Condicional (opcional)
Si estás utilizando el plugin WPML en tu sitio, podrás cargar condicionalmente el módulo de localización del selector de fecha. De esta manera, los textos del selector de fecha solo cambiarán si el usuario está viendo esa localización específica. El ejemplo a continuación solo aplicará la localización si el usuario ha especificado que desea ver la versión en español de la página (es).
Preguntas frecuentes
A continuación, hemos respondido a algunas preguntas comunes sobre la traducción de los textos del Selector de Fecha en WPForms.
P: Cuando selecciono la fecha, ¿por qué no muestra el formato correcto?
R: Al usar este fragmento, solo localizas el Mes y los Días en el selector de fecha. Si deseas cambiar el formato en que aparece la fecha, por favor, consulta este tutorial en su lugar.
¡Eso es todo! Has localizado con éxito el texto para el Selector de Fecha.
¿Te gustaría personalizar el campo de formulario Fecha / Hora? Echa un vistazo a nuestro tutorial sobre Cómo Personalizar las Opciones de Fecha del Campo Fecha y Hora.