O WPML vem com seu próprio seletor de idiomas, implementado como uma lista suspensa de idiomas. Ele é bastante flexível, mas nem sempre o suficiente.

Você pode criar seus próprios seletores de idioma personalizados e inserí-los no tema. Mostraremos como adicionar uma lista de idiomas disponíveis aos posts e uma lista de idiomas ao rodapé.

Obtendo a lista de (outros) idiomas

Use icl_get_languages() para obter a lista de traduções para qualquer página. Utilização:

icl_get_languages('skip_missing=N&orderby=KEY&order=DIR&link_empty_to=str')

* N=0/1
* KEY=id/code/name (name -> translated_name), (padrão: id)
* DIR=asc/desc (padrão: asc)
* link_empty_to = str (padrão: vazio, funciona em conjunto com o skip_missing=0 e permite usar links personalizados para idiomas que não têm tradução para o elemento atual. {$lang} pode ser usado como espaço reservado para o código de idioma)

Notas:

  • O parâmetro skip_missing diz à função como tratar línguas sem traduções.
  • A combinação de orderby e order permite criar seletores de idioma em que as línguas são exibidas sempre na mesma posição.

A função retorna um array com entradas por idioma. Por exemplo, para um site WordPress rodando em inglês, francês e italiano, ela retorna:

Array
(
 [0] => Array
  (
   [id] => 1
   [active] => 1
   [native_name] => English
   [missing] => 0
   [translated_name] => English
   [language_code] => en
   [country_flag_url] => http://yourdomain/wpmlpath/res/flags/en.png
   [url] => http://yourdomain/about
  )

 [1] => Array
  (
   [id] => 4
   [active] => 0
   [native_name] => Français
   [missing] => 0
   [translated_name] => French
   [language_code] => fr
   [country_flag_url] => http://yourdomain/wpmlpath/res/flags/fr.png
   [url] => http://yourdomain/fr/a-propos
  )

 [2] => Array
  (
   [id] => 27
   [active] => 0
   [native_name] => Italiano
   [missing] => 0
   [translated_name] => Italian
   [language_code] => it
   [country_flag_url] => http://yourdomain/wpmlpath/res/flags/it.png
   [url] => http://yourdomain/it/circa
  )
)

Cada idioma tem seu próprio array de parâmetros, que a função do seu tema pode usar para criar qualquer seletor de idiomas.

  • id: Identificador de referência interna
  • active: O idioma ativo atualmente (somente um idioma está ativo)
  • native_name: O nome nativo do idioma (nunca traduzido)
  • translated_name: O nome do idioma traduzido para a língua atualmente ativa
  • country_flag_url: A URL para uma imagem PNG com a bandeira do país
  • url: O link para a tradução neste idioma
  • missing: 1 se a tradução para o elemento está faltando, 0 se ela existe.

Manuseando traduções inexistentes

Algumas páginas podem não estar traduzidas para todos os idiomas. Você pode dizer a icl_get_languages o que retornar para idiomas que não têm traduções.

Se ‘skip_missing=1’, esses valores não aparecerão na saída. Se ‘skip_missing=0’, todos os idiomas serão exibidos e os idiomas com traduções inexistentes terão um link para a página inicial naquele idioma.

Como usar em suas funções do tema

Você pode construir seus próprios seletores de idioma do jeito que preferir. Aqui mostraremos dois usos comuns.

Os exemplos de funções PHP que estamos mostrando devem ser adicionados ao arquivo functions.php (no diretório do tema) e não ao plugin.

Este post também está disponível em…

Vamos supor que você queira adicionar uma linha, no início (ou fim) de cada post, dizendo em quais outros idiomas ele está disponível. Essa função deve retornar somente os posts traduzidos existentes e, se nenhuma tradução está disponível, não deve apresentar nenhuma saída.

function icl_post_languages(){
  $languages = icl_get_languages('skip_missing=1');
  if(1 < count($languages)){
    echo __('This post is also available in: ');
    foreach($languages as $l){
      if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
    }
    echo join(', ', $langs);
  }
}

O que a função faz é:

  1. Obtém a lista de idiomas do WPML – $languages = icl_get_languages(‘skip_missing=1’);
  2. Verifica se existe mais de um idioma para o post – if(1 < count($languages))
  3. Cria a saída, ignorando o idioma atualmente em exibição – if(!$l[‘active’])

Notas:

  1. A mensagem é passada pelo gettext. Isso é muito importante para que a mensagem, que você irá adicionar a posts em diferentes idiomas, apareça na língua correta:  __(‘Este post está também disponível em: ‘);
  2. Os nomes de idioma utilizados são os nomes de idioma traduzidos. Isso garante que a frase esteja escrita na língua correta: $l[‘translated_name’]

O resultado é este:

Mensagem sobre post disponível em outros idiomas
Mensagem sobre post disponível em outros idiomas

Para incluir essa mensagem nos posts, adicione uma chamada para icl_post_languages() no arquivo single.php.

Lista de idiomas e bandeiras para o rodapé

Mesmo que você não queira ter um seletor de idioma no topo da página, é uma boa idéia adicionar uma lista de idiomas e bandeiras ao rodapé. Muitas pessoas imediatamente rolam para o fim da página, para ter uma idéia do que vem pela frente. Portanto, incluir um seletor de idiomas proeminente provavelmente vai ajudar seus visitantes estrangeiros.

function languages_list_footer(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        echo '<div id="footer_language_list"><ul>';
        foreach($languages as $l){
            echo '<li>';
            if($l['country_flag_url']){
                if(!$l['active']) echo '<a href="'.$l['url'].'">';
                echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
                if(!$l['active']) echo '</a>';
            }
            if(!$l['active']) echo '<a href="'.$l['url'].'">';
            echo icl_disp_language($l['native_name'], $l['translated_name']);
            if(!$l['active']) echo '</a>';
            echo '</li>';
        }
        echo '</ul></div>';
    }
}

Essa função faz o seguinte:

  1. Se existe algum idioma de tradução, cria um DIV e inicia uma lista não ordenada: if(!empty($languages)){ echo ‘<div id=”footer_language_list”><ul>’;
  2. Adiciona cada um dos idiomas como um item da lista.
  3. Se não é o idioma ativo, também cria um link para a página naquele idioma: if(!$l[‘active’]) echo ‘<a href=”‘.$l[‘url’].'”>’;
  4. Adiciona a bandeira do idioma: <img src=”‘.$l[‘country_flag_url’].'” alt=”‘.$l[‘language_code’].'” width=”18″ height=”12″ />
  5. Adiciona os nomes de idiomas nas línguas nativa e traduzida, se eles são diferentes: echo icl_disp_language($l[‘native_name’], $l[‘translated_name’]);

A função icl_disp_language() é criada pelo WPML. Ela verifica se os dois argumentos (native_language_name, translated_language_name) são diferentes. Se sim, ela retorna ambos, senão retorna somente um.

Também podemos adicionar um pouco de CSS para dar estilo à lista de idiomas. Este CSS irá centralizar a lista de idiomas em seu rodapé e formatá-lo.

#footer_language_list{
  margin-bottom: 25px;
  text-align: center;
}

#footer_language_list ul{
  list-style: none;
  margin:0;
  padding:0;
}

#footer_language_list ul li img{
  margin-right:5px;
}

#footer_language_list ul li{
  display:inline;
  margin:0 5px 0 5px;
  padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
  color: #fff;
  text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
  color: #fff;
}

Aqui está o seletor de idiomas:

Rodapé com idiomas
Rodapé com idiomas

Para adicioná-lo a seu tema, adicione a chamada para languages_list_footer ao arquivo footer.php.

* Nota: você pode facilmente transformar esse seletor de idiomas horizontal em um seletor de idiomas vertical. Apenas remova o comando display: inline do CSS.

Seletor de idiomas somente com bandeiras

Função simples para exibir bandeiras com links para traduções da página atual.

function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

A saída dessa função precisa ser estilizada separadamente. Por exemplo, colocando a função em um bloco div e definindo estilos personalizados para as tags img.

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

O CSS:

#flags_language_selector img{
      margin:1px;
      border:1px solid #333;
}
Seletor de idiomas com bandeiras

Substituindo as bandeiras de país e modificando o nome dos idiomas

O WPML inclui interface para edição das informações de idioma. Vá para WPML->Idiomas e clique em Editar idiomas. Você poderá modificar o nome dos idiomas, editar seu locale e escolher bandeiras diferentes.

'skip_missing=0&orderby=name'