Existen varias opciones para añadir varios idiomas a una web. Es decir, disponer de tu página web traducida a varios idiomas diferentes. La forma más compleja, cara, pero que aporta una mayor calidad es que realicemos nosotros las traducciones y utilicemos un plugin de idiomas para WordPress.
Pero como imagináis existe otra forma, más sencilla y mucho más económica, pero no tan profesional. Me refiero a instalar un plugin que muestre un selector de idiomas y realice las traducciones automáticas a través del traductor de Google (Google translate)
En este post nos vamos a centrar en esta segunda opción. Vamos a ver, como implementar varios idiomas en una página web WordPress de una forma super sencilla y barata, ya que no tendremos que hacer traducciones manuales. Es decir, vamos a realizar las traducciones de la web WordPress de manera automática con un plugin de traducciones que utiliza el motor de Google Translate.
ÍNDICE IDIOMAS WORDPRESS / TRADUCTOR GOOGLE TRANSLATE
- 1.- Características de una página web Wordpress con un plugin de traducciones automáticas a diferentes idiomas.
-
2.- Configuración del plugin Google Language Translator para traducciones idiomas en Wordpress
- 2.1.- Configuraciones principales plugin idiomas Google, bloque: Main Settings
- 2.2.- Previsualización del selector de idiomas: Preview
- 2.3.- Configuración iconos banderas de idiomas: Advanced settings
- 2.4.- Configuración Selector de idiomas: Language Switcher Settings
- 2.5.- Botón flotante de traducción en Wordpress: Floating Widget Settings
- 3.3.- Barra flotante de Google Translate en cabecera
- 3.4.- Mostrar banderas en menú (selector idiomas en menú con banderas)
1.- Características de una página web WordPress con un plugin de traducciones automáticas a diferentes idiomas.
La implementación de traducciones del traductor de Google en una página web realizada con WordPress es muy sencilla y se realiza a través de un plugin gratuito.
No vamos a realizar traducciones manuales. El traductor de Google (Google translate) se encargará de realizar las traducciones de manera automática.
No se generan nuevas páginas para cada idioma, por lo que Google no va a indexar la web en varios idiomas. El plugin genera una capa superpuesta al cliente para que vea la página traducida, pero Google no va a indexar esos contenidos traducidos.
Podremos mostrar las opciones de traducción (selector de idiomas) en posiciones muy variadas, gracias a los shortcodes que proporciona el plugin de traducciones automáticas.
Podremos mostrar el selector de idiomas, con o sin banderitas. Opcionalmente podremos mostrar una barra en la parte superior con opciones de Google Translate.
También podremos mostrar un elemento con forma de botón flotante que en el plugin denominan: Floating Widget (pero que no es un widget, no nos confundamos). Este elemento aparece por defecto en la parte inferior de la página y permanece siempre visible al hacer scroll.
En el momento de escribir este post, el plugin que vamos a utilizar nos permite realizar traducciones hasta en 104 idiomas diferentes.
2.- Configuración del plugin Google Language Translator para traducciones idiomas en WordPress
En primer lugar procederemos a instalar el plugin Google Language Translator-> IR AL PLUGIN
Una vez instalado y activado el plugin, accederemos a las opciones de configuración desde: “Ajustes > Google Language Translator”
2.1.- Configuraciones principales plugin idiomas Google, bloque: Main Settings
En este bloque de configuración encontraremos las siguientes opciones:
i.- Plugin Status: si marcamos el check box, el plugin estará activo y funcionando. Si desmarcamos esta opción, el plugin no estará activo.
ii.- Choose the original language of your website: en esta opción debes seleccionar el idioma principal u original con el que está escrita la página web. Aquí debes elegir: “Spanish”
iii.- What languages Will be active?: Ahora seleccionaremos los idiomas que queremos estén disponibles para que los visitantes de la web los puedan seleccionar y que se realicen las traducciones automáticas.
Configuraciones principales plugin idiomas Google Translate para WordPress
2.2.- Previsualización del selector de idiomas: Preview
El “bloque preview” nos da una previsualización del selector de idiomas que podremos añadir al sidebar o footer de nuestra página web a través de un shortcode.
También nos indica el orden en el que se mostrarán los idiomas en el selector de idiomas y en el widget flotante de idiomas.
Si quieres cambiar el orden de los idiomas, pon el ratón sobre una bandera, haz clic con el botón izquierdo del ratón y arrastra la bandera hasta su nueva posición.
Previsualización del selector de idiomas de la web
2.3.- Configuración iconos banderas de idiomas: Advanced settings
En el bloque advanced settings te pueden aparecer diferentes opciones según los idiomas que hayas seleccionado.
Este apartado sirve para establecer el tamaño de las banderas que aparecen en el selector de idiomas y para elegir que bandera aparecerá cuando existen varios países que utilizan un mismo lenguaje, por ejemplo (EEUU y Reino Unido, o Brasil y Portugal)
i.- Select flag size: selección del tamaño, en píxeles, de las banderas del selector de idiomas.
ii.- Flag for english: Seleccionar bandera para idioma inglés
iii.- Flag for spanish: seleccionar bandera para español
iv.- Flag por portuguese: seleccionar bandera para idioma portugués.
2.4.- Configuración Selector de idiomas: Language Switcher Settings
En este apartado vamos a ver que opciones de configuración tenemos con respecto al selector de idiomas. Es decir, el elemento que utilizan los visitantes para elegir en que idioma quieren visualizar la página.
i.- Language switcher widt: esta opción sirve para establecer la anchura del selector de idiomas.
ii.- Language switcher text color: aquí elegiremos el color del texto que aparece dentro del selector de idiomas (Texto: Seleccionar idioma)
iii.- Language Switcher background color: aquí seleccionaremos el color de fondo del selector de idiomas.
iv.- Show flag images: si marcamos esta opción, se mostrarán las banderas correspondientes a cada idioma disponible en la parte superior del selector.
v.- Show or hide the language Switcher: si marcamos la opción “Show language switcher” mostraremos el selector de idiomas modo texto. Si marcamos la opción: “hide language switcher” ocultaríamos el selector de idioma en modo texto y solo se mostrarían las banderitas.
vi.- Layout options: Aquí seleccionaremos si los elementos del selector queremos que aparezcan uno debajo del otro (modo vertical) o uno al lado del otro (modo horizontal)
vii.- Show Google Toolbar: con esta opción estableceremos si queremos que se muestre en la parte superior de la web una barra de apoyo proporcionada por Google Translator.
viii.- Show Google Branding: con esta opción seleccionaremos si queremos que se muestre el texto: “Con la tecnología de Google Traductor de Google” en el selector de idiomas.
ix.- Align the translator left or right: con esta opción estableceremos si queremos que el selector de idiomas quede alineado a izquierda (left) o derecha (right).
Opciones de configuración del selector de idiomas web
2.5.- Botón flotante de traducción en WordPress: Floating Widget Settings
Desde este apartado configuraremos el botón flotante (siempre visible) que aparece en la parte inferior de la página, con el texto por defecto: “Translate”
Al hacer clic sobre el elemento, se mostrarán las diferentes banderitas de idiomas, para que seleccionemos la traducción que queremos realizar.
i.- Show floating translation widget?: si marcamos la opción: “Yes, show widget” el botón flotante de traducción se mostrará. Si por el contrario, elegimos la opción: “No, hide widget”, el elemento no se mostrará.
ii.- Custom texto for de floating widget: en este campo pondremos el texto que queremos que se muestre en el elemento flotante
iii.- Allow floating widget text to translate?: si marcamos esta opción, el contenido de texto del botón se traducirá cada vez que seleccionemos un idioma. El texto correspondiente al que hayamos seleccionado como idioma principal será el que pongamos en el campo que hemos visto en el apartado ii (custom text for de floating widget).
iv.- Floating widget position: desde este selector podremos personalizar la posición en la que se mostrará este botón flotante de ayuda para traducción.
v.- Floating widget Text Color: aquí seleccionaremos el color del texto del interior del botón flotante.
vi.- Floating widget Background color: seleccionaremos el color de fondo del botón de traducción flotante.
Configuración del botón flotante de google translate
3.- Formas de mostrar los selectores de idiomas en la web WordPress
Vamos a ver ahora las diferentes maneras que tenemos de colocar los elementos de traducción que nos aporta el plugin.
3.1.- Colocación del selector de idiomas WordPress
El selector de idiomas puedes colocarlo en páginas, posts y áreas de widgets como la barra lateral o el footer. Para ello has de poner el siguiente shortcode en la pestaña de HTML del editor:
[google-translator]
3.2.- Botón flotante de idiomas o traducción automática
Las opciones para mostrar o no el botón flotante de traducción, y su posición las tienes en: “Ajustes > Google Language Translator”. Tienes todas las opciones en el apartado 2.5
3.3.- Barra flotante de Google Translate en cabecera
Para mostrar u ocultar la barra de Google Translate del header has de ir a “Ajustes > Google Language Translator”. Lo tienes en el apartado 2.4 vii
Para mostrar banderas, como selector de idiomas, en el menú superior de wordpress tendrás que realizar el siguiente proceso:
i.- Gestión de menús: acceder a la página de gestión del menú en wordpress: “Apariencia > Menús”
ii.- Activar Descripción: para activar el campo descripción, haz clic en el botón: “Opciones de pantalla” que aparece en la parte superior-derecha. A continuación, marca la opción: “Descripción”.
iii.- Añade un elemento “Enlaces personalizados”: ve a un elemento tipo «Enlaces personalizados”. Borra el contenido del campo URL y en el campo “Texto del enlace” pon el idioma que quieres colocar (este texto no se mostrará). Por ejemplo: IDIOMA INGLÉS
Añade el elemento al menú.
iv.- Campo descripción: En el campo descripción escribe el siguiente shortcode (para idioma inglés):
[glt language="English" label="English" image="yes" text="yes" image_size="24"]
y guarda el menú.
Debes repetir el proceso para cada bandera (idioma) que quieras añadir al menú. El shortcode lo debes modificar para cada idioma. Por ejemplo para español sería:
[glt language="Spanish" label="Spanish" image="yes" text="yes" image_size="24"]
Cómo añadir sector de idiomas al menú wordpress
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Buenas tardes, estoy intentando ocultar el widget que pone translate y que me aparezcan las banderitas directamente, pero no me sale el campo descripción en enlaces personalizados, por lo que no puedo hacer este paso:
iv.- Campo descripción: En el campo descripción escribe el siguiente shortcode (para idioma inglés):
[glt language=»English» label=»English» image=»yes» text=»yes» image_size=»24″]
y guarda el menú.
Saludos y gracias,
Hola María.
Para activar el campo descripción haz clic en el botón: “Opciones de pantalla” que aparece en la parte superior-derecha de la pantalla. A continuación, marca la opción: “Descripción”.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquín,
Como hago para traducir directamente una web por defecto.
Es decir, que la web esté traducida directamente a un idioma sin tener que darle click a las banderitas cuando se cargue en el navegador.
Gracias
Buenas,
Quisiera saber si puedo modificar el texto que ha traducido el plugin, puesto que en ocasiones la traducción que ofrece no es correcta.
Muchas gracias!
Hola Miriam.
No, este plugin realiza traducciones automatizadas.
Para lo que tu buscas, seguramente lo que te haría falta sería un plugin de traducciones de WordPress. Para traducir tú cada una de las páginas. Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Analytics, Diseñador web freelance, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.****
Hola Marcelo, buenas tardes.
Muchas gracias por el post, me ha parecido muy util. Pero me gustaria poder poner solo las banderitas, sin el texto del idioma que es pero no soy capaz de configurarlo.
Me podrías ayudar por favor?
Buenas Sandra.
Revisa las opciones del apartado 2.4 del post, para las opciones de mostrar «texto» o «iconos de banderas»
un saludo
Hola Joaquín,
Lo primero, felicidades por tu blog, es fantástico!
Lo segundo, hice todo tal como indicas y sorprendentemente en mi Mac no veo el resultado de las traducciones, pero desde un móvil si! Hay algo que deba hacer extra??? Gracias! Mi web:
https://www.jg-andrade.com/Javier
Hola Javier.
Desde mi ordenador y navegador Firefox si se ven perfectamente las traducciones.
Es posible que haya algún tipo de incompatibilidad en este momento con el navegador que incluye Mac (Safari). Prueba con Chrome en tu Mac, a ver que ocurre y si es un problema de Safari, consulta con el soporte del plugin a ver que puede estar ocurriendo.
Soporte plugin traducciones
No es muy profesional y de cara al posicionamiento tampoco es la mejor opcion, ya que ese contenido en otros idiomas no “existe” realmente.
Aun asi, buen post
Buenas,
Como digo en el post, no se generan páginas para cada idioma, por lo que Google no indexará los diferentes idiomas. Pero ha de quedar claro, que NO es malo para el SEO de la web. Lo que pasa es que no va a servir para posicionarse en otros idiomas diferentes al que esté la web.
Efectivamente, la opción más profesional es añadir un plugin y realizar las traducciones manualmente. Pero eso es otra historia, ya que requiere un trabajo muchísimo mayor. Pero también tienes que tener en cuenta que cuando se muestra el selector de idiomas de Google translate, el visitante ya sabe que se va a encontrar una traducción de Google y no una traducción personalizada.
Realmente esto es una ayuda de Google para que un visitante pueda ver rápidamente la página traducida y no tenga que estar abriendo google translate para ir traudciendo párrafo a párrafo, o usar algún complemento de Chrome
Hola Joaquin. tengo un problema. Yo no quiero el traductor flotante solamente deseo que las banderitas aparezcan en la barra superior de mi sitio, por lo tanto sigo tus indicaciones ademas en opciones de pantalla activo descripción pero cuando pincho añadir menú las barras de URL y texto del enlace se prenden de color rojo y no me dejan seguir el procedimiento de configuración.
Gracias y atento a tus comentarios
Hola Marcelo,
Antes de darle a «Añadir a menú» rellena el campo «texto del enlace» con el texto «IDIOMA INGLÉS» (o el texto que proceda) y después haz clic en «Añadir menú».
es lo que hago. como dije anteriormente sigo tus indicaciones pero esta barra del URL se prende de color rojo. Me parece que me pide colocar algo ahí, porque hice la prueba de no colocar nada en URL y Texto enlace solo se prende de color rojo la Barra URL.
Gracias y Atento a tus comentarios.
Prueba a poner una almohadilla en el campo URL. Es decir pon esto:
#
Gracias Joaquin, me ha resultado bien todo.