Como configurar um alternador de idioma em um site multilíngue Laravel

por Aorinka Anendya
24 de maio de 2024

Blog > Guia > Como configurar um alternador de idioma em um site multilíngue Laravel

A criação de sites multilíngues tornou-se necessária para empresas e organizações que atendem públicos de diversas origens linguísticas. Laravel , uma estrutura de aplicação web PHP amplamente utilizada, fornece ferramentas e recursos robustos que facilitam o desenvolvimento e a manutenção de sites multilíngues.

Um componente crucial de um site multilíngue é o alternador de idiomas, que permite aos usuários alternar facilmente entre os idiomas disponíveis. Neste artigo, exploraremos a importância dos alternadores de idioma e forneceremos um guia passo a passo sobre como configurá-los em um site multilíngue Laravel

Por que um alternador de idioma é importante em sites multilíngues Laravel ?

Antes de discutir como configurar um alternador de idioma em um site multilíngue Laravel , é importante entender por que você precisa fazer isso.

Experiência do usuário: um alternador de idioma bem projetado aprimora a experiência do usuário, permitindo que os visitantes acessem facilmente o conteúdo em seu idioma preferido. Essa transição perfeita para o idioma nativo ou preferido garante melhor compreensão e envolvimento com o conteúdo do site. Quando os usuários podem consumir informações em um idioma com o qual se sentem confortáveis, é mais provável que permaneçam no site por mais tempo, explorem mais páginas e potencialmente se convertam em clientes ou realizem as ações desejadas. Uma experiência tranquila de troca de idioma elimina frustrações e barreiras, levando a uma maior satisfação e a uma experiência geral positiva do usuário.
Search Engine Optimization (SEO): Os mecanismos de busca priorizam sites que oferecem conteúdo em vários idiomas, pois demonstra o compromisso de atender um público global. Um alternador de idioma pode melhorar a visibilidade e a classificação do seu site nos resultados de pesquisa. Ao fornecer conteúdo em vários idiomas, você aumenta as chances de seu site aparecer em uma posição superior nos resultados de pesquisa para consultas nesses idiomas, expandindo seu alcance online e atraindo mais tráfego direcionado.
Redução na taxa de rejeição: um alternador de idioma fácil de usar ajuda a diminuir as taxas de rejeição. Quando os visitantes conseguem encontrar e selecionar rapidamente seu idioma preferido, é mais provável que eles permaneçam no site, explorem o conteúdo e potencialmente convertam. Os usuários que encontrarem conteúdo em um idioma desconhecido podem sair rapidamente do site, resultando em uma alta taxa de rejeição. No entanto, com um alternador de idioma, eles podem navegar facilmente para a versão do idioma desejado, incentivando-os a permanecer e interagir com o conteúdo, reduzindo, em última análise, a taxa de rejeição.
Aumentando as conversões de vendas: ao fornecer conteúdo em idiomas que os visitantes entendem, você pode aumentar a probabilidade de conversões, como compras de produtos ou registros de serviços. Se os visitantes puderem compreender facilmente os detalhes dos produtos, as políticas e os processos de checkout no seu idioma, as barreiras às decisões de compra serão reduzidas. Oferecer conteúdo multilíngue por meio de um alternador de idioma melhora a experiência geral de compra e pode levar a taxas de conversão mais altas.

Quebrar barreiras linguísticas

Diga adeus às barreiras linguísticas e olá ao crescimento ilimitado! Experimente nosso serviço de tradução automática hoje mesmo.

Comece a traduzir agora

Como configurar um alternador de idioma em um site multilíngue Laravel ?

Depois de compreender a importância de um alternador de idioma em um site multilíngue Laravel , vamos discutir como implementá-lo. Os serviços de tradução de sites normalmente oferecem esse recurso, que pode ser personalizado de acordo com as necessidades do usuário.

No entanto, nem todos os serviços de tradução oferecem alternadores de idiomas facilmente personalizáveis e fáceis de usar. Portanto, é crucial escolher um serviço de tradução automática que seja compatível com várias estruturas e que forneça recursos flexíveis de alternância de idiomas.

Um serviço de tradução automática que atende a esses critérios é Linguise. A tradução automática Linguise oferece um recurso de alternância de idioma altamente personalizável e fácil de usar, integrado a estruturas populares como Laravel.

Linguise fornece integração perfeita com a estrutura Laravel , permitindo que os desenvolvedores incorporem facilmente o alternador de idiomas em seus aplicativos multilíngues. Ao aproveitar os recursos avançados e a interface amigável do Linguise, você pode agilizar o processo de configuração e manutenção do alternador de idiomas em seu site Laravel .

Sem mais delongas, aqui estão as etapas para instalar Linguise em um site Laravel e configurar o alternador de idiomas.

Etapa 1: registre-se para obter uma conta Linguise gratuita

A etapa inicial para se inscrever envolve a criação de uma conta gratuita no Linguise e o aproveitamento de um teste gratuito de um mês. Para se registrar em uma conta Linguise basta inserir seu endereço de e-mail para criar um nome de usuário e uma senha.

Durante o período de teste de um mês, você terá acesso a toda a gama de recursos interessantes do Linguise. Assim que o período de teste terminar, você será redirecionado para o painel Linguise .

Etapa 2: adicionar domínio ao site Laravel

Uma vez conectado ao Linguise , você precisa adicionar um novo site e salvar suas configurações para obter uma chave de API. Primeiro, você precisa adicionar várias colunas para adicionar um site, incluindo as seguintes.

Conta
URLs
Plataformas/CMS
Linguagem
Idioma de tradução
Traduzir URLs

Depois disso você receberá uma chave de API, esta chave de API é ativada para permitir a tradução em seu site. Basicamente, a chave API verifica quais idiomas estão habilitados em um determinado domínio e permite a criação de páginas traduzidas automaticamente. Copie a chave API e salve-a na área de transferência.

A seguir, clique na “Script PHP” para obter instruções de instalação, que seguiremos detalhadamente aqui.

Etapa 3: faça upload e conecte o script de tradução Linguise

O script de tradução Linguise precisa ser carregado em seu servidor e colocado na pasta onde Laravel está instalado. Você pode baixá-lo aqui.

Após baixar o script, descompacte-o e carregue-o na pasta raiz onde Laravel está instalado.

Certifique-se de que o script esteja no nível raiz da instalação Laravel (geralmente onde seus arquivos CMS estão localizados). Certifique-se de que a pasta tenha o nome “linguise” (o nome padrão após descompactar).

Etapa 4: configurar os URLs dos idiomas

Em seguida, você precisa configurar URLs de idioma. URLs baseados em idioma precisam ser configurados no arquivo .htaccess. Se você tiver “RewriteBase/” em seu arquivo, simplesmente copie todo o código a seguir.

				
					<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-cn|zh-tw|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu|zz-zz)(?:$|/)(.*)$ linguise/linguise.php?linguise_language=$1&original_url=$2 [L,QSA]
</IfModule>

Etapa 5: Habilite o alternador de idioma no Laravel

A próxima etapa é ativar o alternador de idioma colando o script obtido no painel Linguise . A colagem deste script de alternância de idioma pode variar dependendo do tema usado no Laravel.

Neste caso, o script será colado no front.blade.php localizado no diretório resources/views/layouts/ Abaixo está uma prévia do script colado.

Etapa 6: configurar a tela principal

Para iniciar a configuração do alternador de idioma, navegue até a “Configurações” > “Exibição de sinalizadores de idioma” no painel Linguise

Nesta página você pode configurar diversas opções. A primeira são as configurações principais de exibição, onde você pode ajustar vários aspectos como:

Estilo do ícone da bandeira: Você pode escolher entre três opções; exibição lado a lado, menu suspenso ou pop-up.
Posição: esta configuração determina onde o seletor de idioma estará em seu site. Várias opções de posição estão disponíveis. Certifique-se de selecionar uma posição que seja facilmente acessível aos visitantes.

Você pode combinar a exibição de bandeiras e nomes de idiomas, bandeiras e abreviações de idiomas ou apenas nomes de idiomas. O uso de sinalizadores e nomes de idiomas é recomendado para facilitar o reconhecimento do usuário.

Passo 7: Defina o desenho da bandeira

Após configurar a tela principal, você pode personalizar ainda mais o design das bandeiras que serão mostradas.

Exibir nome do idioma: você pode optar por mostrar o nome do idioma com base no nome do país ou no próprio nome do idioma. Por exemplo, você pode exibir “Francês” ou “Français”.
Tipo de bandeira inglesa: esta opção é útil para idiomas com múltiplas variações, como inglês americano ou britânico (também se aplica a espanhol, taiwanês, alemão e português).
Estilo da bandeira: Esta configuração permite escolher o formato do ícone da bandeira, redondo ou retangular.

Etapa 8: configure a cor e o tamanho

Depois de finalizar a configuração do design das bandeiras, você pode personalizar a cor e o tamanho das bandeiras. Aqui estão algumas configurações que você pode ajustar.

Raio da borda da bandeira: personalize o raio da borda em pixels para o estilo da bandeira retangular.
Cor do nome do idioma: escolha a cor de texto padrão para exibir o nome do idioma.
Cor do idioma pop-up: defina a cor do texto do título do idioma na área pop-up ou suspensa.
Tamanho da bandeira: ajuste o tamanho dos ícones da bandeira.
Cor de foco do nome do idioma: defina a cor do texto que aparece quando o usuário passa o mouse sobre o nome do idioma.
Cor de foco do idioma pop-up: defina a cor do texto que aparece quando o usuário passa o mouse sobre o título do idioma no pop-up ou na área suspensa.

Etapa 9: definir o sinalizador box-shadow

Finalmente, você pode definir as configurações de sombra da caixa de sinalização. A primeira opção permite aplicar um efeito de sombra a cada ícone de bandeira exibido em seu site. A próxima opção controla o efeito de sombra quando os usuários passam o mouse sobre as bandeiras de idioma.

Depois de fazer todos os ajustes desejados, clique no Salvar para aplicar as alterações de personalização. Depois, navegue até o Laravel para verificar se a configuração foi aplicada com sucesso. É aproximadamente assim que o alternador de idioma aparecerá.

Depois de concluir a configuração, agora você pode ver como funciona o alternador de idioma em seu site multilíngue Laravel .

Depois disso tentaremos traduzir o site para outros idiomas, por exemplo Francês.

Melhores práticas para otimizar o alternador de idiomas no site multilíngue Laravel

Depois de configurar com sucesso o seletor de idioma em um site multilíngue Laravel , você também precisa saber dicas para otimizar o seletor de idioma tanto para o seu site quanto para os visitantes da web.

Use ícones ou bandeiras de idiomas facilmente reconhecíveis

Símbolos ou bandeiras universalmente reconhecidos são cruciais para que os visitantes identifiquem e selecionem rapidamente a sua opção de idioma preferida. Certifique-se de que os ícones ou bandeiras utilizados sejam visualmente proeminentes, tenham bom contraste de cores e sejam amplamente compreendidos em todas as culturas para evitar confusão ou ambiguidade. Símbolos ou ícones familiares ajudam a criar uma experiência intuitiva e fácil de usar, permitindo que os visitantes naveguem sem esforço até a versão do idioma desejado. É essencial escolher ícones ou bandeiras que sejam universalmente reconhecíveis para evitar possíveis mal-entendidos ou confusões.

Posicionamento estratégico do botão de alternância de idioma

Posicione o botão de alternância de idioma em uma área proeminente e de fácil acesso do seu site. Os canais padrão incluem cabeçalho, rodapé ou menu de navegação principal. Esses locais são intuitivos para a maioria dos usuários da Internet e atendem às suas expectativas ao procurar opções de idiomas. O posicionamento consistente em todas as páginas garante que os visitantes possam acessar facilmente o seletor de idioma, independentemente do ponto de entrada ou da página específica que estão visitando. Esse posicionamento consistente ajuda a criar uma experiência de usuário perfeita e previsível.

Mantenha a consistência em todas as páginas

Certifique-se de que o seletor de idioma mantenha aparência e comportamento consistentes em todo o site. Os usuários devem poder mudar de idioma sem problemas, independentemente da página em que estão ou do conteúdo que estão visualizando. A consistência não apenas proporciona uma experiência de usuário coesa, mas também reforça a acessibilidade e a disponibilidade de opções de idiomas, promovendo a confiança em seu site multilíngue. Quaisquer inconsistências no alternador de idioma podem causar confusão e frustração para os usuários, podendo fazer com que abandonem seu site.

Considere usar nomes de idiomas e sinalizadores

Em vez de usar apenas sinalizadores, é uma boa ideia considerar o uso de sinalizadores e nomes de idiomas em sua forma original. Essa abordagem pode ajudar a evitar confusões, já que alguns idiomas são falados em alguns países com bandeiras diferentes. O uso direto de nomes de idiomas elimina a ambiguidade e garante que os visitantes possam identificar e selecionar claramente o idioma desejado, sem interpretações incorretas. Além disso, a utilização de nomes linguísticos pode ser mais inclusiva e respeitadora da diversidade cultural.

Processo de troca de idioma fácil de usar

Simplifique o processo para os usuários mudarem para outro idioma se o idioma padrão não corresponder às suas preferências. Você também pode usar elementos como menus suspensos, listas de sinalizadores/ícones ou botões de alternância para seleção de idioma. No entanto, certifique-se de que cada botão possa ser clicado sem problemas e mostre claramente as opções de idioma disponíveis. Essa abordagem amigável minimiza o atrito e garante uma transição de idioma suave, melhorando a experiência geral do usuário. Um processo de troca de idioma simples e simples pode aumentar a satisfação do usuário e incentivar os visitantes a explorar seu conteúdo multilíngue.

Pronto para explorar novos mercados? Experimente nosso serviço de tradução automática gratuitamente com nossa avaliação gratuita de 1 mês. Nenhum cartão de crédito necessário!

Reivindique sua avaliação gratuita de 1 mês

Configure um alternador de idiomas no site multilíngue Laravel usando Linguise!

Neste ponto, você deve saber que está configurando o alternador de idiomas para a web multilíngue Laravel . O desenvolvimento de um alternador de idioma pode trazer diversos benefícios e consequentemente levar à otimização com base nos pontos mencionados anteriormente.

Ao otimizar efetivamente o alternador de idioma, ele pode melhorar significativamente a experiência geral do usuário. Agora, registre uma Linguise , integre seu Laravel e ajuste o seletor de idioma para melhorar a experiência do usuário.