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 más 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 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.

Weglot un plugin de traducción para WordPress basado en IA que añade automáticamente un selector de idioma, traduce tu sitio web en cuestión de minutos sin necesidad de programar y crea subdirectorios de idiomas optimizados para SEO con etiquetas hreflang. 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 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 Weglot en tu sitio de WordPress. A continuación, crea una Weglot , donde podrás gestionar y editar tus traducciones y obtener 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 ajustes básicos, ve a Weglot Diseño del botón de idioma (opcional) en el panel de administración 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

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 idiomas con Weglot, ve a la Weglot en el panel de control de WordPress y desplázate hacia abajo hasta que veas las opciones para mostrar el selector de idiomas:

Solo tienes que seguir las instrucciones según dónde quieras colocar 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.

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.