Pular para o conteúdo Pular para a barra lateral
Início » Documentação do WPML » Guia de introdução » Configuração de idioma » Como Adicionar um Seletor de Idiomas ao Seu Site WordPress » Alternador de idioma personalizado

Alternador de idioma personalizado

Amir
Atualizado
maio 22, 2024

Ao desenvolver sites multilíngues com o WPML, você pode precisar de um seletor de idioma personalizado. Saiba como fazer isso com um pouco de PHP e CSS simples.

WPML permite que você adicione seletores de idioma a seus menus, widgets, rodapés e sites usando o Editor de Sites (anteriormente conhecido como Edição Completa de Sites), com opções de personalização e sinalizadores integrados. Mas talvez você precise de algo mais especial para o seu site.

Neste tutorial, mostraremos como adicionar um alternador de idioma flutuante. Um alternador de idioma flutuante tem um ótimo visual e facilita para os clientes a visualização do site no idioma deles.

Um site que usa o alternador de idiomas flutuante

Siga estas três etapas principais:

  1. Adicione o código PHP que renderiza o alternador de idioma
  2. Estilize seu seletor de idioma com CSS
  3. Atualizar as configurações do seletor de idioma

A parte do PHP

A primeira etapa é adicionar o código PHP responsável por renderizar o seletor de idioma em sua página. Para isso, você cria uma função que adiciona um contêiner div com o seletor de idioma dentro dele. Podemos usar o Ação wpml_add_language_selector para renderizar o seletor de idioma.

Neste exemplo, queremos que o novo seletor de idioma seja exibido no rodapé, portanto, usamos nossa nova função com o gancho wp_footer do próprio WordPress.

O código PHP completo terá a seguinte aparência.

Language switcher PHP 
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Você pode copiá-lo e adicioná-lo ao arquivo functions.php do seu tema (filho).

A parte do estilo

Com o código anterior implementado, já temos um novo seletor de idioma adicionado ao rodapé do nosso site. Agora, é hora de personalizá-lo para que ele fique flutuando no canto inferior direito do site. Você pode fazer isso usando o atributo CSS position: fixed.

Use as etapas a seguir para adicionar o código CSS:

  1. Vá para WPML → Idiomas.
  2. Role para baixo até Opções de alternador de idioma e expanda a seção CSS adicional .

Como alternativa, você pode adicionar esse código CSS acessando Appearance → Customize e clicando em Additional CSS.

O exemplo a seguir adiciona algumas personalizações extras, como bordas arredondadas e sombra de caixa. É claro que você pode personalizá-lo como quiser.

Language Switcher Styling 
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

A parte de configurações

Por fim, você precisa ajustar algumas configurações para que o alternador de idiomas exiba apenas as bandeiras.

Siga as etapas a seguir:

  1. Vá para WPML → Idiomas.
  2. Role para baixo até Alternadores de idioma personalizados e clique em Ativar.
  3. Clique no botão Personalizar.
  4. Para O que incluir no alternador de idioma, selecione Sinalizador e desmarque as outras opções.
  5. Clique em Salvar.
Language switcher options
Exibir somente a bandeira no alternador de idiomas flutuante

É isso aí! Agora você deve ter um bom alternador de idioma personalizado no site:

Horizontal language switcher
O alternador de idiomas no front-end

Bônus: alternador de idioma flutuante vertical

Em vez disso, você também pode criar um alternador de idioma vertical, como na captura de tela abaixo:

Vertical language switcher
Seletor de idioma vertical

Para isso, basta substituir o CSS anterior pelo código a seguir:

Vertical Language Switcher CSS 
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}