Hacer Weebly multilingüe (y otros web builders)

19.06.2017 11:18:13

Esta entrada del blog explica cómo crear un sitio web en varios idiomas usando Weebly. En realidad, el método es bastante genérico por lo que debe funcionar con otros constructores web WYSIWYG tales como Godaddy, 1and1, Wix, Jimdo, etc o al menos puede darle una pista sobre cómo resolver el mismo problema en otras plataformas.

Todo comenzó porque queríamos ayudar a uno de nuestros clientes que utiliza Weebly con nuestro sistema de reservas para tener su sitio trabajando en varios idiomas.

En el caso de Weebly, sólo puede tener el menú en un idioma. Esa es la forma en que está.d

Por lo tanto, hemos creado algunos códigos javascript que permite cambiar el texto de navegación y enlaces de acuerdo a sus necesidades de idioma. Funciona tan bien que solo queremos compartirlo con el mundo :-)

También escribimos algunos otros javascript para hacer una re-dirección de página principal que es de uso fácil y bueno para SEO.


Paso 1: Crear todas sus páginas

Es mejor tener todas las páginas creadas antes de tratar con javascript. La mayoría de los constructores web tienen la opción de mostrar y ocultar una página en particular en el menú web.

Debes dejar las páginas de tu idioma principal en el menú, y ocultar del menú todas las páginas en todos los demás idiomas. Aquí hay una captura de pantalla del sitio web de nuestros clientes para entender mejor el proceso.

En este ejemplo, el sitio web tiene 7 páginas por idioma (35 páginas en total). Toda la navegación se hace con las páginas en español, y las páginas en otros idiomas se ocultan.
 
 

Paso 2: Actualizar el código JS para cambiar los vínculos de navegación

 Aquí está el código javascript que utilizamos en su sitio web. Tendrá que cambiarlo de acuerdo a su propio sitio web, pero es totalmente comentado para que vea cómo funciona.

<script>  
     /* add all existing links here: language, uri and anchor. Important to keep the 
same order... the script will replace the first link in the navigation with the first
link on this list that matches the language. Do not need to add links for default language*/  
   var flagSymbol = 'Lang'  
      var linkTranslation = [  
           ['en','/', flagSymbol],  
           ['en','inicio-en.html','Intro'],  
           ['en','jeep-safari-en.html','Jeep Safari'],  
           ['en','vip-tour-en.html','VIP Tour'],  
           ['en','-servicios-en.html','More Services'],  
           ['en','media-en.html','Media'],  
           ['en','contacto-en.html','Contact'],  
           ['en','reservar-en.html','Bookings'],  
           ['de','/', flagSymbol],  
           ['de','inicio-de.html','Startseite'],  
           ['de','jeep-safari-de.html','Jeep Safari'],  
           ['de','vip-tour-de.html','VIP Tour'],  
           ['de','-servicios-de.html','Dienstleistungen'],  
           ['de','media-de.html','Medien'],  
           ['de','contacto-de.html','Kontakt'],  
           ['de','reservar-de.html','Buchungen'],  
           ['fr','/', flagSymbol],  
           ['fr','inicio-fr.html','Intro'],  
           ['fr','jeep-safari-fr.html','Jeep Safari'],  
           ['fr','vip-tour-fr.html','VIP Tour'],  
           ['fr','-servicios-fr.html','+ Services'],  
           ['fr','media-fr.html','Médias'],  
           ['fr','contacto-fr.html','Contactez'],  
           ['fr','reservar-fr.html','Réservations'],  
           ['nl','/', flagSymbol],  
           ['nl','inicio-nl.html','Intro'],  
           ['nl','jeep-safari-nl.html','Jeep Safari'],  
           ['nl','vip-tour-nl.html','VIP Tour'],  
           ['nl','-servicios-nl.html','+ Diensten'],  
           ['nl','media-nl.html','Media'],  
           ['nl','contacto-nl.html','Contact'],  
           ['nl','reservar-nl.html','Boekingen'],  
      ];  
 //detect current language  
 var domain = 'http://'+window.location.host+'/';  
 var currentUri = window.location.href;  
 var lang = "default";  
 function replaceNavLinks() {  
      for (var i = 0, l = linkTranslation.length; i < l; i++) {  
        var uri = domain+linkTranslation[i][1];  
           if (uri === currentUri) {  
             lang = linkTranslation[i][0];  
           }  
      }  
      //find and replace links if NOT default language  
      if (lang != "default") {  
           //new array with links to be added  
           var linksToReplace =[];  
           for (var i = 0, l = linkTranslation.length; i < l; i++) {  
                if (linkTranslation[i][0] === lang) {  
                     var uri2 = linkTranslation[i][1];  
                     var anchor = linkTranslation[i][2];  
                  linksToReplace.push([uri2,anchor]);  
                }  
           }  
           //detect links at navigation and replace them   
           var els = document.getElementById('menu').getElementsByTagName('a');  
           for (var i = 0, l = els.length; i < l; i++) {  
                var el = els[i];  
                el.href = linksToReplace[i][0];  
                el.innerHTML = linksToReplace[i][1];  
           }       
      }       
 }  
 replaceNavLinks();  
 </script>  

Lo que debe ajustar es el área resaltada en Amarillo y el área resaltada en Verde.
 
El área amarilla es una matriz con todas sus páginas web y urls. Los scripts comprueban primero si la URL actual coincide con cualquiera de las urls de la matriz. Si hay una coincidencia, comprueba el idioma asociado a esa url y sabe a qué idioma tiene que cambiar toda la navegación.
 
La palabra resaltada en verde es un id que tienes que encontrar en el código fuente de la página.
 
El script buscará enlaces dentro de una sección de su sitio web, por ejemplo:
Enlaces de navegación están aquí ...

Por lo que necesita escribir el id del elemento que contiene los enlaces de navegación.

Recuerda revisar la versión móvil también, puedes elegir un id que no exista en la versión móvil (nos pasó con Weebly) así que tienes que buscar de nuevo hasta encontrar un id que existe en ambas versiones. 
 

Paso 3: Agregue código JS al final de todas las páginas 

Weebly tiene una sección donde puedes agregar código en el pie de cada página. No lo agregue en la sección "diseño" porque no se aplicaría a la versión para móviles. En su lugar, tiene que ir a "Configuración", haga clic en la pestaña "SEO" y allí encontrará la sección para agregar código al pie de página que se aplica a las versiones de escritorio y móviles de su sitio web
 

Paso 4: Redireccionamiento del idioma de la página principal

Redireccionar esa página de inicio a un idioma específico es un gran tema por sí solo.
 
Se puede hacer de muchas maneras, esta es la forma en que creemos que proporciona la mejor experiencia de usuario con poco o nada de efectos secundarios:
 
En primer lugar, hemos convertido la página principal en una simple página con botones para elegir un idioma:

Y luego añadimos el siguiente código js:

<script type="text/javascript">
  var webRef = document.referrer.split('/')[2];
  if (webRef != 'www.example.com') {
    var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
    if (userLang.indexOf('es') > -1) document.location.href = 'inicio.html';
    else if (userLang.indexOf('de') > -1) document.location.href = 'inicio-de.html';
    else if (userLang.indexOf('fr') > -1) document.location.href = 'inicio-fr.html';
    else if (userLang.indexOf('nl') > -1) document.location.href = 'inicio-nl.html';
    else document.location.href = 'inicio-en.html';
  }
</script>

Lo que hace es buscar el dominio referenciador. La primera vez que llegue al sitio web, se redireccionará de acuerdo con el idioma del navegador, pero una vez que esté navegando dentro del sitio web, si el usuario vuelve a hacer clic en la página de idiomas, el redireccionamiento no se aplicará, mostrando los diferentes idiomas que puede elegir..


Esperamos que haya encontrado este artículo útil

¡Contáctanos!


¿Listo para comenzar a trabajar con nosotros? ¡Genial! Llámanos o envíanos un correo electrónico y nos pondremos en contacto contigo lo antes posible!

(+34) 922 394 632