Seletor de idiomas personalizado

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

O WPML permite que você adicione seletores de idiomas aos seus menus, widgets, rodapés e a sites que usam o Editor de Sites (anteriormente conhecido como Edição Completa do Site), com opções de personalização e bandeiras integradas. Mas você pode precisar de algo mais especial para o seu site.

Neste tutorial, mostraremos como adicionar um seletor de idiomas flutuante. Um seletor de idiomas flutuante fica ótimo e facilita para os seus clientes visualizarem o seu site no idioma deles.

Siga estes três passos principais:

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

A parte do PHP

O primeiro passo é adicionar o código PHP responsável por renderizar o seletor de idiomas na sua página. Para isso, você cria uma função que adiciona um contêiner div com o seletor de idiomas dentro dele. Podemos usar a ação wpml_add_language_selector para renderizar o seletor de idiomas.

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

O código PHP completo ficará assim.

//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 da estilização

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

Siga estes passos para adicionar o código CSS:

1. Vá para WPML → Configurações → Seletores de idiomas.
2. No cartão Opções do seletor de idiomas, expanda CSS adicional.

Como alternativa, você pode adicionar este código CSS indo para Aparência → Personalizar e clicando em CSS adicional.

O exemplo a seguir adiciona algumas personalizações extras, como bordas arredondadas e box-shadow. Claro, você pode personalizá-lo como quiser.

/*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 das configurações

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

Siga estes passos:

1. Vá para WPML → Configurações → Seletores de idiomas → Seletores de idiomas personalizados.
2. Role para baixo até Seletores de idiomas personalizados e clique em Ativar.
3. Clique no botão Personalizar.
4. Em O que incluir no seletor de idiomas, deixe Bandeira marcado e desmarque Nome do idioma nativo, Nome do idioma no idioma atual e Idioma atual.
5. Clique em Salvar.

Pronto! Agora você deve ter um belo seletor de idiomas personalizado no site:

Bônus: seletor de idiomas flutuante vertical

Você também pode criar um seletor de idiomas vertical, como na captura de tela abaixo:

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

/*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;
}