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 idioma ao seu site do 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 criar confiança junto a novos públicos. Não sabe qual plugin usar? Confira nossa comparação dos melhores plugins de seletor de idioma para WordPress.

Com o Weglot, você pode adicionar vários idiomas ao seu site do WordPress ou à sua loja do WooCommerce sem precisar escrever código algum e revisar cada tradução no contexto antes de publicá-la.

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.

Weglot A versão 2.0 se baseia no “ Weglot ” que você já conhece: um plugin de tradução para WordPress com tecnologia de IA que adiciona automaticamente um seletor de idioma, traduz seu site sem a necessidade de código, utilizando traduções de IA personalizadas para sua marca, e cria subdiretórios de idiomas otimizados para SEO com tags hreflang e metadados traduzidos. Você pode optar por adicionar um seletor de idioma do WordPress ao seu site em diversos locais, incluindo o menu, um widget ou no código-fonte da sua página HTML. 

Neste tutorial, vamos adicionar um seletor de idioma à navegação do seu site. Por padrão, o Weglot adiciona o seletor de idioma no canto inferior direito do seu site. Em seguida, mostraremos como movê-lo, seja pelas configurações do plugin ou pela página Visual Editor do Weglot, onde o Editor do Seletor também permite que você altere seu design. 

Passo 1: Instalar e ativar o Weglot

Instale e ative o pluginWeglot no seu site do WordPress. Em seguida, crie uma conta no Weglot : durante a configuração, você inserirá a URL do seu site, selecionará os idiomas de origem e de destino e definirá a voz da marca e as diretrizes de tradução para que as traduções correspondam ao seu estilo de redação. No painel do Weglot , você poderá gerenciar e editar suas traduções, além de copiar sua chave de API exclusiva para a integração.

Passo 2: Conecte Weglot selecione seus idiomas

Clique na aba “ Weglot ” no painel do WordPress e abra Configuraçõese cole sua chave de API. O idioma original e os idiomas que você escolheu ao criar seu projeto aparecem abaixo (para alterá-los posteriormente, acesse o painel do Weglot ). 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, acesse Weglot > Configurações no painel de controle do WordPress. O Seção “Seletor de idioma” é onde você define a localização: em um menu, em um widget, com um shortcode ou no código-fonte da sua página (veremos isso a seguir):

A aparência do seletor de idioma é definida no Editor de Seletor de Idioma, que é aberto a partir de Weglot’s Visual Editor quando você clica no seletor de idioma do seu site. No editor, 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 um campo para CSS personalizado para seus próprios seletores, e falaremos sobre isso daqui a pouco. Por enquanto, vamos personalizar o seletor de idioma para exibir os nomes dos idiomas sem bandeiras, mas mantendo o menu suspenso.

Para fazer isso, desative os ícones e ative os nomes completos dos idiomas; clique em Salvare, 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

Você pode exibir o seletor Weglot em cinco locais:

• Menu: Vá para Aparência > Menus, selecione seu menu, marque Weglot e arraste-o até o local desejado.
• Widget: Vá para Aparência > Widgets e adicione o Weglot em qualquer área de widget (cabeçalho, barra lateral ou rodapé).
• Código de atalho: Cole [weglot] em qualquer página, postagem ou modelo onde você queira que o seletor apareça.
• HTML / código-fonte: Adicione o seletor diretamente no código HTML da sua página para ter controle total sobre o posicionamento.
• Botão flutuante: mantenha o seletor em um canto fixo que permaneça visível enquanto os usuários rolam a página (configuração padrãoWeglot).

O seletor Weglot funciona com todos os temas do WordPress, incluindo temas FSE e temas baseados em blocos.

Para definir onde o seletor de idioma será exibido, volte para o seção “Seletor de idioma” na Weglot > Configurações (mostrada acima) e siga o link no cartão correspondente ao local desejado. 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 no cabeçalho, ele não está sendo exibido corretamente. Você também poderia 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. No Editor do Seletor (mais detalhes abaixo), desative o layout suspenso, exiba os códigos de idioma em vez dos nomes completos e adicione alguns seletores para suas fontes, cores e espessura do texto, para que o seletor se adapte ao design do seu site. Este é o resultado na interface do usuário:

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 personalizadas no CSS são totalmente opcionais. Você pode ajustar e alterar o design por meio das opções pré-definidas no Switcher Editor. 

Para abri-lo, acesse Weglot/ Visual Editor e clique no seletor de idioma do seu site. O Editor do Seletor de Idioma aparece ao lado de uma visualização em tempo real, para que você veja cada alteração à medida que a faz, e seu painel de (clique em Editar CSS personalizado para exibir o campo) é onde os seletores da etapa anterior devem ser inseridos: 

Defina a posição e o layout no painel e, em seguida, clique em “Salvar” para que as alterações sejam aplicadas ao seu site do WordPress. 

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

Quem muda de idioma tende a se enquadrar em um desses quatro grupos:

• 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 algum outro local, obrigando o usuário a brincar de esconde-esconde e proporcionando uma experiência de usuário péssima.
• 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.

Obtenha um seletor de idiomas WordPress bem projetado

Adicionar um seletor de idioma do WordPress ao seu site é simples com o plugin certo. Com o Weglot, você tem um seletor de idioma adicionado automaticamente, tradução completa por IA desde o primeiro dia, tradução de imagens para o texto contido nelas e controle total de edição, sem a necessidade de um desenvolvedor. O plugin funciona em segundo plano, mantendo suas traduções alinhadas à sua marca atualizadas à medida que seu conteúdo muda. Você também pode ativar o redirecionamento automático a partir do seu painel do Weglot : ele detecta o idioma do navegador do visitante e exibe automaticamente a versão no idioma correto do seu site.

Weglot também foi desenvolvido levando em conta o SEO multilíngue. Ele cria automaticamente subdiretórios de idiomas para cada versão traduzida do seu site, adiciona tags hreflang e traduz seus metadados, para que os mecanismos de busca e as experiências de descoberta baseadas em IA possam localizar e indexar todas as versões em diferentes idiomas desde o primeiro dia.

Escolha um plugin de tradução para WordPress que também tenha sido desenvolvido levando em conta o SEO multilíngue. Graças aos subdiretórios de idiomas criados automaticamente, aos metadados traduzidos e à implementação da tag hreflang, o Weglot cuida dos aspectos técnicos, de SEO e de tradução do 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.