Configurar un selector de idiomas en Kirby CMS es una función importante para facilitar la interacción con tu sitio web a visitantes extranjeros. La posibilidad de cambiar fácilmente entre diferentes idiomas se ha convertido en un requisito esencial para muchas plataformas en línea.
Al configurar un selector de idioma en Kirby CMS, puede aumentar significativamente la accesibilidad de su sitio para visitantes internacionales, potencialmente mejorar el rendimiento del motor de búsqueda y aumentar la confianza global en su marca. Aunque el proceso puede parecer desalentador inicialmente, esta guía lo llevará a través de los pasos para implementar esta función de manera eficiente en su sitio web de Kirby CMS, asegurando una experiencia multilingüe suave y fácil de usar.
Importancia de configurar un selector de idioma en Kirby CMS
Implementar un conmutador de idioma en Kirby CMS es más que una simple característica: es una decisión estratégica que puede impactar significativamente el rendimiento y alcance de su sitio web. Exploremos las razones clave por las que configurar un conmutador de idioma en su sitio web Kirby CMS.
- Mejorando la experiencia del usuario: Un conmutador de idioma permite a los visitantes acceder al contenido en su idioma preferido, mejorando significativamente su comprensión y compromiso con el sitio web.
- Reduciendo las tasas de rebote: Los visitantes que no pueden encontrar contenido en su idioma probablemente se irán rápidamente. Ofrecer múltiples opciones de idioma anima a los usuarios a explorar el sitio más a fondo.
- Aumentar las tasas de conversión: cuando los usuarios pueden comprender los detalles del producto, las políticas y los procesos de compra en su idioma nativo, están más inclinados a comprar o realizar las acciones deseadas.
- Fortalecimiento del SEO multilingüe: Los motores de búsqueda tienen en cuenta la experiencia del usuario al posicionar sitios web. Un selector de idiomas intuitivo puede mejorar el rendimiento de tu SEO multilingüe al facilitar el acceso a contenido en varios idiomas.
Cómo configurar un selector de idioma en Kirby CMS
Ahora que hemos explorado la importancia de implementar un conmutador de idioma en un sitio web multilingüe de Kirby CMS, profundicemos en los aspectos prácticos de configurarlo. Si bien muchos servicios de traducción de sitios web ofrecen esta función, encontrar uno que proporcione un conmutador de idioma altamente personalizable y fácil de usar puede ser un desafío.
Es fundamental seleccionar un servicio de traducción automática que no solo sea compatible con diversos frameworks, sino que también ofrezca una función flexible de cambio de idioma. Un servicio que destaca por cumplir con estos requisitos es el sitio web de traducción automática Linguise . Su cambio de idioma es conocido por su facilidad de personalización y su interfaz intuitiva, lo que lo convierte en una excelente opción para la integración con Kirby CMS.
Al integrar Linguise sin problemas en su CMS Kirby, podrá añadir fácilmente un selector de idiomas a su aplicación multilingüe. Las funciones avanzadas y la interfaz intuitiva de Linguisesimplifican la configuración y el mantenimiento de un selector de idiomas en su sitio web de Kirby CMS.
Sigamos los pasos para instalar Linguise en un sitio web multilingüe de Kirby CMS y configurar el conmutador de idioma.
Paso 1: Registre su cuenta de Linguise
Comience preparando su sitio web de Kirby CMS para la traducción, lo que requiere acceso al panel de administración de Kirby CMS. Luego, cree una cuenta gratuita de Linguise y agregue el dominio de su sitio web. Puede aprovechar el período de prueba gratuito de 30 días antes de seleccionar un plan de suscripción.
Paso 2: Agregue el dominio de su sitio web de Kirby CMS
Una vez que su cuenta de Linguise esté configurada, vaya al panel de control y agregue el dominio de su sitio web Kirby CMS. Haga clic en “Agregar dominio” y proporcione los siguientes detalles:
- Cuenta
- URL
- Plataforma (Kirby CMS)
- Idioma predeterminado
- Idiomas de traducción
- Traducir URL
- Traducción de contenido dinámico
Paso 3: Cargue y conecte el script Linguise
Descargue el script de traducción Linguise y cárguelo en la carpeta raíz de su instalación de Kirby CMS.
Descomprima el script y asegúrese de que la carpeta llamada “linguise” permanezca en el nivel raíz de su sitio web.
A continuación, copie la clave API de Linguise en el archivo `Configuration.php` en su servidor. Abra el archivo, reemplace `REPLACE_BY_YOUR_TOKEN` con su clave API y guarde los cambios.
Paso 4: Configure la reescritura de URL para Kirby CMS
Kirby CMS tiene la reescritura de URL habilitada de forma predeterminada. Si no está activo, puede habilitarlo a través de su proveedor de hosting.
Para configurar las URL por idioma, agregue el siguiente código a su archivo `.htaccess` justo después de la línea `RewriteEngine on` en el archivo `.htaccess` predeterminado de Kirby CMS.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-cn|zh-tw|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu|zz-zz)(?:$|/)(.*)$ linguise/linguise.php?linguise_language=$1&original_url=$2 [L,QSA]
</IfModule>
Paso 5: Activar y personalizar el selector de idioma
Para mostrar el selector de idioma con banderas y URL alternativas para fines de SEO, el enlace JavaScript de Linguise debe cargarse en todas las páginas de Kirby CMS.
Obtenga el enlace del script desde la configuración del dominio en el panel Linguise y cópielo.
La forma más fácil de cargar este script en Kirby CMS es agregarlo al header.php de su sitio web o<head> Sección. Aquí te explicamos cómo hacerlo:
- Acceda a la carpeta raíz de su sitio web.
- Vaya a sitio > fragmentos > header.php.
- Edite el archivo header.php para incluir el enlace del script en la sección del encabezado.
El selector de idiomas se mostrará inicialmente en su formato predeterminado. Sin embargo, puede personalizarlo desde el Linguise , accediendo a Configuración > Visualización de indicadores de idioma. Esta sección ofrece varias opciones de personalización, como la configuración de la pantalla principal, los nombres de los idiomas y los elementos de diseño.
Paso 6: Configurar la pantalla principal
Para comenzar a configurar el selector de idioma, navegue hasta Configuración > Visualización de banderas de idioma en el panel de control de Linguise .
En esta sección, puedes ajustar varias configuraciones. La configuración de pantalla principal te permite personalizar elementos como...
- Estilo de icono de bandera: Elija entre una visualización lado a lado, menú desplegable o ventana emergente.
- Posición: Determine la ubicación del selector de idioma en su sitio web. Elija una posición que sea fácilmente accesible para los visitantes.
Paso 7: Establecer el diseño de la bandera
Después de configurar los ajustes principales de visualización, personalice el diseño de las banderas mostradas.
- Mostrar nombre de idioma: Elija mostrar el nombre del idioma según el país o el idioma en sí, como “Francés” o “Français.”
- Tipo de bandera inglesa: Esto es útil para idiomas con múltiples variaciones, como el inglés estadounidense o británico, y también es aplicable al español, taiwanés, alemán y portugués.
- Estilo de bandera: seleccione la forma del ícono de la bandera, ya sea redonda o rectangular.
Paso 8: Establecer el color y el tamaño
Después de configurar el diseño de la bandera, personalice el color y el tamaño de las banderas. Aquí hay algunos ajustes que puede realizar.
- Radio del borde de la bandera: ajusta el radio del borde para banderas rectangulares, medido en píxeles.
- Color del nombre del idioma: Elija el color de texto predeterminado para mostrar el nombre del idioma.
- Color del idioma emergente: Establezca el color para el texto del título del idioma en el área emergente o desplegable.
- Tamaño de la bandera: Ajuste el tamaño de los iconos de bandera.
- Color del nombre del idioma al pasar el ratón: Especifique el color del texto que aparece cuando el usuario pasa el ratón sobre el nombre del idioma.
- Color al pasar el mouse sobre el idioma de la ventana emergente: define el color del texto que aparece cuando el usuario pasa el mouse sobre el título del idioma en el área emergente o desplegable.
Paso 9: Configurar sombra de caja
Finalmente, ajuste la configuración de sombra de la caja de la bandera. La primera opción le permite agregar un efecto de sombra a cada icono de bandera mostrado en su sitio web. La segunda opción controla el efecto de sombra cuando los usuarios pasan el cursor sobre las banderas de idioma.
Después de realizar los ajustes necesarios, haga clic en el botón Guardar para aplicar los cambios. Luego, verifique su sitio web de Kirby CMS para asegurarse de que la configuración se haya implementado correctamente. Esto le mostrará cómo aparecerá el conmutador de idioma.
Una vez completado el proceso de configuración, podrá ver el selector de idioma en acción en su sitio web multilingüe de Kirby CMS.
Luego traduciremos automáticamente el sitio web de Kirby CMS a otros idiomas, como el francés.
4 consejos para optimizar el selector de idiomas en Kirby CMS
Aquí hay cuatro consejos esenciales para ayudarle a perfeccionar su selector de idiomas y hacerlo más efectivo para su audiencia global.
#1 Utilice un icono de bandera de idioma claramente identificable
Incorporar símbolos de idioma fácilmente reconocibles o banderas en su conmutador de idioma es vital para una identificación rápida del idioma. Este enfoque permite a los visitantes localizar y seleccionar rápidamente su idioma preferido, creando una experiencia de usuario intuitiva. La clave es elegir indicadores universalmente entendidos para evitar cualquier mala interpretación.
Al implementar íconos de banderas, asegúrese de que sean de alta calidad y fáciles de distinguir, incluso en tamaños pequeños. Considere usar una combinación de banderas y códigos de idioma para proporcionar pistas visuales y textuales a sus usuarios.
Ejemplo:
Imagine un blog de viajes basado en Kirby que cubre destinos en todo el mundo. El conmutador de idioma del sitio podría usar un icono de globo junto con pequeños iconos de banderas y códigos de idioma de dos letras.
🌎 🇺🇸 EN | 🇪🇸 ES | 🇫🇷 FR | 🇩🇪 DE | 🇯🇵 JP
Esta configuración permite a los usuarios identificar rápidamente su idioma, ya sea que reconozcan la bandera o el código de idioma, mejorando la experiencia general del usuario.
#2 Mostrar los nombres de los idiomas junto con las banderas
Si bien las banderas ofrecen una referencia visual rápida, combinarlas con los nombres de los idiomas nativos ofrece mayor claridad. Esta estrategia ayuda a evitar confusiones, especialmente en el caso de idiomas hablados en varios países con diferentes banderas.
Al incluir los nombres de los idiomas, se elimina la ambigüedad y se garantiza que los visitantes puedan identificar con precisión su idioma preferido. Este enfoque también demuestra respeto por la diversidad cultural y promueve la inclusión.
Ejemplo:
Considere una plataforma educativa impulsada por Kirby que ofrece cursos en múltiples idiomas. Su selector de idioma podría verse así.
🇺🇸 Inglés | 🇪🇸 Español | 🇫🇷 Francés | 🇩🇪 Alemán | 🇯🇵 Japonés
Este diseño permite a los usuarios ver tanto la bandera como el nombre del idioma en su escritura nativa, lo que facilita su reconocimiento inmediato. Es especialmente útil para idiomas como el español o el inglés, que se hablan en varios países con diferentes banderas.
#3 Posicione el botón del selector de idioma de manera reflexiva
La ubicación de su selector de idioma es crucial para su efectividad. Debe ser prominente y fácilmente accesible en su sitio web. Posiciones comunes y efectivas incluyen el encabezado, pie de página o menú de navegación principal.
Asegúrese de que el selector de idioma sea visible y fácilmente accesible desde cualquier página de su sitio. Esta consistencia en la ubicación ayuda a los usuarios a encontrar rápidamente las opciones de idioma, independientemente de su ubicación actual dentro de su sitio web.
Ejemplo:
Por ejemplo, un sitio web de cartera basado en Kirby para una empresa de arquitectura multinacional. Podrían implementar su selector de idioma de la siguiente manera.
- Ubicación del encabezado: El selector de idioma está ubicado en la esquina superior derecha del encabezado, junto al icono de búsqueda.
- Navegación fija: A medida que los usuarios se desplazan, el encabezado permanece fijo en la parte superior, lo que garantiza que el selector de idioma sea siempre accesible.
- Optimización para móviles: En dispositivos móviles, el selector de idioma se incluye en el menú de hamburguesa para un acceso fácil sin saturar la pequeña pantalla.
Esta ubicación estratégica garantiza que los usuarios puedan cambiar de idioma fácilmente en cualquier momento, ya sea que estén viendo galerías de proyectos, leyendo sobre la historia de la empresa o verificando información de contacto.
#4 Mantener la coherencia del selector de idioma en todas las páginas
Es esencial mantener la apariencia y funcionalidad de su selector de idioma uniforme en todo su sitio web. Los usuarios deben poder cambiar de idioma sin esfuerzo, independientemente de la página actual o el contenido que estén viendo.
Esta consistencia proporciona una experiencia de usuario fluida y refuerza la accesibilidad de las opciones de idioma, generando confianza en su sitio web multilingüe.
Ejemplo:
Imagine un sitio de comercio electrónico con tecnología Kirby que vende productos a nivel mundial. Aquí le mostramos cómo implementar una estrategia consistente de cambio de idioma.
- Diseño uniforme: El selector de idioma aparece como un menú desplegable etiquetado como “Idioma” en la esquina superior derecha de cada página, incluidas las listas de productos, las páginas de productos individuales y las páginas de pago.
- Conservación del contenido: Al cambiar de idioma, los usuarios permanecen en la misma página, pero el contenido se muestra en el nuevo idioma seleccionado. Por ejemplo, si un usuario ve la descripción de un jarrón artesanal en inglés y cambia al francés, verá los mismos detalles del producto en francés.
- Estructura de la URL: La estructura de la URL cambia constantemente al cambiar de idioma.
Inglés: www.yourmarket.com/productos/florero-cerámica-azul
Francés: www.yourmarket.com/fr/productos/florero-cerámica-azul
Esta experiencia consistente en todas las páginas garantiza que los usuarios puedan navegar y comprar con confianza en su idioma preferido, lo que aumenta potencialmente su probabilidad de completar una compra y regresar al sitio en el futuro.
Configure un selector de idioma en su sitio web Kirby con Linguise!
Configurar un selector de idioma en Kirby CMS es un paso crucial hacia la creación de un sitio web verdaderamente global y fácil de usar. Al implementar esta función, abre sus puertas digitales a una audiencia internacional diversa, lo que potencialmente aumenta la participación, reduce las tasas de rebote y mejora el rendimiento general de su sitio.
Para agilizar este proceso y garantizar resultados óptimos, considere usar Linguise para su sitio web Kirby CMS. Linguise ofrece un selector de idioma potente y personalizable que se integra perfectamente con Kirby CMS, lo que le permite implementar y ajustar fácilmente su estrategia multilingüe. Vamos a crear una cuenta de Linguise, integrarla con su sitio web Kirby CMS y personalizar el selector de idioma para mejorar aún más la experiencia del usuario.
