Como corrigir problemas de estilo e CSS dos seletores de idiomas

Certos temas que apresentam geradores de menus personalizados podem não exibir os seletores de idiomas do WPML corretamente. Aqui, fornecemos passos de solução de problemas para questões relacionadas ao estilo dos seletores de idiomas.

Para sua conveniência, também apresentamos uma descrição detalhada do CSS usado no seletor de idiomas de menu do WPML, caso você esteja procurando por personalizações avançadas.

Como solucionar problemas de exibição com seletores de idiomas suspensos e de menu

Como em todo processo de depuração, existem alguns passos iniciais para detectar se algo está interferindo na renderização correta do seu seletor de idiomas.

1. Adicione temporariamente um seletor de idiomas de rodapé que tem um CSS muito simples e funcionará em quase qualquer site.
2. Remova temporariamente qualquer CSS personalizado e use o seletor de idiomas do WPML com suas configurações padrão.
3. Use o depurador de CSS do seu navegador e veja se há conflitos óbvios de CSS. Se você encontrar a causa, pode substituir o estilo CSS na página WPML → Idiomas, na seção Opções do seletor de idiomas. Lá, clique no link CSS adicional.

Se houver problemas entre o tema e o WPML, a equipe de suporte do WPML trabalhará com nossa equipe de compatibilidade e com o autor de tema para fornecer a você uma solução adequada.

Classes CSS por idioma

A seguir está a lista das classes CSS para cada idioma:

• wpml-ls-slot-{slug}: por exemplo, “wpml-ls-slot-sidebar-1”.
• wpml-ls-item.
• wpml-ls-item-{language_code}: por exemplo, “wpml-ls-item-en”.
• wpml-ls-current-language: apenas para o item do idioma atual.
• wpml-ls-menu-item: apenas para seletores de idiomas em menus.
• wpml-ls-first-item: para direcionar ao primeiro item de idioma da lista.
• wpml-ls-last-item: para direcionar ao último item de idioma da lista)

Se for necessário alterar as classes CSS para cada idioma, o WPML oferece o hook de filtro wpml_ls_model_language_css_classes.

Por exemplo, digamos que você precise adicionar uma classe my-custom-item-class para cada idioma. Nesse caso, você pode adicionar um código como o seguinte ao arquivo functions.php do seu tema:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

Classes CSS do wrapper do seletor de idiomas

A seguir está a lista das classes CSS para o wrapper do seletor de idiomas:

• wpml-ls
• wpml-ls-{group}-{slug}: por exemplo, “wpml-ls-statics-footer”.
• wpml-ls-{template-slug}: por exemplo, “wpml-ls-legacy-dropdown-click”.
• wpml-ls-rtl: para idiomas RTL.
• wpml-ls-touch-device: esta classe é adicionada para dispositivos móveis e tablets.

Na tabela a seguir, mostramos como as classes CSS são criadas dependendo do {group} e {slug}:

Como antes, se você precisar adicionar uma classe CSS personalizada para o wrapper do seu seletor de idiomas, pode usar nosso hook de filtro wpml_ls_model_css_classes. Um código como o seguinte no arquivo functions.php do seu tema adicionará uma classe CSS my-custom-wrapper-class:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

Nota: o WPML injeta apenas alguns elementos para a opção do seletor de idiomas em menus. Como consequência, ele não tem nenhuma classe de wrapper.

Como personalizar um seletor de idiomas com CSS

Podemos adicionar facilmente alguns estilos CSS personalizados na página WPML → Idiomas, na seção Opções do seletor de idiomas. Lá, clique no link CSS adicional.

Exemplo 1: exibir o idioma atual em negrito

.wpml-ls-current-language {
font-weight: bold;
}

Exemplo 2: alterar o tamanho da fonte apenas para o seletor de idiomas no rodapé

.wpml-ls-statics-footer {
    font-size: 18px;
}

Exemplo 3: dar alguma margem à direita após o último item de idioma

.wpml-ls-last-item {
    margin-right: 10px;
}

Você também pode combinar seletores para ter um direcionamento melhor.

Exemplo 4: adicionar texto em negrito para o idioma atual do seletor de idiomas no rodapé

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

Exemplo 5: corrigir a largura de um seletor de idiomas em um menu

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}