How to use a custom language switcher with Transposh to build a multi-language WordPress website

In this article you'll learn how to use a custom language switcher with Transposh to build a multi-language website with WordPress.

Cuando se trata de construir un sitio web en varios idiomas, WordPress ofrece una gran cantidad de plugins: WPML, Políglota y así sucesivamente.

Todos estos complementos tienen una versión gratuita con limitación pertinentes: si quieres un plugin totalmente funcional que debe comprar la versión Premium.

Pero esto no es cierto para Transposh: Transposh es totalmente gratuito, Siempre, sin limitación alguna (en varios idiomas, número de sitios web o cualquier otra cosa). Y funciona muy bien:

  • Transposh instalar y activarlo
  • configurar el idioma predeterminado en Worpdress Settings->sección general
  • seleccionar los idiomas que desea utilizar en Transposh->idiomas
  • en Transposh->Configuración del conjunto de quién puede editar traducciones (típicamente serán los administradores y editores)
  • Habilitar reescritura de URL
  • Conjunto de WordPress Settings->Enlace permanente a nombre del anuncio (/%Nombre del puesto%/)
  • that's all. Su texto se traducirá automáticamente en el idioma seleccionado

Adicionalmente, Transposh le permiten fijar cualquier error en la traducción de una manera rápida y fácil! So I'll show you How to use a custom language switcher with Transposh to build a multi-language website with WordPress.

But... Siempre hay una "pero" 🙂 First, utilizar todo el widget que debe actualizar a la versión completa: No hay problema, is free. Go to Transposh section of the dashboard and choose Settings, a continuación, comprobar la "Permitir la actualización a la versión completa de http://transposh.org, que no tiene ningún límite en idiomas utilizados e incluye un conjunto completo de widgets" casilla y haga clic en el botón Guardar cambios. After some time you'll be notified there is an update available for Transposh: actualizar y estás bien.

Una vez Transposh se ha actualizado a la versión completa, you finally get the widget and... Como suele, it happens that the widget probably doesn't integrate in your website design, que requiere una gran cantidad de trabajo para añadir CSS personalizado, tratando de diseñarlo de manera coherente con el resto de sus estilos. Y por último pero no menos importante, idioma Inglés está representado por la bandera de Estados Unidos! Don't know why, después de todo es Inglés Inglés y nació en el Reino Unido. Entonces, qué hacer? Bien, we're going to build our custom language switcher.

¿Qué es exactamente lo que necesitamos?

Let's see how Transposh works. Al hacer clic en la bandera de una lengua no es el predeterminado, Transposh recarga la página y cambia su propio aspecto. Como puedes ver, una casilla de verificación aparece inmediatamente debajo de las banderas: comprobando que se vuelve a cargar la página en modo de edición. Dependiendo de la configuración Transposh (leave them to default if you don't have any specific issue with this), cada texto en la página tendrá un botón amarillo pequeña anexa: al hacer clic en ese botón se mostrará una ventana emergente para editar la traducción o simplemente aprobarlos (traducciones aprobadas tendrán un botón verde en lugar de uno amarillo)

Entonces, resumir, primero tenemos que ofrecer a nuestros usuarios una manera fácil y posiblemente hermoso para cambiar entre idiomas; en segundo lugar, we have to provide to administrators and editors a quick way to put the website in edit mode to fix translations' errors. Para ello se siga estos pasos:

  • we'll set some WordPress setting
  • we'll upload to our WordPress installation the flags' images we need
  • we'll install a couple of plugins
  • we'll write a bit of code

idioma personalizado paso a paso conmutador

Paso 1: configuración de WordPress

primero, Como dije antes, ir a la configuración->Enlace permanente y la puso a nombre del anuncio (%Nombre del puesto%).

Luego, O ir apariencia->menús, Opciones de pantalla abierta al hacer clic en la pestaña superior derecha y selecciona la casilla clases CSS como se muestra en la imagen de abajo.

Paso 2: las banderas

En primer lugar tenemos que conseguir nuestros íconos. Just google a bit and you'll find a lot of free flag icons sets: elija su favorito de una sola descarga y subir las banderas a su sitio web utilizando el espacio multimedia del panel de WordPress. In thus article I'll use three flags, Inglés, Español (porque vivo en España) e italiano (because I'm from Italy), pero, obviamente, no dude en utilizar las banderas que realmente necesita para su uso.

Paso 3: algunos plugins

In order to use our flags we're going to use a couple of useful plugins (incluso estos son totalmente libres).

Enchufar 1: Icono de menú por ThemeIsle

Este pequeño agregado adorable (https://wordpress.org/plugins/menu-icons/) que permite años de referencia en cualquier icono o imagen que desea asociar a un elemento de menú. El plug-in permite elegir si el texto del elemento de menú tiene que ser visible u oculto, por lo que podemos añadir a nuestro menú 2 banderas rápida y sencilla.

That's all for now.

Enchufar 2: Si Menú

Ahora tenemos que añadir otro elemento de menú para activar o desactivar la opción de editar la traducción, si no estamos a feliz con él. This function works out of the box with Transposh widget but since we're not using it we'll have to implement it manually.

Técnicamente, el Si Menú plugin no es estrictamente necesario: I use it because I don't want visitors can change the website text as they want and I suppose that the majority of you will do the same. Si plugin de menú simplemente hacer esto: it allows to add a conditional logic so you can show or hide single menu items depending on the user's role.

Paso 4: la creación del menú

Bueno, now we're ready to build our menu. Ir a apariencia->menús.

Ajustes para menú de iconos

Cuando se encuentra en la sección Menús, you'll see a new element in Add menu items left side bar: Menú configuración de iconos. Abrelo, desactive las Dashicons opción preseleccionados (we don't need it) y marque la opción Imágenes como en la imagen a la izquierda.

A continuación, cambie a la pestaña de menú actual y establezca Ocultar etiqueta en Sí. Finalmente, Guardar configuración sólo!

Una vez que hemos completado estas tareas preliminares, podemos empezar a añadir elementos de menú a nuestro menú.

Adding the language switcher's menu items

We'll add 3 elementos de menú con las banderas para permitir a los usuarios cambiar entre los tres idiomas soportados. Then we'll add a fourth item to enable/disable translation editing (for this menu item we'll use the conditional logic offered by If Menu plugin. For each menu item we'll use Custom links.

La imagen siguiente muestra cómo configurar la opción de menú correspondiente a su idioma por defecto (en nuestro caso será Inglés). Elija enlaces personalizados como tipo de elemento de menú, type the base url of your website as URL and 'en' (sin comillas) como texto Enlace.

si, it's true! I'm implementing multilanguage feature for this blog writing this article: emocionante, isn't it?

Bueno, Ahora el elemento de menú debe tener este aspecto:

Lo ves? Hay una fila que dice Icono: Seleccione. Haga clic en Seleccionar para subir su bandera (o seleccionarlo de que Mediateca si ya había subido).

Ves la bandera del Reino Unido?

Ahora, en las clases CSS cuadro de entrada (Opcional) type 'no_translate' (de nuevo, sin comillas).

Haga lo mismo para cada idioma que desea utilizar. Lo único que tiene que cambiar es la dirección URL en su enlace personalizado: add '/it' for italian, '/es' for spanish and so on...

ahorrará menú y echar un vistazo a su sitio web: lo que ya es un sitio web en varios idiomas!!!

la creación de la "Modo de edición" opción del menú

Pero traducciones automáticas son a menudo pobres, por lo que necesitamos una forma de cambio y los corregimos. Para hacer esto, we'll add a new Custom link to our menu: Lo llamé Edición de encendido / apagado. We won't put anything in URL field and we'll have to check the ' Enable visibility rules ' checkbox to make this item visible only to Administrators and to Editors. Adicionalmente, we have to add the class '.edit-translation' which we'll use to handle the click event and enable the edit mode.

darse cuenta: este elemento de menú sólo aparecerá cuando se explora la página web en un idioma secundario: Transposh es lo suficientemente inteligente como para saber que no existe una traducción de arreglo para el idioma por defecto!

Sin embargo, este artículo no tiene ninguna URL, so it won't do anything... Para que sea funciona tenemos que escribir un poco de javascript.

Paso 5: un poco de codificación

Así que tenemos nuestro menú principal con 3 banderas (que ya funcionan bien: simplemente darle una oportunidad) y la edición de encendido / apagado elemento para activar la edición manual del texto traducido; este último elemento del menú será visible sólo si el usuario se registrará como administrador o editor.

Pero para que esto funcione correctamente elemento de menú tenemos que añadir algo de JavaScript. Ejecutar el código editor de elección y crear un nuevo archivo; a continuación, escribir en este código:

explicación rápida: when the user clicks on our menu item 'Edit on/off', primero evitamos que el evento predeterminado, que es recarga la página actual. A continuación, los usos de código window.location.origin y window.location.pathname para obtener la URL base actual y la ruta actual.

Por ejemplo, si estamos en https://codingfix.com/how-to-use-custom-flags-languages-switcher-with-transposh/ currentOrigin será https://www.codingfix.com whereas currentPath will be how-to-use-custom-flags-languages-switcher-with-transposh/. Pero si estábamos en https://www.codingfix.com/es/how-to-use-custom-flags-languages-switcher-with-transposh/, currentPath sería en / cómo-a-uso-custom-banderas-idiomas-Switcher-con-Transposh /.

Once we have the components of the current url we check if the string 'tpedit' is present in the url as a parameter. Este parámetro es utilizado por Transposh para activar el modo de edición de traducciones: when you use the widget and check the Edit translation checkbox the page is reloaded with the param 'tpedit=1' appended to the url. Así tenemos que comprobar si estamos en el modo de edición: si nosotros estamos, creamos una nueva dirección URL utilizando sólo currentOrigin y currentPath y redirigir el navegador a esta URL (that is we reload the page removing the param 'tpedit'); otherwise we build the new url appending the param 'tpedit=1' and reload the page in edit mode.

Ahora guarda el archivo con el nombre que prefiera: I'll use the name 'myscript.js' because I've no time to waste thinking to a nicer name 🙂

Ahora tenemos que subir este archivo en nuestra carpeta de temas, preferably in a subfolder called 'js'. Por cierto, Te recomiendo utilizar un tema menor, ya que cualquier cambio que hagas a los archivos del tema se perderá cuando se actualiza el tema (if you don't know what is a child theme you can read this: https://www.wpbeginner.com/beginners-guide/wordpress-child-theme-pros-cons/ Para crear fácilmente un tema niño de su tema actual puede utilizar el plugin Configurador de niños del tema).

Paso 6: cargar nuestro script

Ahora tenemos que modificar el archivo functions.php con el fin de cargar nuestro script. El código que se utilizará es ligeramente diferente dependiendo de wheter utiliza un tema hijo o no.

Si está utilizando un tema infantil (recomendado) hay que añadir que a functions.php el siguiente código:

If you love to live dangerously and you're not using a child theme, basta con sustituir get_stylesheet_directory_uri() con get_template_directory_uri().

Finally we've got it!

Bueno, that's all folks! Ahora puede comenzar a fijar traducciones automáticas. Yo también, I fear...

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.