A l’estudi em van passar un projecte en WordPress començat, que faltava acabar. Concretament, calia aplicar traduccions a la web per fer-la multiidioma.

El primer que vaig pensar va ser utilitzar Polylang (un plugin de WordPress gratuït enfocat a gestionar pàgines homòlogues per diferents idiomes). Així doncs, vaig descarregar i instal·lar el plugin, i el vaig activar. De sobte, el tema de WordPress que hi havia aplicat va deixar de funcionar. Vaig desactivar Polylang i tot va tornar a la normalitat.

Polylang no era compatible amb aquell tema.

Vaig investigar alternatives a Polylang. Algunes eren de pagament, a un preu excessiu pel pressupost del projecte. Altres no tenien funcions suficients.

Cansat de buscar, vaig preparar jo mateix l’arquitectura de la pàgina multiidioma…

  1. Crear un sol menú per tots els idiomes, i diferenciar els enllaços de diferents idiomes amb <etiquetes> representatives.
    ex: <ca>Inici</ca> | <es>Inicio</es> | <en>Homepage</en> | etc.
  2. Crear ítems de menú que continguin “lang” i el nom de l’idioma i una classe representativa.
    ex: <lang class=”cat”>CATALÀ</lang>
  3. En l’editor de pàgines de WordPress, associar les pàgines d’un idioma com a “filles” de la pàgina inicial del mateix idioma.
    ex: Inici (pàgina pare)
    – Qui som? (pàgina filla)
    – Què fem? (pàgina filla)
    – Contacte (pàgina filla)

Així, l’estructura de les URLs comprendrà elements com “/en/” o “/es/” que permetràn distingir l’idioma mitjançant la URL.

Cal instal·lar un plugin de programació. Jo utilitzo Simple Custom CSS and JS. Cal crear un document nou de Javascript i col·locar-hi el codi següent.

jQuery(window).load(function(){
jQuery("lang").parent().addClass("adapta"); // <== la classe "adapta" ha de portar associats els estils del selector d'idioma en el menú
jQuery("es").parent().parent().attr("style","display:none;"); //<== ocultació dels enllaços del menú en els idiomes diferents al principal
jQuery("en").parent().parent().attr("style","display:none;"); //<== ocultació dels enllaços del menú en els idiomes diferents al principal
var domini = window.location.protocol+"//"+window.location.hostname;
var idioma = 0;
var pathname = window.location.pathname;
var es = pathname.indexOf("es");
var en = pathname.indexOf("en");
if(es<0 && en<0){
// menú en CATALÀ; els elements en castellà i anglès del menú no es veuràn
idioma=0;
}
else if(es==1 && (pathname.charAt(3)=="/")){
// menú en CASTELLÀ; els elements en català i anglès del menú no es veuràn
idioma=1;
}else if(en==1 && (pathname.charAt(3)=="/")){
// menú en ANGLÈS; els elements en català i castellà del menú no es veuràn
idioma=2;
}else{
idioma=0;
// menú en CATALÀ;
}
//redireccionar enllaços IDIOMA - crear pàgines homòlogues
var ruta = [
["/","/es/","/en/"],
["/empresa/","/es/empresa/","/en/company/"],
...
];
// A l'array anterior, la primera columna correspon a CATALÀ, la segona a CASTELLÀ i la tercera a ANGLÈS
if(idioma==0){//si som en una pàgina en CATALÀ
jQuery("ca").parent().parent().removeAttr("style");
jQuery("es").parent().parent().remove();
jQuery("en").parent().parent().remove();
jQuery(".portfolio_es").remove();
jQuery(".portfolio_en").remove();
jQuery("lang.cat").parent().attr("href",pathname);
for(var i=0;i<ruta.length;i++){
for(var j=0;j<ruta[i].length;j++){ if(ruta[i][j]==pathname){ jQuery("lang.esp").parent().attr("href",ruta[i][1]); jQuery("lang.eng").parent().attr("href",ruta[i][2]); } } } if(pathname.indexOf("/portfolio-posts/")>=0){
jQuery("lang.esp").parent().attr("onclick",'document.cookie = "idioma=1; path=/"; window.location.reload();');
jQuery("lang.eng").parent().attr("onclick",'document.cookie = "idioma=2; path=/"; window.location.reload();');
}
jQuery(".similar-post-title").html("Projectes relacionats");
jQuery("header .header-logo>a").attr("href","/");
}else if(idioma==1){//versió de l'anterior per si som en una pàgina en CASTELLÀ
}else if(idioma==2){//versió de l'anterior per si som en una pàgina en ANGLÈS
}
});