Skip Navigation
Atualizado
agosto 25, 2021

Um seletor de idioma permite aos visitantes selecionar 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 apresentam um bom visual com a maioria dos temas. Se o seletor de idioma não estiver sendo exibido corretamente com seu tema, talvez haja um conflito de CSS. Leia nosso guia sobre correção de problemas de estilização de seletores de idioma.

Para adicionar e personalizar seletores de idioma, acesse WPMLIdiomas no painel do WordPress.

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 de seletor de idioma

Configurações para preservar argumentos de URL

A seção de Opções de seletor de idioma contém a opção 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 visualizações de cada seletor de idioma ativo em seu site em funcionamento, 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 com 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 menus seletores de idioma

O WPML versão 3.6 adicionou, especificamente para o menu seletor de idioma, uma nova classe CSS: wpml-ls-menu-item. Isso 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 regras personalizadas à seção CSS adicional em 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. É possível 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 locais personalizados são definidas no mesmo lugar que as para outros seletores no seu site: na secçã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 com base nas opções definidas na seção Seletores de idioma personalizados.
  • do_action( 'wpml_footer_language_selector'); — gera o seletor de idioma com base 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 shortcodes do WPML abaixo. Novamente, o que faz a diferença é qual o seletor de idioma exibido.

  • [wpml_language_selector_widget] — gera o seletor de idioma com base nas opções definidas na seção Seletores de idioma personalizados.
  • [wpml_language_selector_footer] — gera o seletor de idioma com base 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.

Uso de um bloco de shortcode

É possível adicionar um seletor de idioma ao site com um bloco de shortcode. Pode ser usado o shortcode [wpml_language_selector_widget] ou o [wpml_language_selector_footer].

Bloco de shortcode
Bloco de shortcode

O shortcode [wpml_language_selector_footer] pode ser usado mesmo se a opção Mostrar seletor de idioma no rodapé estiver desabilitada.

Se quiser usar o shortcode [wpml_language_selector_widget] , primeiro é preciso habilitar a opção Seletores de idioma personalizados na página WPMLIdiomas.

Habilitação da opção “Seletores de idioma personalizados”
Habilitação da opção “Seletores de idioma personalizados”

Seus próprios seletores de idioma personalizados

Caso haja necessidade, você também pode criar seu próprio seletor de idioma exclusivo. Um seletor de idioma personalizado lhe permite incluir todas as opções que quiser, do modo que preferir. Muitas vezes as pessoas fazem isso para usar suas próprias bandeiras de idiomas ou ordenar os idiomas de maneiras peculiares.

Um seletor de idioma personalizado
Um seletor de idioma personalizado

Você pode criar seletores de idioma personalizados usando a API do PHP. Essa abordagem exige conhecimento de PHP.