Artneo

Como traduzir a data no formulário do Elementor

Como traduzir a data no formulário do Elementor

Como traduzir a data no formulário do Elementor
5 (100%) 1 voto

Neste tutorial vou mostrar como traduzir a data no formulário do Elementor utilizando um código customizado de PHP dentro do child theme.

Você já viu vários sites no Brasil com botões ou campos de preenchimento em inglês, correto?

Pode ser um pouco de perfeccionismo, mas na hora de entregar o projeto para o cliente eu procuro traduzir todas as palavras dentro do site.

Acho que perde um pouco a credibilidade do site que possui elementos não traduzidos para a língua nativa.

Porém, o problema com a tradução do módulo de formulário do Elementor Pro vai além de simples estética…

O formato de data é (yyyy/mm/dd) ao invés de (dd/mm/yyyy)!

O pior – eu só fui perceber isso dias antes de entregar o projeto para meu cliente.

Fiz uma pesquisa rápida na internet e não encontrei nenhuma postagem sobre o assunto no fórum do WordPress ou no GitHub.

Como vários países utilizam o formato (dd/mm/yyyy) – eu vi a importância de ter o formulário traduzido e alterado para o formato de data que o web designer quiser.

Então, abri um chamado de suporte no GitHub do Elementor:

Notifiquei os desenvolvedores sobre o problema no GitHub
Notifiquei os desenvolvedores sobre o problema no GitHub

Confira o chamado de suporte clicando aqui.

Depois de várias interações com os desenvolvedores via fórum e email, conseguimos chegar na solução.

É fato que os web designers que utilizam a versão Pro do Elementor irão precisar traduzir em algum momento a data do formulário para o formato correto.

Portanto, muito justo eu documentar a solução para toda a comunidade Elementor brasileira! ❤👨‍💻

Vou mostrar para você passo a passo o que eu fiz para conseguir traduzir o formulário.

Formato padrão errado para data no Brasil
Formato padrão errado para data no Brasil

Preparei um vídeo explicando na prática o processo caso surja alguma dúvida.

Vídeo sobre como traduzir a data no formulário do Elementor

3 Etapas para traduzir a data no formulário do Elementor

O vídeo acima explica em menos de 4 minutos o conteúdo do tutorial. Siga os passos abaixo para saber todas as etapas necessárias para traduzir o formulário.

Primeiro, copie o código abaixo e cole dentro do functions.php do seu child theme.

add_action('wp_footer', function () {
if ( ! is_page( 10 ) ) {
return;
}
?>
<script>
jQuery( document ).ready( function( $ ){
function waitForFlatpicker( callback ) {
if ( typeof window.flatpickr !== 'function' ) {
setTimeout( function() { waitForFlatpicker( callback ) }, 2 );
}
callback();
}
waitForFlatpicker( function(){
flatpickr.l10ns.pt = {
weekdays: {
shorthand: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
longhand: [
"Domingo",
"Segunda-feira",
"Terça-feira",
"Quarta-feira",
"Quinta-feira",
"Sexta-feira",
"Sábado",
],
},
months: {
shorthand: [
"Jan",
"Fev",
"Mar",
"Abr",
"Mai",
"Jun",
"Jul",
"Ago",
"Set",
"Out",
"Nov",
"Dez",
],
longhand: [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro",
],
},
rangeSeparator: " até ",
};
//set translations
flatpickr.localize(flatpickr.l10ns.pt);
flatpickr('.elementor-date-field');
//set format
setTimeout( function(){
$('.elementor-date-field').each(function(){ flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');});
}, 1000 );
});
});
</script>
<?php
} );

Em segundo, abra a página do seu formulário de contato no modo de edição com Elementor e copie o ID dela.

Encontre o ID da página
Encontre o ID da página

E por último, altere o número no começo do código PHP:

if ( ! is_page( 288 ) ) {

Pronto, o formato da data e os nomes dos meses no calendário estão traduzidos!

Formulário com formato correto para escolha da data
Formulário com formato correto para escolha da data

Atenção: O código acima gera erros no site caso o formulário não esteja presente. Isso aconteceu com o meu cliente quando ele pediu para remover temporariamente o formulário de contato do site.

Lembre-se de remover o código PHP caso remova também o formulário da página.

Conclusão

O que você achou deste tutorial sobre como traduzir a data no formulário do Elementor?

Espero que possa te ajudar a traduzir os meses no calendário e mudar formato da data para o formato convencional no Brasil.

Você precisou fazer isso em algum projeto seu?

Deixe seu comentário e seu feedback.

Eles são sempre importantes para mim.

Obrigado por me acompanhar até aqui.

Abraço e até a próxima!

Andre Esteves Perrone

Web designer que adora estudar sobre novas tendências da criação de sites e trazer resultados positivos para seus clientes. Você pode encontrar ele tocando sax na igreja local, assistindo séries no Netflix ou escrevendo no blog da Artneo.

Deixe uma resposta

Fechar Menu