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).

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...