5 maneiras de adicionar um widget de data e hora ao seu site WordPress

Exibir um widget de data e hora é algo que começou com sites de jornais. Tirar a data de hoje do jornal deles apenas algo que sempre fez parte da vida das pessoas. Quando o jornalismo impresso mudou para a web, isso não estava prestes a mudar.

No entanto, exibir a data e a hora atuais não é apenas para sites de notícias. Existem muitos motivos pelos quais outros sites deveriam pensar em fazer o mesmo:

• Você pode exibir a hora atual em seu fuso horário para que os clientes saibam quando podem entrar em contato com o suporte ao cliente
• Faz com que seu site pareça vivo e relevante, mesmo que seu conteúdo seja um pouco mais antigo. Isso é importante, pois a maioria de nós está à procura das informações mais recentes e atualizadas.
• Se houver eventos futuros em sua página, a hora e a data atuais ajudam os visitantes a entender quanto tempo mais eles precisam esperar por eles (como alternativa, use um módulo de contagem regressiva, como o incluído no tema Divi)

Resumindo, exibir um widget de data e hora ajuda a vincular seu público, torna seu site mais atraente e o posiciona como um provedor de notícias e informações atualizadas. Motivo suficiente para aprender como implementar um em seu site WordPress.

No artigo a seguir, mostraremos várias maneiras de criar um widget de data e hora para o seu site. Primeiro, veremos como fazer isso manualmente e, em seguida, falaremos sobre algumas soluções de plug-in que permitem que você faça a mesma coisa sem qualquer codificação.

Soa bem? Então, não vamos demorar, mas vamos direto ao assunto.

Como criar um widget de data e hora manualmente no WordPress

Uma maneira de incluir a hora e a data atuais em seu site é codificar uma solução você mesmo. Isso é o que faremos primeiro. Criaremos um código de acesso simples que, se inserido em qualquer lugar do seu site, exibirá a hora e a data aos seus visitantes.

Crie o Shortcode

Nosso primeiro passo é configurar o shortcode real. Para isso, primeiro abriremos functions.php de nosso tema atual. É altamente recomendável que você use um tema filho para isso, de modo a não perder nenhuma alteração quando seu tema pai for atualizado.

Depois de abrir o arquivo, cole este trecho de código no final dele:

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

Algumas informações sobre isso: O código acima é uma função que exibe a data e a hora atuais e a atribui a um código de acesso chamado [data_de_hora] . Se você inserir o shortcode em seu site, ele chamará a função para a ação.

No formato que usamos acima, a hora e a data são geradas neste formato: 6 de julho de 2017, 12:35:41. No entanto, você pode usar formatos diferentes que pode aprender aqui.

Agora, para testar o código, basta copiar o shortcode em algum lugar do seu site. Esteja ciente, entretanto, que por padrão os códigos de acesso não funcionam dentro dos widgets. Para usá-los, você precisa instalar o plugin Shortcode Widget ou adicionar esta linha a functions.php .

add_filter('widget_text','do_shortcode');

Depois disso, aqui está o resultado:

Mudar para JavaScript

Parece bom até agora, não é? No entanto, se você seguir as etapas acima, perceberá rapidamente que o relógio não está se atualizando. Em vez disso, ele exibe a hora atual apenas uma vez - quando a página é carregada. Depois disso, ele permanece estático, o que meio que vai contra o propósito, você não concorda?

Isso porque o PHP é uma linguagem do lado do servidor, o que significa que você precisa fazer chamadas adicionais ao servidor para atualizar as informações. Por esse motivo, é melhor trabalharmos com uma linguagem do lado do cliente como o JavaScript.

Felizmente, existem muitos relógios JavaScript disponíveis na rede. Uma breve pesquisa no Google mostrará muitos exemplos. Usei este serviço para gerar o código JavaScript para o formato desejado. Depois disso, coloquei o código em um arquivo chamado clock.js que copiei para a minha pasta de temas.

O script pede um div do nome clockbox . Por esse motivo, mudei minha função anterior para a seguinte:

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

Agora, tudo o que resta é chamar meu novo arquivo JavaScript:

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

E voila:

Adicionar estilo

Finalmente, você provavelmente deseja estilizar seu widget de hora e data de forma que ele se adeque à sua marca geral. Felizmente, como a função que usamos criou o ID CSS, podemos adicionar nosso próprio estilo ao widget de data e hora da seguinte forma:

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

Aqui está o resultado:

Não foi tão difícil agora, foi? Disse que seria fácil. No entanto, essa é apenas uma maneira de criar seu próprio widget de data e hora. Com recursos de codificação adicionais, você pode fazer muito mais acontecer.

No entanto, se você não gosta da rota manual, também pode obter resultados semelhantes com a ajuda dos plug-ins do WordPress.

Plug-ins para criar widgets de data e hora para o seu site

Embora o número de plug-ins disponíveis no diretório do WordPress não seja esmagador, existem alguns exemplos por aí que fazem um trabalho bom o suficiente.

Data do relógio ao vivo

Nosso primeiro candidato é este plugin. Como o nome sugere, ele permite que você adicione um relógio e a data ao seu site WordPress.

Seu widget de hora e data oferece muitas opções de personalização. Você pode escolher entre um ciclo de 12 ou 24 horas, atualizar o relógio a cada minuto ou segundo, mostrar ou ocultar a data e determinar sua ordem. O widget ainda tem uma seção para CSS customizado para que você possa usar a mesma fonte do seu site e muito mais.

Infelizmente, as opções de formatação são um tanto limitadas. Por exemplo, não é possível remover o dia da semana da data. No entanto, além disso, o plugin faz o que deveria.

Widget de data e hora

Primeiro, um pequeno aviso. Este plugin é um pouco antigo e foi atualizado pela última vez há dois anos. Como consequência, não há garantia de que funcionará com todos os temas modernos e as versões mais recentes do WordPress. No entanto, como funcionou bem no meu teste com WordPress 4.8 e oferece um bom conjunto de opções, achei que valeria a pena incluir.

Após a instalação, o plugin adiciona um novo widget de Data e Hora ao menu do widget. Quando você o adiciona a uma área widgetized, ele oferece muitas maneiras de personalizar.

Como você pode ver, você pode configurar o formato de hora e data (ou desativá-lo completamente), alterar a família e o tamanho da fonte, bem como a cor do texto e do fundo (incluindo códigos hexadecimais). Dessa forma, é fácil ajustar o widget ao seu tema. Se isso não for suficiente, o widget tem classes HTML suficientes para que você possa implementar suas próprias regras CSS personalizadas com facilidade.

Data e hora atuais

O plugin final desta lista é bastante simples. Instale, ative e você obterá um novo widget chamado Data e hora atuais que você pode arrastar para qualquer área de widget. Feito.

O resultado parece decente e se ajusta automaticamente ao estilo do seu tema. Também é responsivo a dispositivos móveis, o que é obrigatório hoje em dia. Por outro lado, não oferece opções para ajustar nada. Apenas um formato de hora está disponível, para mais você precisa comprar a versão pro.

Conclusão

Existem muitos motivos para exibir um widget de hora e data em seu site WordPress. É uma boa maneira de permitir que seus clientes saibam quando eles podem entrar em contato com você, o quão atual é seu conteúdo e muito mais.

Como você viu acima, existem várias maneiras de implementar isso no WordPress. Uma é configurar seu próprio shortcode para implementar o widget em qualquer lugar que você quiser. Claro, também existem plug-ins que podem fazer o mesmo por você. Embora não seja opressor, existem alguns candidatos sólidos por aí.

Agora é com você. Você já usou um widget de hora e data em seu site antes? Em caso afirmativo, para que você precisava e como o implementou? Deixe-nos saber na seção de comentários abaixo.

Imagem em miniatura do artigo por Jane Kelly / shutterstock.com