Se você quer adicionar um sistema simples de idiomas no seu site WordPress sem instalar plugins pesados como WPML ou Polylang, o Language Swithcer é para você.
Neste artigo vamos aprender a instalar e utilizar o Language Switcher, que nada mais é do que poucas linhas de código HTML, CSS e JavaScript. O código funciona perfeitamente em páginas feitas com Elementor e é ideal para:
- Landing pages
- Sites institucionais
- Páginas de vendas
- Portfólios
- Sites leves e rápidos
O melhor: sem depender de plugins externos.
Instalando o Language Switcher
Arraste um widget de HTML para dentro do editor do Elementor e cole o código abaixo:
<!-- cole esse código, dentro de um widget de html,
onde quer que apareça os botões -->
<div class="language-switcher">
<button onclick="mudarIdioma('pt')" class="btn-lang" id="btn-pt">PT</button>
<button onclick="mudarIdioma('en')" class="btn-lang" id="btn-en">EN</button>
<button onclick="mudarIdioma('it')" class="btn-lang" id="btn-it">IT</button>
<button onclick="mudarIdioma('es')" class="btn-lang" id="btn-es">ES</button>
</div>
<!-- Coloque nos textos as classes indicando seu idioma:
.lang-pt
.lang-en
.lang-it
.lang-es
-->
<!-- css -->
<style>
/* Estilo básico dos botões */
.language-switcher {
display: flex;
gap: 10px;
}
.btn-lang {
color: #3F4721;
background: none;
border: none;
cursor: pointer;
padding: 5px 8px;
font-weight: 500;
}
.btn-lang:hover, .btn-lang.active{
background: #3F4721;
color: #D2D6C2;
}
/* Esconde as traduções por padrão */
.lang-en, .lang-it, .lang-es { display: none !important; }
/* Regras de exibição baseadas na classe do Body */
body.en-active .lang-pt { display: none !important; }
body.en-active .lang-en { display: block !important; }
body.it-active .lang-pt { display: none !important; }
body.it-active .lang-it { display: block !important; }
body.es-active .lang-pt { display: none !important; }
body.es-active .lang-es { display: block !important; }
</style>
<!-- javascript -->
<script>
function mudarIdioma(lang) {
// 1. Remove classes antigas e adiciona a nova no body
document.body.classList.remove('en-active', 'it-active', 'es-active');
if (lang !== 'pt') {
document.body.classList.add(lang + '-active');
}
// 2. Salva a escolha globalmente no navegador
localStorage.setItem('idioma_preferido', lang);
// 3. Atualiza visualmente os botões do menu
document.querySelectorAll('.btn-lang').forEach(btn => btn.classList.remove('active'));
const btnAtivo = document.getElementById('btn-' + lang);
if (btnAtivo) btnAtivo.classList.add('active');
}
// O SEGREDO: Executa assim que o DOM estiver pronto para evitar "piscada" de idioma
document.addEventListener('DOMContentLoaded', function() {
const salvo = localStorage.getItem('idioma_preferido') || 'pt';
mudarIdioma(salvo);
});
</script>Pronto. Language Switcher instalado. Agora vamos aprender como utilizá-lo.
Como utilizar o Language Switcher
Para que seu site mude instantaneamente a língua do site, você precisa primeiramente criar todo o conteúdo nas línguas desejadas. Veja o exemplo abaixo:
<h2>Bem-vindo ao nosso site</h2>
<h2>Welcome to our website</h2>
<h2>Benvenuto nel nostro sito</h2>
<h2>Bienvenido a nuestro sitio web</h2>Para que a “mágica” aconteça, basta adicionar as classes referentes a cada idioma. Veja o exemplo abaixo:
<h2 class="lang-pt">Bem-vindo ao nosso site</h2>
<h2 class="lang-en">Welcome to our website</h2>
<h2 class="lang-it">Benvenuto nel nostro sito</h2>
<h2 class="lang-es">Bienvenido a nuestro sitio web</h2>Veja que para cada idioma, colocamos a sua classe, ou seja, para o texto em português colocamos a classe “lang-pt”, para o texto em inglês colocamos “lang-en”, e assim nos outros.
O mais incrível é que, podemos colocar as classes dos idiomas em quaisquer widgets do Elementor, como imagens, ícones, vídeos, tudo que você queira apresentar um conteúdo diferente no outro idioma.
Conclusão
Com o Language Switcher você ganha em praticidade, velocidade e, consequentemente, mais conversão. Também economizamos muito em requisições de plugins de idiomas, construção de mais páginas e, desta forma, espaço no servidor.
Aproveite o Language Switcher nos seus projetos. Espero que te ajude. Até a próxima.
