Como adicionar um seletor de idioma ao WordPress

Você está pensando em adicionar um seletor de idioma WordPress ao seu site? Se sim, continue lendo!

Adicionar um seletor de idiomas ao seu site WordPress e traduzir seu conteúdo para que os visitantes possam lê-lo em seu próprio idioma pode ajudá-lo a alcançar novos mercados, oferecer maiores oportunidades de SEO e visibilidade online, além de contribuir para conquistar a confiança de novos públicos. Não sabe qual plugin usar? Confira nossa comparação em dosprincipais plugins multilíngues para WordPress em .

Com Weglot, você pode adicionar vários idiomas ao seu site WordPress ou WooCommerce em menos de 5 minutos, sem precisar programar.

Neste artigo, forneceremos um guia detalhado passo a passo sobre como adicionar um seletor de idioma do WordPress ao seu site e como personalizá-lo para se adequar ao design do seu site.

Tutorial: Adicione um seletor de idioma WordPress com Weglot

Um seletor de idiomas do WordPress é um elemento de navegação que permite aos visitantes selecionar seu idioma preferido e alternar entre as versões traduzidas do seu site. Você pode adicionar um a qualquer site WordPress instalando um plugin de tradução, selecionando os idiomas e colocando o seletor no menu, na área de widgets ou em uma página por meio de um shortcode.

Com Weglot, umplugin de tradução multilíngue para WordPress baseado em IA, você pode adicionar vários idiomas ao seu site em 5 minutos e personalizar o design sem precisar programar. A mesma configuração funciona em WooCommerce – o seletor de idiomas aparece e funciona exatamente da mesma forma, quer você esteja administrando um site WordPress padrão ou uma WooCommerce .

Você pode optar por adicionar um seletor de idioma do WordPress ao seu site em vários locais, incluindo o menu, um widget ou no código-fonte da sua página HTML. 

Neste tutorial, adicionaremos um seletor de idioma à navegação do seu site. Por padrão, Weglot o seletor de idioma na parte inferior esquerda do seu site. Em seguida, mostraremos como movê-lo através das suas configurações ou usando visual editor do seletor de idioma Weglot. 

Passo 1: Instalar e ativar o Weglot

Instale e ative o plug-inWeglot em seu site WordPress. Em seguida, crie uma conta Weglot , onde você gerenciará e editará suas traduções e obterá sua chave de API exclusiva para a integração

Passo 2: Conecte Weglot selecione seus idiomas

Clique na guia Weglot no painel do WordPress e adicione sua chave de API, selecione o idioma original do seu site e o(s) idioma(s) que deseja adicionar e clique em salvar. 

Passo 3: Verifique seu site e o seletor de idioma

Seu site WordPress agora é multilíngue! Weglot automaticamente o conteúdo do seu site, utilizou IA para traduzi-lo e o exibiu em subdiretórios de idiomas.

Dê uma olhada na interface do seu site e você verá um novo seletor de idiomas do WordPress no canto inferior direito.

Quando você clicar nele, ele se expandirá para exibir os idiomas disponíveis e permitirá que você escolha e exiba a tradução de sua preferência.

Este é o design padrão que vem com Weglot, e agora você pode personalizar a aparência e a localização do seu seletor de idiomas do WordPress de várias maneiras diferentes.

Personalize o seu seletor de idioma do WordPress

Para começar a fazer personalizações básicas, vá para Weglot > Language button design (Optional) no back-end do WordPress. Nessa tela, você pode escolher:

• Se deve usar um menu suspenso
• Se você usará sinalizadores em seu switcher e o tipo
• Se você exibir os nomes de seus idiomas
• Para exibir apenas o código do idioma

Há também uma seção para substituir o CSS e substituí-lo por seus próprios seletores personalizados — falaremos sobre isso em um segundo. Por enquanto, vamos personalizar o seletor de idioma para exibir os nomes dos idiomas sem bandeiras, mas mantendo o menu suspenso.

Para fazer isso, desmarque "With flags" (Com sinalizadores) e marque "Is fullname" (É nome completo) e, em seguida, dê uma olhada no seu site:

‍

Você também pode querer realizar algumas personalizações avançadas. Por exemplo, vamos exibir o seletor de idioma no menu de navegação ou na barra lateral.

Opções de posicionamento do seletor de idioma

Existem várias maneiras de fazer isso: em um menu, como um widget, usando um shortcode, com HTML ou como um botão flutuante que permanece no canto da tela enquanto o usuário rola a página. Você também pode inserir o seletor diretamente no conteúdo de uma postagem ou página usando o shortcode [weglot] – cole-o no editor da página onde deseja que ele apareça. O seletor Weglot funciona com todos os temas do WordPress, incluindo temas FSE e temas de blocos.

Volte para a Weglot no painel do WordPress e role a página para baixo até ver as opções para exibir o seletor de idiomas:

Basta seguir as instruções, dependendo de onde você deseja que o seletor de idioma fique. Neste caso, iremos para “Aparência -> menu” e arrastaremos e soltaremos o seletor para alterar a ordem dos itens no menu. 

Quando estiver pronto e tiver salvo as alterações, dê uma olhada no front end mais uma vez:

Embora o seletor de idioma esteja dentro do cabeçalho, ele não está sendo exibido corretamente. Além disso, você também pode usar códigos de idioma embutidos, em vez de um menu suspenso.

Estilo avançado do seletor de idiomas

É aqui que você usa o CSS. Primeiro, desative a configuração suspensa no menu Weglot do WordPress. Em seguida, marque a caixa para exibir códigos de idioma.

A partir daí, você pode usar a área de texto Override CSS (Substituir CSS) para definir seletores para suas fontes, cores e peso do texto, de modo que se ajustem ao design do seu site:

Por fim, dê uma olhada no seu design no front-end:

Com o posicionamento correto e algumas linhas de CSS, você pode personalizar de forma rápida e fácil o seletor de idiomas Weglotpara combinar com o seu site, sem a necessidade de edições complexas de modelos, HTML ou conhecimentos de programação PHP. 

Observe que as modificações de CSS personalizadas são totalmente opcionais. Você pode mover e alterar o design por meio das opções disponíveis na seção da guia Weglot do seu administrador do WordPress. 

Você também pode usar visual editor do seletor de idiomas Weglot visual editor preferir fazer as coisas de forma mais visual: 

visual editor do seletor de idiomas visual editor controlar as mesmas configurações do painel do WordPress. Basta arrastar o seletor para a posição desejada e clicar em “Salvar” para que as alterações sejam aplicadas ao seu site WordPress. 

Práticas recomendadas para exibir os seletores de idioma do WordPress

As pessoas que mudam de idioma geralmente se dividem em dois campos com atributos relevantes:

• Inexistente. Em outras palavras, o site não oferece nenhuma tradução.
• É difícil de encontrar. O seletor de idioma pode estar oculto na navegação ou em outro local, obrigando o usuário a jogar esconde-esconde e proporcionando uma experiência terrível.
• Fácil de encontrar. Em contrapartida, você pode encontrar o seletor de idioma do WordPress em um local claro e relevante, como o cabeçalho ou o rodapé.
• Muito fácil de encontrar. Você terá sorte se o seletor de idioma do WordPress estiver em uma área de destaque da tela, como o cabeçalho. Isso permite que você escolha o idioma certo rapidamente.

Por isso, é fundamental facilitar a escolha do idioma preferido pelos visitantes do seu site e proporcionar uma experiência amigável para os visitantes internacionais do site. Em um mundo ideal, você deve ser capaz de fazer isso sem a necessidade de complementos. Com isso em mente, considere o seguinte:

1. Escolha suas opções de idiomas com cuidado. O fato de poder ativar todos os idiomas não significa que você deva fazê-lo; você deve procurar ativar apenas os idiomas de que precisa. 
2. Coloque o seletor de idioma em um local fácil de encontrar. É recomendável colocá-lo no cabeçalho ou rodapé da página, pois ambos são ótimos locais. Em dispositivos móveis, os seletores de idioma costumam estar na navegação principal, como um item do menu.
3. Personalize o seletor de idiomas do WordPress para combinar com o seu design. Embora possa ser tentador manter o seletor de idiomas genérico fornecido, personalizá-lo para combinar com a aparência do seu site é uma ótima ideia.
4. Selecione bandeiras ou nomes para os idiomas escolhidos. Embora as bandeiras sejam tentadoras para os designers por vários motivos (são coloridas, icônicas e ocupam pouco espaço), elas não foram projetadas para representar idiomas. Isso gera vários problemas.

3 exemplos de pessoas que trocaram de idioma com sucesso

Você verá com frequência seletores de idioma ao navegar na Web. Entretanto, se você não fala outro idioma (ou não procura uma opção), talvez não saiba o quanto eles podem ser diferentes em relação ao design e à localização na página.

1. Microsoft Translator

O site do Microsoft Translator permite que os visitantes escolham entre quase 40 idiomas usando um menu suspenso (ou, nesse caso, um "drop-up") localizado próximo ao rodapé da página. Eles também optaram por exibir o nome completo de cada idioma usando o idioma nativo. Isso permite que os visitantes reconheçam seu idioma em um piscar de olhos e garante que as opções de troca de idioma sejam claras.

2. Etsy

Como um mercado internacional onde artesãos podem vender seus produtos feitos à mão, não é surpresa que o Etsy ofereça um seletor de idioma bem projetado. Você pode encontrá-lo no rodapé de todas as páginas do site.

Você pode escolher uma região, um idioma e uma moeda. Ao clicar aqui, é exibida uma janela modal onde você pode alterar cada uma dessas opções – uma abordagem simples que evita obrigar os usuários a acessarem um site regional.

3. Evernote

O popular aplicativo para anotações Evernote mantém seu seletor de idioma simples, usando um menu suspenso no rodapé para alterar os idiomas.

É fácil de encontrar e possui uma identificação clara – o que prova que um interruptor minimalista ainda pode proporcionar uma experiência clara e sem complicações.

Obtenha um seletor de idiomas WordPress bem projetado

Adicionar um seletor de idiomas do WordPress ao seu site é simples com as ferramentas certas. Com Weglot, você obtém um seletor de idiomas adicionado automaticamente, tradução completa por IA desde o primeiro dia e controle total de edição – sem necessidade de desenvolvedor. A ferramenta de tradução funciona em segundo plano, mantendo suas traduções atualizadas, alinhadas à identidade da marca e sem intervenção manual. Você também podeativar o redirecionamento automático em a partir do seu Weglot – ele detecta o idioma do navegador do visitante e exibe automaticamente a versão do seu site no idioma correto.

Weglot também Weglot desenvolvido tendo em mente o SEO multilíngue. Ele cria automaticamente subdiretórios de idiomas para cada versão traduzida do seu site. Além disso, adiciona tags hreflang e traduz seus metadados. Os mecanismos de busca podem localizar e indexar todas as versões em diferentes idiomas desde o primeiro dia.

Escolha um plug-in de tradução do WordPress que também tenha sido desenvolvido com o SEO multilíngue em mente. Graças aos subdiretórios de idiomas criados automaticamente, metadados traduzidos e implementação de tags hreflang, Weglot cuida da parte técnica, de SEO e da tradução de seu site multilíngue.

Pronto para adicionar um seletor de idioma do WordPress ao seu site? Comece a usaro plano gratuitoWeglot Weglot, sem necessidade de cartão de crédito.