0

Olá,

Estou trabalhando em cima de um site, onde o cliente me passou em pdf dos textos do site, em outra lingua, para assim, eu adicionar uma opção no site para mudar a linguagem.

*o site nao é em wordpress.

porem eu nao sei nem por onde começa a fazer isso, Alguem poderia me dar uma luz?

THANKS

1

1 Resposta 1

0

Existem diversas formas de definir diferentes idiomas ao site. Talvez a mais recomendada seja utilizar Gettext uma biblioteca GNU.

Uma forma alternativa (e que uso) é utilizar objetos javascript e linkalos a sua página e utilizar uma função em javascript para "traduzir" o source.

Um exemplo simples seria definir um arquivo (objecto) como padrão e carregar outros pela iteração do usuário com $_POST por exemplo.

Contudo note que essa "tradução" só ocorreria após o load da página diferente de gettext que já traduz na saída do PHP.

Essa opção também delega ao usuário o custo deste processamento por isso fica a observação que talvez não seja recomendada para ser utilizada com um source de grande volume.

Seria possível também criar um cookie para lembrar a opção de idioma do usuário más esta questão não abordarei no exemplo.

index.php

<?php
// array de idiomas permitidos
$allowed_languages = ['en-US','pt-BR'];
// verificar se houve um post e se é um valor permitido
if( isset($_POST['lang']) AND in_array($_POST['lang'], $allowed_languages) ){
    // definir o novo caminho
    $lang_path = 'path/tojslanguage/i18n_'.$_POST['lang'].'.js';
    // salvar em sessão (para recuperar e outros pontos ou no reload)
    $_SESSION['lang'] = $_POST['lang'];
}else{
    // verificar se ha sessão
    if( isset($_SESSION['lang']) ){
       // recuperar
       $lang_path = 'path/tojslanguage/i18n_'.$_SESSION['lang'].'.js';
    }else{
       // definir um valor padrão
       $lang_path = 'path/tojslanguage/i18n_en-US.js';
       // salvar sessão (valor default)
       $_SESSION['lang'] = 'en-US';
    }
}

// Neste ponto seria interessante utilizar a sessão na tag `<html lang="">`
?>

<!DOCTYPE html>
<html lang="">
<head>
   <title></title>
</head>
<body>

   <!--
     os atributos recomendados para servirem de referencia ao javascript
     seriam: "class" e "data-".

     como exemplo deixo uma h1 a ser traduzida e botões para disparar a ação
   -->

   <h1 data-html="words.title" class="i18n"></h1>

   <button id="en-US" data-html="words.USlang" class="i18n choose-lang"></button><br>

   <button id="pt-BR" data-html="words.BRlang" class="i18n choose-lang"></button>

   <script type="text/javascript" src="<?php echo $lang_path; ?>"></script>

   <script type="text/javascript">
  //
  var wd = window,
      dc = document,
      XHR = (new XMLHttpRequest()),
      FD  = (new FormData());

  // função para disparar um post
  var requestPost = function(url, params, callback){
      // catch response
      XHR.onreadystatechange = function(){
          if(XHR.readyState == 4 && XHR.status == 200){
             if(callback){
                callback(XHR.responseText);
             }
          }
      }
      // open
      XHR.open('POST', url, true);
      /**
       * set header [obsolete in use FormData API]
       * XHR.setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=UTF-8');
       */
      // check
      if(!params || typeof params !== 'object' || Object.keys(params).length < 1){
         return false;
      }else{
         var keys = Object.keys(params),
             i    = keys.length;
         // loop (inverse)
         while(i--){
           FD.append(keys[i], params[keys[i]]);
         }
         // send
         XHR.send(FD);
      }
  };

  var choose_lang = dc.getElementsByClassName('choose-lang');
  //loop
  for(var i = 0; i < choose_lang.length; i++){
      //
      choose_lang[i].addEventListener('click', function(){
         // recupar o id (idioma)
         var language = this.getAttribute('id');
         requestPost('./', {lang: language});
         location.reload(true);
      });
  }

  var ilib = function(){
      // buscar referencia
      var set = dc.getElementsByClassName('i18n');
      // fazer o loop para buscar todas as referencias
      for(var i = 0; i < set.length; i++){
          // capturar a referencia do objecto
          var html  = set[i].getAttribute('data-html');
          // checar se há (existe) valor definido
          if(!!html && typeof html !== undefined){
             // separar referencias
             var transc = set[i].getAttribute('data-html').split('.');
             /**
               checar o número de palavras...
               note neste exemplo apenas duas más é possíveis definir varias
              */
              if(transc[2]){
                 var word = i18n[transc[0]][transc[1]][transc[2]];
              }else{
                 var word = i18n[transc[0]][transc[1]];
              }
              // aplicar tradução
              set[i].innerHTML = word;
          }
      }
  };
  // dispara tradução após carregar a página
  wd.onload = ilib();
  </script>
  </body>
  </html>

i18n_en-US.js

var i18n = {
    words: {
       title: 'Welcome to site.com',
       USlang: 'Englis (USA)',
       BRlang: 'Portuguese (Brazil)'
    }
};

i18n_pt-BR.js

var i18n = {
    words: {
       title: 'Bem vindo ao site.com',
       USlang: 'Ingles (USA)',
       BRlang: 'Portugues (Brasil)'
    }
};

Este exemplo esta em javascript puro más é possível utilizar|adaptar via jQuery para facilitar por exemplo: "preppends" ou "appends" é possível utilizar para definir placeholders, titles, alt, etc...

Para inserir valores vindos de referencia pelo PHP como do banco de dados basta colocar os valores seguindo esta lógica dentro do atibuto data-html="".

exemplo:

<?php
   // exemplo ficticio de um valor salvo no banco de dados
   $value = 'words.palavara_qualquer';
?>

<a data-html="<?php echo $value; ?>" class="i18n" href="#"></a>

Nestes exemplos é possível criar um indice e sub-indices dentro do objeto:

// o objeto em si (i18n)
var i18n = {

    // um indice (words)
    words: {
       // um sub-indice (ou item)
       title: 'Uma palavra qualquer um uma frase'
    },
    // outro indice
    teplates: {
       // um sub-item de templates
       dark: 'Escuro'
    }

};

Para um código fonte estável (finalizado) e que não seja extenso acredito ser uma boa alternativa pois salvando em cache os arquivos javascript não ira impactar na experiencia do usuário para com o site.

Agora para projetos de constante manutenção toda vez que houver mudanças nos arquivos de idioma o usuário terá de fazer o download novamente para cache.

Nota: exemplo funcional.

1
  • 1
    Muito obrigado, eu consegui resolver usando o seu post!! Thanks <3 Commented 15/09/2016 às 11:28

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .