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.