Configurar un selector de idioma en Craft CMS es una función crucial para cualquier sitio web que pretenda llegar a una audiencia global. En la era actual de la globalización, la capacidad de cambiar entre varios idiomas sin problemas es una necesidad apremiante.
Configurar un selector de idioma en Craft CMS mejora la accesibilidad para visitantes de diversos países, puede mejorar el posicionamiento en motores de búsqueda y puede generar confianza en la marca a nivel global. Aunque pueda parecer complejo, esta guía paso a paso te ayudará a hacerlo de forma fluida y eficiente en tu sitio web de Craft CMS .
Importancia de configurar un selector de idioma en Craft CMS
Antes de profundizar en cómo configurar un selector de idioma en Craft CMS, primero hablemos de la importancia de configurar un selector de idioma. Aquí tienes algunos de ellos.
- Mejor experiencia de usuario: Un selector de idioma permite a los visitantes acceder fácilmente al contenido en su idioma preferido, mejorando así su comprensión y su interacción con el sitio web.
- Reducir la tasa de rebote: Los visitantes que no encuentran el idioma que desean pueden abandonar tu sitio web de inmediato. Un selector de idioma que ofrece varios idiomas puede evitar que se vayan del sitio.
- Incrementar las conversiones: comprender los detalles del producto, las políticas y el proceso de compra en su propio idioma puede animar a los visitantes a comprar o a realizar otras acciones.
- Optimización del SEO multilingüe: Los motores de búsqueda consideran factores de experiencia de usuario al clasificar sitios web. Un selector de idioma fácil de usar puede mejorar tu SEO multilingüe al facilitar que los visitantes accedan al contenido en su idioma. Traducir correctamente el contenido también envía señales positivas a los motores de búsqueda de que tu sitio es relevante para diversas consultas en diferentes idiomas.
Cómo configurar un conmutador de idiomas en Craft CMS
Después de comprender la importancia de usar un conmutador de idioma en un sitio web multilingüe de Craft CMS , hablemos de cómo hacerlo. Normalmente, los servicios de traducción de sitios web ofrecen esta función, que se puede personalizar según tus necesidades.
Sin embargo, no todos los servicios de traducción ofrecen un selector de idioma que sea fácilmente personalizable y fácil de usar. Por lo tanto, es importante elegir un servicio de traducción automática compatible con diversos frameworks y que ofrezca una función de selector de idioma flexible.
Un servicio que cumple estos criterios es Linguise. Linguise ofrece una función de selector de idioma que es fácilmente personalizable y fácil de usar, y se puede integrar bien con Craft CMS.
Al utilizar la integración perfecta de Linguise con el framework Craft CMS , puedes añadir fácilmente un selector de idioma a tu aplicación multilingüe. Con las funciones avanzadas y la interfaz fácil de usar de Linguise, configurar y mantener un selector de idioma en tu sitio web Craft CMS será mucho más sencillo.
A continuación se muestran los pasos para instalar Linguise en un sitio web Craft CMS multilingüe y configurar el conmutador de idiomas.
#1: Regístrate para obtener una cuenta gratuita de Linguise
Durante toda la duración de la prueba, disfrutarás de acceso a todas las atractivas funciones que Linguise tiene para ofrecer. Se te dirigirá al panel de Linguise al concluir la prueba.
#2: Añadir dominio al sitio web Craft CMS
Una vez que se haya creado tu Linguise , se te dirigirá al panel de control para introducir el dominio de tu sitio web de Craft CMS . Selecciona «Añadir dominio» y completa los campos proporcionados:
- Cuenta
- URL
- Plataforma utilizada (Craft CMS)
- Idioma predeterminado
- Idiomas de traducción
- Traducir URLs
- Traducción dinámica de contenido
Puedes obtener la clave API, que deberás pegar en el paso siguiente.
#4: Subir el script de Linguise
A continuación, deberás subir el script de traducción Linguise a tu servidor donde está instalado Craft CMS .
Descarga el script de traducción PHP-JS, descomprímelo y súbelo al directorio raíz de tu instalación de Craft CMS .
Asegúrate de que el script se coloque en el directorio raíz de tu sitio web, donde se encuentran tus archivos de Craft CMS , y de que la carpeta mantenga su nombre original, «linguise»
Después, inserta la clave API Linguise en el archivo Configuration.php que subiste a tu servidor. Abre el archivo para editarlo y pega tu clave API entre las comillas, reemplazando el texto REPLACE_BY_YOUR_TOKEN.
#5: Habilitar y personalizar el selector de idioma
El enlace del script JS de Linguise debe incorporarse en todas las páginas de tu Craft CMS para mostrar el selector de idioma con banderas e incluir URL alternativas en los encabezados HTML para obtener beneficios SEO.
Para obtener el enlace del script, navega a la configuración de dominio dentro del panel de Linguise y copia el enlace del script proporcionado desde allí.
Una forma sencilla de incorporar este código en Craft CMS es añadirlo al índice de tu plantilla. Accede a la carpeta /template y edita el archivo index para incluir el enlace del script en la sección del encabezado.
Para mostrar el selector de idioma, representado por la ventana emergente de banderas para seleccionar el idioma deseado, puedes cargarlo copiando el código proporcionado al final de la configuración del sitio web y pegándolo en el head de tu página HTML. Esta acción habilitará la carga automática del selector de idioma de banderas.
El selector de idioma se mostrará inicialmente en su formato predeterminado, pero puedes personalizarlo. Personaliza el selector de idioma a través del panel de control de Linguise accediendo a Configuración > Visualización de banderas de idioma. Esta sección incluye varias opciones de personalización, como la visualización principal, los nombres de los idiomas y los elementos de diseño.
#6 Configurar la visualización principal
Para iniciar la configuración del conmutador de idiomas, vaya a la sección «Ajustes» > «Visualización de banderas de idioma» dentro del panel de Linguise .
En esta sección, puedes personalizar varios ajustes. En primer lugar, están los ajustes de visualización principales, donde puedes modificar varios elementos como.
- Estilo del icono de bandera: Puedes elegir entre visualización en paralelo, menú desplegable o ventana emergente.
- Posición: Esta configuración determina la ubicación del selector de idioma en su sitio web. Hay varias opciones de posición, así que asegúrese de seleccionar una que sea conveniente para que los visitantes accedan.
#7 Configurar el diseño de la bandera
Una vez que hayas ajustado la configuración de visualización principal, puedes proceder a personalizar el diseño de las banderas mostradas.
- Visualización del nombre del idioma: Puedes mostrar el nombre del idioma basándote en el nombre del país o en el propio idioma. Por ejemplo, puedes mostrar «French» o «Français».
- Tipo de bandera del inglés: Esta función beneficia a los idiomas con múltiples variaciones, como el inglés estadounidense o británico. También es aplicable al español, taiwanés, alemán y portugués.
- Estilo de la bandera: Esta opción te permite seleccionar la forma del icono de la bandera, ya sea redonda o rectangular.
#8 Establece el color y el tamaño
Una vez que hayas completado la configuración del diseño de la bandera, puedes proceder a personalizar el color y el tamaño de las banderas. A continuación se muestran algunos ajustes disponibles para modificar.
- Radio de borde de la bandera: Personaliza el radio de borde para el estilo de bandera rectangular, medido en píxeles.
- Color del nombre del idioma: Selecciona el color de texto predeterminado para mostrar el nombre.
- Color del idioma en la ventana emergente: Defina el color del texto del título del idioma en el área de la ventana emergente o del menú desplegable.
- Tamaño de la bandera: Modifica el tamaño de los iconos de las banderas.
- Color al pasar el cursor sobre el nombre del idioma: Especifica el color del texto que aparece cuando el usuario pasa el cursor sobre el nombre del idioma.
- Color al pasar el cursor sobre el idioma en la ventana emergente: Define el color del texto que aparece cuando el usuario pasa el cursor sobre el título del idioma en el área de la ventana emergente o del menú desplegable.
#9 Configurar la sombra de caja
Por último, puedes ajustar la configuración de la sombra del cuadro de banderas. La opción inicial te permite añadir un efecto de sombra a cada icono de bandera que se muestra en tu sitio web. La opción siguiente gestiona el efecto de sombra cuando los usuarios pasan el ratón por encima de las banderas de idioma.
Una vez que hayas realizado todos los ajustes necesarios, haz clic en el botón Guardar para aplicar los cambios de personalización. Luego, dirígete a tu sitio web de Craft CMS para confirmar que la configuración se ha aplicado correctamente. Así es aproximadamente cómo se mostrará el selector de idioma.
Después de finalizar el proceso de configuración, puedes observar la funcionalidad del selector de idioma en tu sitio web multilingüe de Craft CMS .
Luego traduciremos automáticamente el sitio web de Craft CMS a otros idiomas como el alemán.
5 consejos para optimizar el selector de idioma en Craft CMS
Una vez que hayas establecido el selector de idioma en tu sitio web multilingüe Craft CMS , es importante comprender las mejores prácticas para diseñar un selector de idioma y su rendimiento para beneficiar tanto a tu sitio como a los visitantes.
Utiliza un logotipo de bandera de idioma fácilmente reconocible
Utilizar iconos o banderas de idiomas universalmente reconocidos es crucial para que los visitantes puedan identificar y seleccionar rápidamente su opción de idioma preferida. Asegúrate de que los iconos o banderas utilizados sean claros, tengan un buen contraste de color y se entiendan ampliamente en diferentes culturas para evitar confusión o ambigüedad.
Los símbolos o iconos familiares ayudan a crear una experiencia intuitiva y fácil de usar, lo que permite a los visitantes navegar fácilmente a la versión de idioma que desean. Es muy importante elegir iconos o banderas que sean universalmente conocidos para evitar malentendidos o confusión.
Uso de nombres de idiomas y banderas
Además de utilizar únicamente banderas, es recomendable considerar la posibilidad de incorporar tanto las banderas como los nombres de los idiomas originales. Este enfoque puede ayudar a evitar confusiones, ya que algunos idiomas se hablan en varios países con banderas diferentes.
Utilizar directamente los nombres de los idiomas elimina la ambigüedad y garantiza que los visitantes puedan identificar y seleccionar claramente el idioma que desean sin malentendidos. Además, usar los nombres de los idiomas puede ser más inclusivo y respetuoso con la diversidad cultural.
Coloque el botón del selector de idioma de forma estratégica
Coloquemos el botón del selector de idioma en un área destacada y de fácil acceso en tu sitio web. Las ubicaciones estándar incluyen el encabezado, el pie de página o el menú de navegación principal. Estas ubicaciones son intuitivas para la mayoría de los usuarios de internet y se ajustan a sus expectativas cuando buscan opciones de idioma.
La ubicación consistente en todas las páginas garantiza que los visitantes puedan acceder fácilmente al selector de idioma independientemente de su punto de entrada o de la página específica que visiten. Esta ubicación consistente ayuda a crear una experiencia de usuario fluida y predecible.
Implementa un diseño de conmutador de idiomas adaptable
Asegúrate de que el botón del selector de idioma sea adaptable y funcione bien en diversos dispositivos y tamaños de pantalla, incluidos ordenadores de sobremesa, tabletas y smartphones. Pruébalo en diferentes dispositivos y resoluciones de pantalla para garantizar una experiencia de usuario fluida sin cortar ni superponer elementos.
Un diseño adaptable garantiza que los visitantes puedan acceder fácilmente a las opciones de idioma desde cualquier dispositivo que utilicen, mejorando la accesibilidad y la comodidad al cambiar de idioma.
Asegúrate de que el selector de idioma sea consistente en todas las páginas
Asegúrate de que el selector de idioma mantenga una apariencia y un comportamiento consistentes en todo tu sitio web. Los usuarios deben poder cambiar de idioma sin problemas, independientemente de la página en la que se encuentren o del contenido que estén viendo. La consistencia no solo proporciona una experiencia de usuario cohesionada, sino que también refuerza la accesibilidad y la disponibilidad de las opciones de idioma, generando confianza y seguridad en tu sitio web multilingüe.
Cualquier inconsistencia en el selector de idioma puede confundir y frustrar a los usuarios, lo que podría llevarlos a abandonar tu sitio web.
Configura el selector de idioma en Craft CMS con Linguise
En este punto, debes reconocer que estás configurando el selector de idioma para un sitio web multilingüe de Craft CMS . Establecer un selector de idioma puede proporcionar varias ventajas y se puede ajustar según los puntos mencionados anteriormente.
Optimizar el conmutador de idiomas puede mejorar significativamente la experiencia general del usuario. A continuación, regístrate para obtener una cuenta de Linguise , intégrala con tu sitio web de Craft CMS y ajusta el conmutador de idiomas para mejorar aún más la experiencia del usuario.
