Cómo utilizar un conmutador de idioma personalizado con Transposh para crear un sitio web de WordPress en varios idiomas

En este artículo aprenderás a usar un selector de idiomas personalizado con Transposh para construir un sitio web multilingüe con WordPress totalmente gratis..

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%/)
  • eso es todo. 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! Así que te mostraré cómo usar un conmutador de idioma personalizado con Transposh para crear un sitio web en varios idiomas con WordPress.. Pero... Siempre hay una "pero" 🙂 Primero, utilizar todo el widget que debe actualizar a la versión completa: No hay problema, está libre. Vaya a la sección Transposh del tablero y elija Configuración, 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. Después de un tiempo, se le notificará que hay una actualización disponible para Transposh.: actualizar y estás bien.

Una vez Transposh se ha actualizado a la versión completa, finalmente obtienes el widget y .... Como suele, sucede que el widget probablemente no se integra en el diseño de su sitio web, 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! No se porque, después de todo es Inglés Inglés y nació en el Reino Unido. Entonces, qué hacer? Bien, vamos a crear nuestro conmutador de idiomas personalizado.

 

¿Qué es exactamente lo que necesitamos?



Veamos cómo funciona Transposh. 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 (déjelos por defecto si no tiene ningún problema específico con esto), 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, Tenemos que proporcionar a los administradores y editores una forma rápida de poner el sitio web en modo de edición para corregir los errores de traducción.. Para ello se siga estos pasos:
  • estableceremos algunos ajustes de WordPress
  • cargaremos en nuestra instalación de WordPress las imágenes de las banderas que necesitamos
  • instalaremos un par de complementos
  • escribiremos un poco de código

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. Solo busca en Google un poco y encontrarás muchos conjuntos de iconos de banderas gratuitos: elija su favorito de una sola descarga y subir las banderas a su sitio web utilizando el espacio multimedia del panel de WordPress. En este artículo usaré tres banderas, Inglés, Español (porque vivo en España) e italiano (porque soy de italia), pero, obviamente, no dude en utilizar las banderas que realmente necesita para su uso.

Paso 3: algunos plugins

Para usar nuestras banderas, usaremos un par de complementos útiles (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. Eso es todo por ahora.

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. Esta función funciona de forma inmediata con el widget Transposh, pero como no la estamos usando, tendremos que implementarla manualmente.. Técnicamente, el Si Menú plugin no es estrictamente necesario: Lo uso porque no quiero que los visitantes puedan cambiar el texto del sitio web como quieran y supongo que la mayoría de ustedes harán lo mismo.. Si plugin de menú simplemente hacer esto: permite agregar una lógica condicional para que pueda mostrar u ocultar elementos de menú individuales según el rol del usuario.

Paso 4: la creación del menú

Bueno, ahora estamos listos para crear nuestro menú. Ir a apariencia->menús.

Ajustes para menú de iconos

Cuando se encuentra en la sección Menús, Verá un nuevo elemento en la barra lateral izquierda Agregar elementos del menú: Menú configuración de iconos. Abrelo, desactive las Dashicons opción preseleccionados (no lo necesitamos) 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ú.

Agregar elementos de menú del selector de idioma

Agregaremos 3 elementos de menú con las banderas para permitir a los usuarios cambiar entre los tres idiomas soportados. Luego agregaremos un cuarto elemento para habilitar / deshabilitar la edición de la traducción (para este elemento de menú usaremos la lógica condicional ofrecida por el complemento If Menu. Para cada elemento del menú usaremos enlaces personalizados. 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ú, escriba la URL base de su sitio web como URL y 'en' (sin comillas) como texto Enlace.
si, es verdad! Estoy implementando la función multilenguaje para este blog escribiendo este artículo: emocionante, no es? 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) escriba '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: agregar '/ it' para italiano, '/ es' para español y así sucesivamente ...
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, agregaremos un nuevo enlace personalizado a nuestro menú: Lo llamé Edición de encendido / apagado. No pondremos nada en el campo URL y tendremos que marcar la casilla de verificación 'Habilitar reglas de visibilidad' para que este elemento sea visible solo para los administradores y los editores. Adicionalmente, tenemos que agregar la clase 'editar-traducción' que usaremos para manejar el evento de clic y habilitar el modo de edición (como puede ver, también adjunto la clase de no traducción aquí, ya que no necesito traducir este elemento).
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, para que no haga nada .... 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:
jQuery(documento).Listo(función($) {
    var urlParam = función (nombre) {
        resultados var = new RegExp('[?&]' + nombre + '=([^&#]*)').Exec(window.location.search);
        regreso (resultados !== nulo) ? resultados[1] || 0 : falso;
    }
    $(documento).en('hacer clic', '.Edit-traducción', función(mi){
        e.preventDefault();
        var currentOrigin = window.location.origin;
        var currentPath = window.location.pathname;
        var PARAM = urlParam('Tpedit');
        era NEWURL = '';
        Si (falsa parámetro ===){
            NEWURL = currentOrigin + currentPath +'?tpedit = 1';
            $(esta).Atracción('Href', NEWURL);
        }más{
            NEWURL = currentOrigin + trayectoria de corriente;
            $(esta).Atracción('Href', NEWURL);
        }
        window.location.href = NEWURL;
    })
})
explicación rápida: cuando el usuario hace clic en nuestro elemento de menú 'Editar encendido / apagado', 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 HTTP://codingfix.com/how-to-use-custom-flags-languages-switcher-with-transposh/ currentOrigin será http://codingfix.com mientras que currentPath será cómo-a-uso-custom-banderas-idiomas-Switcher-con-Transposh /. Pero si estuviéramos en http://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 /. Una vez que tenemos los componentes de la url actual comprobamos si la cadena 'tpedit' está presente en la url como parámetro. Este parámetro es utilizado por Transposh para activar el modo de edición de traducciones: cuando usa el widget y marca la casilla de verificación Editar traducción, la página se vuelve a cargar con el parámetro 'tpedit = 1' adjunto a la 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 (es decir recargamos la pagina quitando el param 'tpedit'); de lo contrario, construimos la nueva URL agregando el parámetro 'tpedit = 1' y recargamos la página en modo de edición.
Ahora guarda el archivo con el nombre que prefiera: Usaré el nombre 'myscript.js' porque no tengo tiempo que perder pensando en un nombre 🙂 más bonito Ahora tenemos que subir este archivo a nuestra carpeta de temas, preferiblemente en una subcarpeta llamada '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 (si no sabe qué es un tema hijo, puede leer esto: 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:
load_custom_javascript función() { 
    wp_enqueue_script( 'Miscript', //nombre del script
        get_stylesheet_directory_uri() . '' /js/myscript.js, //ruta completa al archivo
        formación('Jquery'), //matriz de dependencias
        '', //número de versión
        verdadero // poner script en pie de página
    ); 
}
add_action( '' wp_enqueue_scripts, 'Load_custom_javascript' );
Si te encanta vivir peligrosamente y no estás usando un tema hijo, basta con sustituir get_stylesheet_directory_uri() con get_template_directory_uri().

Finalmente lo tenemos!

Bueno, eso es todo amigos! Ahora puede comenzar a fijar traducciones automáticas. Yo también, Temo...

12 comentarios en “Cómo utilizar un conmutador de idioma personalizado con Transposh para crear un sitio web de WordPress en varios idiomas”

  1. Guau. Muchas gracias!. Esto es justo lo que estaba buscando. Asombroso!! No conseguí que la traducción de la edición funcionara. El punto desaparece cuando se guarda el menú. Pero supongo que colocaré el menú original en otro lugar para poder editar…

    1. Hola lars. Gracias por leer y perdón por la demora en responder a tu comentario..
      Bien, el punto es mi error: gracias por señalarlo, ya arreglé el texto y la captura de pantalla. Realmente, no tenemos que poner el punto - WP es lo suficientemente inteligente como para saber que las clases de CSS tienen el prefijo de un punto;)
      Por lo tanto, debería poder hacer que funcione como está, sin ningún punto para la clase de edición-traducción.
      también, Estoy escribiendo un pequeño complemento para agregar el botón Editar traducción y hacerlo funcionar., así que mantente conectado!
      Avísame si lo tienes funcionando bien, Estaré encantado de ayudarte!

  2. Impresionante tutorial! Gracias!
    Aunque solo una pregunta rápida, ¿Conoces una forma de cambiar automáticamente el menú cuando cambias de idioma??
    por ejemplo, EN es mi idioma predeterminado y ES es mi otro idioma. yo tengo «ES» en mi menú principal y quiero que cambie automáticamente a EN cada vez que lo presionen y vayan al sitio de ES.

    Lo aprecio mucho.
    Gracias

    1. Hola clarence.
      Interesante pregunta. Nunca he pensado en eso. En general, Creo que podría hacerlo con un javascript que cambia solo un elemento principal en lugar de todo el menú. Debe agregar una clase a los elementos del menú de idiomas y luego administrar el evento de clic… Estoy demasiado ocupado en este período para trabajar en eso, pero lo tendré en cuenta.
      Por favor, avísame si obtienes la solución: Estaré encantado de integrarlo en la publicación añadiéndote como colaborador 🙂
      Salud

    1. Hola Andrew. Gracias por usar Language Switcher para Transposh. Necesito aclarar que mi plugin no traduce nada: las traducciones son responsabilidad del complemento Transposh, por lo que no pude evitarlo. Puedes intentar preguntar en https://transposh.org. Mi complemento solo proporciona un conmutador de idioma, pero no tiene nada que ver con la traducción en sí.. Lamento no poder ayudarte aquí.. Salud

  3. Estoy extremadamente impresionado con sus habilidades de escritura y
    también con el diseño en tu blog. ¿Es este un tema pagado o lo hiciste?
    Personalízalo tú mismo? De todos modos, mantén la excelente calidad de escritura, Es raro ver un buen blog como
    Este hoy en día.

  4. Oye, esto está un poco fuera de tema, pero me preguntaba si los blogs usan editores WYSIWYG o
    si tiene que codificar manualmente con HTML. Estoy empezando un blog pronto pero no tengo
    conocimientos de codificación, así que quería obtener orientación de alguien con experiencia.
    Cualquier ayuda sería enormemente apreciada!

    1. Hola Robbie. Solo usa WordPress: Le permite hacer cualquier cosa sin escribir una sola línea de código. Pero también te permite escribir tu código, Si quieres 🙂

Deja un comentario

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