Cómo añadir un selector de idioma en WordPress

¿Estás pensando en añadir un selector de idioma a tu sitio web de WordPress? Si es así, ¡sigue leyendo!

Añadir un selector de idioma a tu web de WordPress y traducir tu contenido para que los visitantes lo lean en su propio idioma puede ayudarte a dirigirte a nuevos mercados, aumentar el rendimiento de tu estrategia de SEO y tu visibilidad online y contribuir a generar confianza entre tus clientes potenciales.

Para aprovechar todos los beneficios (incluido un alto retorno de la inversión) es fundamental que los visitantes puedan cambiar fácilmente de idioma en tu sitio web con un selector de idioma fácil de encontrar, bien diseñado y de uso intuitivo.

En este articulo vamos a explicarte paso a paso cómo añadir un selector de idioma de WordPress a tu sitio web y cómo personalizarlo para que se adapte al diseño de tu web.

Tutorial: cómo añadir un selector de idioma en WordPress con Weglot

Añadir un selector de idioma en WordPress es sencillo y rápido gracias a Weglot, el plugin de traducción para WordPress. 

Con Weglot puedes añadir varios idiomas a tu sitio web en menos de 5 minutos y personalizar el diseño sin necesidad de código. 

Y puedes poner un selector de idioma en varios lugares de tu sitio web, tanto en el menú, en un widget o en el código fuente de tu página HTML. 

En este tutorial añadiremos un selector de idioma a la navegación de tu sitio web. Por defecto, Weglot añade el selector de idioma en la parte inferior izquierda de tu sitio. A continuación, te mostraremos cómo moverlo desde la configuración o mediante el editor visual del selector de idioma de Weglot. 

Paso n.º 1

Instala y activa el plugin de Weglot en tu sitio web de WordPress. A continuación, crea una cuenta en Weglot, donde gestionarás y editarás tus traducciones y obtendrás tu clave API única para la integración.

‍

Paso n.º 2 

Haz clic en la pestaña de Weglot en tu panel de control de WordPress y añade tu clave API, selecciona el idioma original de tu sitio web y el idioma o los idiomas que quieras añadir, y haz clic en Guardar. 

Paso n.º 3

¡Tu sitio web de WordPress ya es multilingüe! Weglot ha detectado automáticamente el contenido de tu web, lo ha traducido utilizando una primera versión de traducción automática y lo ha publicado en subdirectorios de idiomas.

Echa un vistazo a la interfaz de usuario de tu sitio web de WordPress y verás un nuevo selector de idioma en la esquina inferior derecha.

Al hacer clic en él, se abrirá para mostrar los idiomas disponibles y te dejará elegir la traducción que prefieras ver.

Este es el diseño predeterminado del selector de idioma de Weglot, y ahora puedes personalizar la apariencia y la ubicación de varias formas.

Cómo personalizar el selector de idioma de WordPress

Para empezar a hacer personalizaciones básicas, dirígete a Weglot > Diseño del selector de idioma (Opcional) en el modo administrador de WordPress. En esta pantalla, puedes elegir: 

• Si utilizas un menú desplegable.
• Si utilizas banderas en tu selector, y el tipo.
• Si muestras los nombres de tus idiomas.
• Si muestras solo el código del idioma.

‍

También hay una sección para sobrescribir el CSS y sustituirlo por tus propios selectores personalizados; hablaremos de esto en un segundo. Por ahora, vamos a personalizar el selector de idioma para que muestre los nombres de los idiomas sin banderas, pero manteniendo el menú desplegable.

Para ello, deselecciona “Con banderas” y selecciona “Es nombre completo”, luego echa un vistazo a tu sitio web:

‍

También es posible que quieras realizar algunas personalizaciones avanzadas. Por ejemplo, vamos a mostrar el selector de idioma en la navegación.

Hay varias formas de hacerlo, ya sea en un menú, un widget, utilizando un fragmento de código o con HTML. Y no necesitas saber PHP ni acceder a tus plantillas principales, por lo que puedes hacer las tareas de las que normalmente se ocuparía un programador incluso si no tienes muchos conocimientos.

Regresa a la pantalla de Weglot en el panel de control de WordPress y desplázate por la página hasta que veas las opciones para mostrar el selector de idioma:

‍

Solo tienes que seguir las instrucciones dependiendo de dónde quieras que vaya el selector de idioma. En este caso, iremos a “Apariencia -> menú” y arrastraremos y soltaremos el selector para cambiar el orden de los elementos del menú.  

Después de hacerlo y guardar los cambios, echa un vistazo a la interfaz de usuario:

Aunque el selector de idioma está dentro de la cabecera, no se muestra de la forma correcta. Además, también podrías utilizar códigos de idioma en línea, en lugar de un menú desplegable.

Aquí es donde utilizas CSS. Primero, desactiva la configuración del desplegable dentro del menú de Weglot en WordPress. Después, selecciona la casilla para mostrar los códigos de idioma.

Desde aquí puedes utilizar el área de texto Sobrescribir CSS para configurar el selector con tu fuente, color y peso (grosor) del texto, de modo que se ajuste al diseño de tu sitio web:

Por último, echa un vistazo al diseño en la interfaz de usuario:

Con la colocación adecuada y unas cuantas líneas de CSS, puedes personalizar rápida y fácilmente el selector de idioma de Weglot para que se adapte a tu web, sin necesidad de tener un conocimiento experto de edición de plantillas, HTML o PHP. 

Además, las modificaciones de CSS personalizadas son totalmente opcionales. Puedes mover y cambiar el diseño a través de las opciones disponibles en Weglot desde tu panel de control de WordPress. 

Y también puedes utilizar el Editor visual del selector de idioma de Weglot si prefieres hacer las cosas de forma más visual: 

El Editor visual del selector de idioma te permite realizar los mismos cambios que puedes hacer desde el panel de control de WordPress. Solo tienes que arrastrar el selector a la posición en la que quieras que aparezca y hacer clic en “Guardar” para que los cambios se apliquen en tu sitio web. 

Mejores prácticas para mostrar un selector de idioma en WordPress

Los selectores de idioma a menudo pertenecen a una de estas categorías:

• Inexistente: en otras palabras, el sitio web no ofrece ninguna traducción.
• Difícil de encontrar: el selector de idioma puede estar oculto en la navegación o en algún otro lugar, lo que hace que el visitante tenga que jugar al escondite.
• Fácil de encontrar: en este caso, el visitante puede encontrar fácilmente el selector de idioma de WordPress en un lugar claro y relevante, como la cabecera o el pie de página.
• Muy fácil de encontrar: el selector de idioma de WordPress se encuentra en un lugar destacado de la pantalla y el visitante puede elegir el idioma deseado rápidamente

Es crucial que facilites que los visitantes de tu sitio web puedan elegir su idioma preferido. Lo ideal sería que pudieras hacerlo sin necesidad de utilizar complementos. Teniendo esto en cuenta, considera lo siguiente:

1. Elige tus idiomas con cuidado: el hecho de que puedas activar todos los idiomas no significa que debas hacerlo; activa solo los idiomas que necesites. 
2. Haz que tu selector de idioma sea fácil de encontrar: es una buena idea colocar tu selector de idioma en la cabecera o en el pie de página, ambas ubicaciones son estupendas. En los dispositivos móviles, los selectores de idioma suelen estar en el menú de navegación principal.
3. Adapta el selector de idioma de WordPress a tu diseño: aunque puede ser tentador quedarse con el selector de idioma genérico que se proporciona, personalizarlo para que se adapte al diseño de tu sitio web es una gran idea.
4. Selecciona banderas o nombres para los idiomas que elijas: aunque las banderas son atractivas para los diseñadores por muchas razones (son coloridas, icónicas y ocupan poco espacio), no están diseñadas para representar idiomas. Esto plantea varios problemas.

3 ejemplos de selectores de idiomas acertados

A menudo encontrarás selectores de idioma mientras navegas por la web. Pero si nunca cambias de idioma, es muy probable que no seas consciente de lo diversos que pueden ser en cuanto a su diseño y ubicación en la página. Veamos algunos buenos ejemplos de selectores de idioma.

1. Microsoft Translator

El sitio web de Microsoft Translator permite a los visitantes elegir entre casi 40 idiomas mediante un menú desplegable situado cerca del pie de página. También han optado por mostrar el nombre completo de cada idioma utilizando la lengua nativa. Esto permite a los visitantes reconocer su idioma fácilmente, y garantiza que las opciones de cambio de idioma sean claras.

Nos gusta que también puedas elegir visitar una versión regional de la web como opción independiente. Con demasiada frecuencia, las grandes marcas hacen que elegir un idioma sea difícil y los visitantes se ven obligados a cambiar de región.

2. Etsy

Etsy es un portal internacional en el que las personas creativas pueden vender sus productos hechos a mano, por lo que no es de extrañar que ofrezca un selector de idioma bien diseñado. Puedes encontrarlo en el pie de página de todas las páginas de su sitio web.

Puedes elegir una región, un idioma y una moneda. Al hacer clic en el selector de idioma aparece una ventana en la que puedes cambiar cada una de estas opciones. Se trata de un diseño ingenioso e intuitivo que permite elegir un idioma sin tener que ser redirigido a una versión regional del sitio web.

3. Evernote

La popular aplicación para tomar notas Evernote utiliza un menú desplegable sencillo en el pie de página para cambiar de idioma.

Es fácil de encontrar y dice lo que es de forma clara: “Choose a language” (elige un idioma). Así, si haces clic, sabrás lo que vas a ver.

Y es que a veces no necesitas selectores de idioma complicados. Al fin y al cabo, si el visitante tiene problemas para cambiar de idioma puede abandonar tu web.

Tú también puedes tener un selector de idioma de WordPress bien diseñado

Añadir un selector de idioma de WordPress a tu sitio web puede ser sencillo con las herramientas adecuadas. Con Weglot no solo puedes añadir un selector de idioma automáticamente, sino que también puedes cambiar su diseño sin la ayuda de un programador. 

Además, Weglot te ofrece una primera versión de traducción automática que luego puedes editar por tu cuenta, colaborando con tu equipo o encargando las traducciones a profesionales de la traducción. 

Elige un plugin de traducción para WordPress que también se haya creado pensando en el SEO multilingüe, y que se ocupe de crear subdirectorios, traducir los metadatos, implementar las etiquetas hreflang automáticamente ¡y mucho más! 

¿Quieres añadir un selector de idioma a tu sitio web de WordPress? Prueba Weglot gratis durante 10 días (no necesitas tarjeta de crédito).