Um seletor de idioma permite que seus visitantes selecionem o idioma em que querem ler o conteúdo do site. O WPML lhe permite adicionar formas diferentes de um seletor de idioma: em um menu, como um widget ou no rodapé do site. Você pode usá-lo também para mostrar links acima ou abaixo de posts, oferecendo-os em outros idiomas.

Os seletores de idioma adicionados com o WPML vão funcionar e ter boa aparência com qualquer tema.

Os seletores de idioma de seu site são adicionados e personalizados na página WPML -> Idiomas.

Opções globais do seletor de idioma

A primeira seção relacionada a seletores de idioma é aquela para configurações globais, como a ordem dos idiomas. Note que essas opções são aplicadas a todos os seletores de idioma que você adicionar.

A seção principal de opções de seletor de idioma

A seção principal de opções do seletor de idioma

Configurações para preservar argumentos de URL

A seção de Opções de seletor de idioma exibe uma caixa de diálogo chamada Preservar argumentos de URL.

Os argumentos de URL podem ser necessários para alguns plugins e você talvez queira mantê-los ao trocar de idiomas — esse é o objetivo deste recurso. Os argumentos que deseja preservar devem ser adicionados aqui como uma lista separada por vírgulas.

Caixa de diálogo “Preservar argumentos de URL

Caixa de diálogo “Preservar argumentos de URL”

Vamos considerar o uso deste recurso no exemplo a seguir:

  • Digamos que você adicione os seguintes argumentos: bar, foo.
  • Você traduz o post “Hello world”.
  • Na interface, abra o post “Hello World” e adicione isto no fim do URL: ?bar=10&foo=100&lost=1000 (note que adicionamos os dois argumentos + o lost)
  • Troque de idioma; o URL vai terminar somente com ?bar=10&foo=100

Seções separadas para os diferentes tipos de seletores de idioma

Cada tipo de seletor de idioma tem sua própria seção separada. As opções selecionadas para diferentes tipos de seletores de idioma se aplicam, respectivamente, a cada seletor. A página Idiomas, mostra uma exibição em funcionamento para seletores de idioma diferentes ativos em seu site, como mostrado na figura abaixo.

Seções separadas para cada tipo de seletor de idioma

Seções separadas para cada tipo de seletor de idioma

Cada seção tem seu próprio botão “adicionar” (para adicionar um outro seletor de idioma daquele tipo), um ícone de “lápis” para editar o seletor existente, e um ícone de “lixeira”.

Controle total sobre cada seletor de idioma

Cada tipo de seletor de idioma tem suas próprias configurações. Isto lhe permite controle total e independente sobre o que será incluído e que aparência terá.

Por exemplo, a figura abaixo mostra uma caixa de diálogo com configurações do menu seletor de idioma.

Configurações do menu seletor de idioma

Configurações do menu seletor de idioma

Visualização dinâmica das opções de seletor de idioma

À medida que você muda as configurações do seletor de idioma, a visualização se atualiza. A visualização é “esquemática”. Ela não carrega o CSS da interface (não é uma boa ideia fazer isso no painel de administrador do WordPress), assim o verdadeiro seletor de idioma será estilizado de modo diferente. Entretanto, com ela você pode ver o efeito das diferentes opções, configurações de cor, de ordem e de conteúdo.

A estrutura HTML dos menus seletores de idioma

Desde a versão 3.6, o WPML não renderiza seletores de idioma com seu próprio HTML. Em vez disso, ele introduz os elementos do “seletor de idioma” na estrutura do menu. Desta forma, o seu tema renderiza o seletor de idioma da mesma forma que os outros itens do menu.

Basicamente, isso faz que o seletor de idioma combine melhor com seu site, adquirindo a aparência definida pelo CSS do seu tema.

Menu seletor de idioma na interface

Menu seletor de idioma na interface

Personalização de seletores de idioma de menu

O WPML versão 3.6 adicionou especificamente para o menu seletor de idioma, uma nova classe CSS: wpml-ls-menu-item. Isto simplifica a personalização dos itens de seu menu seletor (links).

Por exemplo, se você usa o tema Twenty Sixteen e o seu menu seletor exibe só as bandeiras dos idiomas, a renderização dele na interface ficará esquisita. Como você pode ver na figura abaixo, a largura dos itens do menu está muito grande, o que fica estranho.

Seletor de idioma só com bandeiras com o tema Twenty Sixteen

Seletor de idioma só com bandeiras com o tema Twenty Sixteen

Você pode corrigir isso com facilidade usando a classe CSS wpml-ls-menu-item.


li.wpml-ls-menu-item ul li a {

width: auto;

}

Não é necessário editar o arquivo CSS do tema; basta adicionar as regras de personalização à seção CSS adicional debaixo de Opções do seletor de idioma.

Desta forma, a largura da lista de itens é ajustada, como mostrado na figura abaixo.

Menu seletor de idioma após a aplicação do CSS personalizado

Menu seletor de idioma após a aplicação do CSS personalizado

Exibição dos seletores de idioma do WPML em locais personalizados

Às vezes, você precisa adicionar um seletor de idioma em certa localização personalizada. Você pode fazer isso dentro dos modelos PHP de seu tema ou diretamente dentro de páginas e posts.

Note que as configurações globais para seletores de idioma em localizações personalizadas são definidas no mesmo lugar que as de outros seletores no seu site, na seção Opções de seletor de idioma, na página Idiomas.

Com o uso de ações do PHP

Para exibir o seletor de idioma dentro dos arquivos de modelo PHP de seu tema, é possível usar as duas ações a seguir.

  • do_action(‘wpml_add_language_selector’);– gera o seletor de idioma baseado nas opções definidas na seção Seletores de idioma personalizados.
  • do_action( ‘wpml_footer_language_selector’ );– gera o seletor de idioma baseado nas opções definidas na seção Seletor de idioma de rodapé, mesmo se a opção Mostrar seletor de idioma no rodapé estiver desabilitada.

Com o uso de shortcodes do WPML

Dentro de posts e páginas, você pode usar um dos dois WPML shortcodes abaixo. Novamente, o que faz a diferença é qual o seletor de idioma exibido.

  • [wpml_language_selector_widget] – gera o seletor de idioma baseado nas opções definidas na seção Seletores de idioma personalizados.
  • [wpml_language_selector_footer] – gera o seletor de idioma baseado nas opções definidas na seção Seletor de idioma de rodapé, mesmo se a opção Mostrar seletor de idioma no rodapé estiver desabilitada.

Seus próprios seletores de idioma personalizados

Se necessário, há também a opção de criar seu próprio seletor de idioma exclusivo. Um seletor de idioma personalizado lhe permite incluir todas as opções que quiser, como quiser. Muitas vezes as pessoas costumam usá-lo para exibir suas próprias bandeiras de idiomas de maneiras peculiares.

Um seletor de idioma personalizado

Um seletor de idioma personalizado

Existem duas maneiras de fazer isso: usar modelos do Twig ou usar a API do PHP.

Desde a versão 3.6, os recursos do WPML dão suporte para a criação de seletores de idioma personalizados com o uso de modelos do Twig. Essa é a abordagem preferível, pois é mais simples e não inclui qualquer programação em PHP. O melhor de se usar modelos do Twig é que você pode incluí-los em temas com facilidade e eles vão aparecer como opções para os usuários.

A outra maneira de criar seletores de idioma personalizados é usar a API do PHP. Essa abordagem exige conhecimento de PHP.