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 los mejores plugins de selector de idioma para WordPress.

Con Weglot, puedes añadir varios idiomas a tu sitio web de WordPress o a tu tienda de WooCommerce sin necesidad de programar, y revisar cada traducción en su contexto antes de que se publique.

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.

Weglot La versión 2.0 se basa en el « Weglot » que ya conoces: un plugin de traducción para WordPress impulsado por IA que añade automáticamente un selector de idioma, traduce tu sitio web sin necesidad de código utilizando traducciones de IA adaptadas a tu marca y crea subdirectorios de idiomas optimizados para SEO con etiquetas hreflang y metadatos traducidos. Puedes elegir dónde añadir el selector de idioma de WordPress a tu sitio web: en el menú, en un widget o en el código fuente de tu página HTML. 

En este tutorial, vamos a añadir un selector de idioma a la navegación de tu web. Por defecto, Weglot coloca el selector de idioma en la esquina inferior derecha de tu web. A continuación, te enseñaremos cómo cambiarlo de sitio, ya sea a través de la configuración del plugin o desde Weglot, en la sección Visual Editor, donde el «Switcher Editor» también te permite modificar su diseño. 

Paso 1: Instala y activa el Weglot

Instala y activa el plugin «Weglot » en tu sitio de WordPress. A continuación, crea una cuenta en Weglot : durante la configuración, tendrás que introducir la URL de tu sitio, elegir el idioma original y el de destino, y configurar tu «Brand Voice» y las «Guías de traducción» para que las traducciones se ajusten a tu estilo de redacción. En tu panel de control de Weglot podrás gestionar y editar tus traducciones, así como copiar tu clave API única para la integración.

Paso 2: Conecta Weglot selecciona tus idiomas

Haz clic en la pestaña « Weglot » del panel de control de WordPress y abre Ajustesy pega tu clave API. Tu idioma original y los idiomas que elegiste al crear tu proyecto aparecerán debajo (para cambiarlos más adelante, ve al panel de control de Weglot ). 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 ajustes básicos, ve a Weglot > Ajustes en el panel de administración de WordPress. El La sección «Selector de idioma» es donde configuras dónde quieres que aparezca: en un menú, en un widget, con un código corto o en el código fuente de tu página (te lo explicamos más abajo):

El aspecto del selector de idioma se configura en el «Editor de selector de idioma», al que se accede desde Wegloten la página Visual Editor al hacer clic en el selector de idioma de tu web. En el editor, 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 un CSS personalizado para que pongas tus propios selectores, y ya hablaremos de esto en un momento. 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, desactiva las banderas y activa los nombres completos de los idiomas, y haz clic en «Guardar»y, a continuación, 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

Puedes mostrar el selector Weglot en cinco sitios:

• Menú: Ve a «Apariencia» > «Menús», selecciona tu menú y marca Weglot y arrástralo hasta donde quieras que esté.
• Widget: Ve a «Apariencia» > «Widgets» y añade el Weglot a cualquier zona de widgets (encabezado, barra lateral o pie de página).
• Código corto: Pega [weglot] en cualquier página, entrada o plantilla donde quieras que aparezca el selector.
• HTML / código fuente: Añade el selector directamente en el código HTML de tu página para tener control total sobre su ubicación.
• Botón flotante: Mantén el selector en una esquina fija que se mantenga visible mientras los usuarios se desplazan por la página (configuración predeterminadaWeglot).

El selector Weglot funciona con todos los temas de WordPress, incluidos los temas FSE y los temas basados en bloques.

Para controlar dónde aparece el selector de idioma, vuelve a la sección «Selector de idioma» en Weglot > Ajustes (como se muestra arriba) y sigue el enlace de la ficha correspondiente a la ubicación que quieras. 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á en el encabezado, no se muestra como debería. También podrías usar códigos de idioma en línea, en lugar de un menú desplegable.

Estilo avanzado del selector de idioma

Aquí es donde usas CSS. En el editor del selector de idioma (te lo explico mejor más abajo), desactiva el diseño desplegable, muestra los códigos de idioma en lugar de los nombres completos y añade unos cuantos selectores para las fuentes, los colores y el grosor del texto, para que el selector de idioma se adapte al diseño de tu página. Este es el resultado 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. 

Ten en cuenta que las modificaciones personalizadas del CSS son totalmente opcionales. Puedes mover y cambiar el diseño mediante las opciones ya preparadas del editor Switcher. 

Para abrirlo, ve a Weglot, a la página Visual Editor , y haz clic en el selector de idioma de tu sitio web. El «Editor del selector» aparece junto a una vista previa en tiempo real, así que verás cada cambio en cuanto lo hagas, y su panel de (haz clic en Editar CSS personalizado para que aparezca el campo) es donde se introducen los selectores del paso anterior: 

Configura la posición y el diseño desde el panel y, a continuación, haz clic en «Guardar» para que los cambios se apliquen en tu sitio de WordPress. 

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

Los que cambian de idioma suelen dividirse en cuatro grupos:

• Inexistente: en otras palabras, el sitio web no ofrece ninguna traducción.
• Es difícil de encontrar. El selector de idioma puede estar escondido en el menú de navegación o en algún otro sitio, lo que obliga al usuario a jugar al escondite y ofrece una experiencia de usuario pésima.
• 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.

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 el plugin adecuado. Con Weglot, obtienes un selector de idiomas que se añade automáticamente, traducción completa mediante IA desde el primer día, traducción de imágenes para el texto que contienen y control total de la edición, sin necesidad de un desarrollador. El plugin funciona en segundo plano, manteniendo al día tus traducciones, en línea con tu marca, a medida que cambia tu contenido. También puedes activar la redirección automática desde tu panel de control de 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 Además, está diseñado pensando en el SEO multilingüe. Crea automáticamente subdirectorios por idioma para cada versión traducida de tu web, añade etiquetas hreflang y traduce tus metadatos, para que los motores de búsqueda y las experiencias de búsqueda basadas en IA puedan 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 diseñado pensando en el SEO multilingüe. Gracias a los subdirectorios de idiomas que se crean automáticamente, a los metadatos traducidos y a la implementación de la etiqueta hreflang, « Weglot » se encarga de los aspectos técnicos, de SEO y de traducción de tu web 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.