Personalize o seletor de idiomas do WPML – posicionamento, estilo e comportamento

O que o seletor de idiomas do WPML pode fazer

Pronto para usar, o WPML produz um seletor que:

• Mostra todos os idiomas ativos no seu site, na ordem que você escolher.
• Rotula cada idioma pelo seu nome nativo (Deutsch, Français) ou no idioma atual do site (alemão, francês) – a escolha é sua.
• Mostra bandeiras opcionalmente (um sprite que se ajusta ao seu tema).
• Lida com traduções ausentes de forma elegante: ignora o idioma ou cria um link para a página inicial daquele idioma.
• Pode ser colocado em qualquer menu do WordPress, em qualquer área de widget, no rodapé ou em linha acima e abaixo de posts.
• Vem em um bloco do Gutenberg para qualquer layout de construtor de páginas.
• Pode ser oculto em páginas específicas onde atrapalharia (404, checkout, conta).
• Armazena em cache seu HTML renderizado para carregamentos rápidos de página.

A maioria dos sites usa os posicionamentos integrados e os padrões. Os desenvolvedores de temas que precisam de mais controle podem construir um seletor personalizado em código usando a API do WPML.

Onde ficam as configurações

Abra WPML > Configurações > Seletores de idiomas. A página é agrupada por pergunta, não por aba de interface. Escolha a seção que corresponde ao que você quer mudar.

Quais idiomas aparecem e em qual ordem

O cartão Opções do seletor de idiomas tem uma área de arrastar e soltar que lista todos os idiomas ativos. A ordem aqui determina a ordem em todos os seletores do site. Arraste os idiomas para cima ou para baixo e salve.

No mesmo cartão, escolha:

• Rótulo nativo em vez de idioma atual. Mostre Deutsch (nativo) ou alemão (idioma atual). O nativo é mais convidativo para os falantes daquele idioma; o idioma atual é mais claro para visitantes de primeira viagem.
• Bandeiras ativadas ou desativadas, e o formato da bandeira.

O que acontece quando falta uma tradução

Nem todas as páginas são traduzidas para todos os idiomas. A opção Como lidar com idiomas sem tradução decide o que o seletor faz para um idioma que não tem tradução da página atual:

• Ignorar idioma (padrão). O idioma desaparece do seletor para esta página. A experiência de usuário mais limpa; os visitantes só veem os idiomas que podem realmente ler.
• Link para a página inicial do idioma para traduções ausentes. Em vez disso, a entrada do seletor mostra a página inicial do idioma. Útil quando você quer que todos os idiomas estejam sempre acessíveis a partir de qualquer página, mas os visitantes podem acabar em um conteúdo que não esperavam.

A escolha tem implicações na experiência do usuário que valem a pena ser pensadas com cuidado.

Onde o seletor aparece

Cinco posicionamentos, cada um alternado de forma independente na mesma página de Configurações:

• Seletor de idiomas de menu. Coloque o seletor em qualquer menu do WordPress (cabeçalho, rodapé, barra lateral, onde quer que seu tema atribua menus). Adicione vários se você quiser posicionamentos diferentes por menu. Cada seletor de menu ganha sua própria linha de visualização mostrando onde ele fica.
• Seletor de idiomas de widget. Adicione o seletor a qualquer área de widget que seu tema registre: barras laterais, zonas de cabeçalho, colunas de rodapé.
• Seletor de idiomas de rodapé. Um único botão global que renderiza automaticamente o seletor na parte inferior de todas as páginas.
• Links em linha para traduções de posts. Uma única caixa de seleção que mostra links de “este post está disponível em X” acima ou abaixo de cada post.
• Seletores personalizados. Quando os posicionamentos integrados não são suficientes, os desenvolvedores de temas podem chamar a API do seletor do WPML de qualquer arquivo de modelo. A página de Configurações expõe um botão Personalizar para as opções de renderização.

Oculte o seletor em páginas específicas

Algumas páginas não precisam de um seletor: sua página 404, telas de conta, checkout. As regras de exibição condicional do WPML permitem que você oculte o seletor por página sem recorrer a CSS display:none no seu tema.

Você define as regras por página na mesma página Configurações > Seletores de idiomas. Escolha as páginas nas quais você quer que o seletor fique oculto; a regra se aplica a todos os posicionamentos do seletor de uma só vez.

Preserve os parâmetros de URL

Quando um visitante clica no seletor, o WPML reconstrói o URL para o idioma de destino. Por padrão, os parâmetros de string de consulta (?utm_source=newsletter, parâmetros de filtro, etc.) são descartados. Isso quebra campanhas de análise e listagens filtradas.

O campo Preservar argumentos de URL lista as chaves de consulta que você quer preservar durante a alternância. Qualquer coisa que você colocar aqui (uma por linha) viaja com o visitante para o URL traduzido.

CSS personalizado para o seletor

Uma única área de texto em CSS adicional aplica estilo a todos os seletores no site de uma só vez. Útil para combinar o seletor com o seu tema sem tocar nos arquivos do tema.

Armazenar o modelo do seletor em cache

O cartão Desempenho tem uma única caixa de seleção: Armazenar em cache os modelos do seletor de idiomas. Com ela ativada, o WPML armazena em cache o HTML renderizado de cada posicionamento do seletor, o que acelera o carregamento da página em um site movimentado.

O detalhe: quando você muda uma opção do seletor e não vê sua mudança refletida no front-end, o cache é o primeiro lugar a verificar. Desative-o, recarregue e suas mudanças aparecerão. Em seguida, ative o cache novamente para a produção.

Seletores personalizados no código do tema

Para sites onde os posicionamentos integrados não se encaixam (um seletor em uma posição específica dentro do cabeçalho da página, um menu suspenso personalizado renderizado pelo seu tema, qualquer coisa fora de um menu do WordPress ou área de widget), o WPML expõe uma API que permite aos desenvolvedores de temas construir um seletor personalizado.

O cartão Seletores de idiomas personalizados tem um botão Ativar e um botão Personalizar. Uma vez ativado, o código do modelo do tema pode renderizar o seletor em qualquer lugar usando a API PHP documentada do WPML.