Traducir un plugin de wordpress peleón

Ya sea en wordpress, prestashop, magento o cualquier otro CMS, en ocasiones nos encontramos con cadenas de texto que se resisten a ser traducidas. Normalmente esto es por que forman parte de un plugin, tema, modulo o complemento donde no se han definido las cadenas como traducibles. Una opción sería modificar el código backend, pero en muchas ocasiones esto trae un problema y es que al actualizar perderemos nuestros cambios. Ante este problema lo mejor es realizar una capa de JavaScript que se encargue de la traducción sin afectar a ningún otro componente de la web. En este ejemplo utilizo la librería JQuery pero se podría adaptar a JavaScript puro. También decir que este ejemplo lo desarrolle para solucionar un problema al traducir un plugin de wordpress, pero se puede aplicar a cualquier sitio web. Vamos con esas traducciones con JQuery.

La función para traducciones con JQuery

A continuación os pego el código de la función para luego ir explicando que hace cada parte.

function onFlyTranslates(){
  var lang = $("html").attr("lang");

  var translates = [];
  translates["en"] = [];
  translates["fr"] = [];

  translates["en"] = {
    "Pago con Tarjeta":"Credit/debit card payment",
  }
  translates["fr"] = {
    "Pago con Tarjeta":"Paiement par carte",
  }

  var elements = [
    "#payment-option-1-container span",
  ]

  $.each(elements,function(i,v){
    $(v).each(function(i) {
    	var element = $(this);
    	$.each(translates[lang],function(key,val){
          if(element.html() == key){
              element.html(val);
          }
    	});
    });
  });

1.- Detectando el lenguaje actual

var lang = $("html").attr("lang");

Detecta el lenguaje definido en el atributo «lang» del elemento html y crea una variable lang con su valor. En este caso los posibles valores de lang son «en» y «fr».

2.- Creando los arrays de traducciones

var translates = [];
translates["en"] = [];
translates["fr"] = [];

Definimos un array llamado «translates» así cómo anidamos dentro de ese array otro array para cada idioma.

3.- Definiendo claves y traducciones

translates["en"] = {
  "Pago con Tarjeta":"Credit/debit card payment",
}
translates["fr"] = {
  "Pago con Tarjeta":"Paiement par carte",
}

Introducimos en cada array de idioma las traducciones con la sintaxis «texto_actual»:»traducción» si hay que traducir múltiples cadenas añadiremos más líneas separadas por comas.

4.- Definiendo los elementos a traducir

var elements = [
    "#payment-option-1-container span",
  ]

Creamos un array con los identificadores JQuery de los elementos que queremos traducir. En el ejemplo se está traduciendo el texto de un span que está dentro de una caja con el id «payment-option-1-container». Si hubiera más elementos a traducir solo hay que añadir más identificadores.

5.- Hacemos la magia de las traducciones con JQuery

  $.each(elements,function(i,v){//bucle 1
    $(v).each(function(i) { //bucle 2
    	var element = $(this);
    	$.each(translates[lang],function(key,val){//bucle 3
          if(element.html() == key){//comparamos clave con contenido
              element.html(val);
          }
    	});
    });
  });

Hacemos la magia! Funciona con un recorrido de tres bucles anidados. El primer bucle recorre todos los elementos definidos en el paso anterior que son los contenedores de los textos a traducir. Por cada uno de estos elementos lo busca en el código de nuestra web y recorre cada uno de ellos (si hubiera más de uno). Por cada uno de estos elementos del código (que concuerda con el identificador definido. Recorremos el array translates (definido en el paso 2 y 3) pasando como clave el valor del lenguaje actual (la variable lang definida en el paso 1). Por lo que estamos recorriendo los valores «texto_actual»:»traducción» del lenguaje actual definido por el atributo lang de la página. Una vez hecho esto comparamos la clave del array con el contenido y si concuerda lo remplazamos por el valor.

6.- Ejecutar nuestra función

$(document).ready(function(){
  onFlyTranslates();	
});

Y así ejecutamos nuestra función en el momento de la carga de la web.

Espero que esto os sirva cuando tengáis problemas para traducir un plugin de wordpress, modulo de prestashop o una template conflictiva. Así es cómo podemos hacer traducciones con JQuery.

Hasta la próxima!

Traducir un plugin de wordpress peleón – Traducciones con JQuery