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 sitio de WordPress y traducir tu contenido para que los visitantes puedan leerlo en su propio idioma puede ayudarte a llegar a nuevos mercados, ofrecerte mayores oportunidades de SEO y visibilidad online, y ayudarte a ganarte la confianza de nuevas audiencias. ¿No sabes qué plugin usar? Echa un vistazo a nuestra comparativa de sobre los mejores plugins multilingües de WordPress de .

Con Weglot, puedes añadir varios idiomas a tu sitio de WordPress o a WooCommerce en menos de 5 minutos, sin necesidad de programar.

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

Un selector de idioma de WordPress es un elemento de navegación que permite a los visitantes elegir su idioma preferido y cambiar entre las versiones traducidas de tu sitio web. Puedes añadir uno a cualquier sitio de WordPress instalando un plugin de traducción, seleccionando los idiomas y colocando el selector en el menú, en el área de widgets o en una página mediante un código corto.

Con Weglot, unplugin de traducción « » para WordPress basado en IA, puedes añadir varios idiomas a tu sitio web en 5 minutos y personalizar el diseño sin necesidad de programar. La misma configuración funciona en WooCommerce : el selector aparece y se comporta exactamente igual, tanto si tienes un sitio web estándar de WordPress como una WooCommerce .

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 1: Instala y activa el Weglot

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

Paso 2: Conecta Weglot selecciona tus idiomas

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 3: Comprueba tu sitio web y el selector de idioma

¡Tu sitio web de WordPress ya es multilingüe! Weglot detectado automáticamente el contenido de tu sitio, lo ha traducido mediante IA y lo ha mostrado en subdirectorios por idioma.

Echa un vistazo a la interfaz de tu sitio y verás un nuevo selector de idioma de WordPress 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:

‍

Es posible que también quieras realizar algunas personalizaciones avanzadas. Por ejemplo, mostremos el selector de idioma en el menú de navegación o en la barra lateral.

Opciones de ubicación del selector de idioma

Hay varias formas de hacerlo: en un menú, como widget, mediante un código corto, con HTML o como un botón flotante que permanece en la esquina de la pantalla mientras el usuario se desplaza. También puedes colocar el selector directamente dentro del contenido de una entrada o página utilizando el código corto [weglot]: pégalo en el editor de tu página donde quieras que aparezca. El selector Weglot funciona con todos los temas de WordPress, incluidos los temas FSE y los temas de bloques.

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.

Estilo avanzado del selector de idioma

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.
• Es difícil de encontrar. El selector de idioma puede estar oculto en la navegación o en algún otro lugar, lo que obliga al usuario a jugar al escondite y proporciona una experiencia de usuario terrible.
• 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

Por ello, es crucial que facilites a los visitantes de tu sitio web la elección de su idioma preferido y que ofrezcas una experiencia fácil de usar a los visitantes internacionales de tu sitio web. En un mundo ideal, deberías poder hacerlo sin necesidad de complementos. Teniendo esto en cuenta, considera lo siguiente:

1. Elige cuidadosamente las opciones de idiomas. Que puedas activar todos los idiomas no significa que debas hacerlo; sólo debes procurar activar 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 de Microsoft Translator permite a los visitantes elegir entre casi 40 idiomas mediante un desplegable (o, en este caso, un "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 de un vistazo y garantiza que las opciones de cambio de idioma sean claras.

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 aquí, aparece una ventana emergente en la que puedes modificar cada una de estas opciones: un enfoque sencillo que evita que los usuarios tengan que ir a una página regional.

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 tiene un etiquetado claro, lo que demuestra que incluso un dispositivo básico puede ofrecer una experiencia clara y fluida.

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

Añadir un selector de idiomas de WordPress a tu sitio web es muy sencillo con las herramientas adecuadas. Con Weglot, obtienes un selector de idiomas que se añade automáticamente, traducción completa mediante IA desde el primer día y control total de la edición, sin necesidad de un desarrollador. La herramienta de traducción funciona en segundo plano, manteniendo tus traducciones actualizadas, fieles a tu marca y sin que tengas que hacer nada. También puedes activar el redireccionamiento automático desde tu Weglot : detecta el idioma del navegador del visitante y le muestra automáticamente la versión en el idioma correcto de tu sitio web.

Weglot también Weglot diseñado pensando en el SEO multilingüe. Crea automáticamente subdirectorios por idioma para cada versión traducida de tu sitio web. Añade etiquetas hreflang y traduce tus metadatos. Los motores de búsqueda pueden encontrar e indexar todas las versiones lingüísticas desde el primer día.

Elige un plugin de traducción para WordPress que también se haya creado pensando en el SEO multilingüe. Gracias a los subdirectorios de idioma creados automáticamente, los metadatos traducidos y la implementación de etiquetas hreflang, Weglot se encarga de la parte técnica, el SEO y la traducción de tu sitio multilingüe.

¿Estás listo para añadir un selector de idioma de WordPress a tu sitio web? Empieza con Weglotel plan gratuitoWeglot, sin necesidad de tarjeta de crédito.