5 modi per aggiungere un widget di data e ora al tuo sito Web WordPress

La visualizzazione di un widget di data e ora è iniziata con i siti Web dei giornali. Ottenere la data di oggi dal loro giornale è solo qualcosa che ha sempre fatto parte della vita delle persone. Quando il giornalismo cartaceo si è spostato sul web, le cose non sarebbero cambiate.

Tuttavia, la visualizzazione della data e dell'ora correnti non è solo per i siti web di notizie. Ci sono molte ragioni per cui altri siti dovrebbero pensare di fare lo stesso:

• Puoi visualizzare l'ora corrente nel tuo fuso orario per far sapere ai clienti quando possono contattare l'assistenza clienti
• Rende il tuo sito vivo e pertinente, anche se i tuoi contenuti sono un po' più vecchi. Questo è importante poiché la maggior parte di noi è alla ricerca delle informazioni più recenti e aggiornate.
• Se ci sono eventi imminenti sulla tua pagina, l'ora e la data correnti aiutano i visitatori a capire quanto tempo devono aspettare per loro (in alternativa, usa un modulo timer per il conto alla rovescia come quello incluso nel tema Divi)

In breve, la visualizzazione di un widget di data e ora aiuta a legare il tuo pubblico, rende il tuo sito più attraente e ti posiziona come fornitore di notizie e informazioni aggiornate. Motivo sufficiente per imparare a implementarne uno sul tuo sito WordPress.

Nel seguente articolo, ti mostreremo diversi modi in cui puoi creare un widget di data e ora per il tuo sito web. Innanzitutto, esamineremo come farlo manualmente, quindi parleremo di alcune soluzioni di plug-in che ti consentono di fare la stessa cosa senza alcuna codifica.

Suona bene? Allora non facciamo il dillydly, ma andiamo subito al dunque.

Come creare manualmente un widget di data e ora in WordPress

Un modo per includere l'ora e la data correnti sul tuo sito è codificare tu stesso una soluzione. Questo è ciò che faremo prima. Creeremo un semplice shortcode che, se inserito in qualsiasi punto del tuo sito, mostrerà l'ora e la data ai tuoi visitatori.

Crea lo shortcode

Il nostro primo passo è impostare lo shortcode effettivo. Per questo, apriremo prima functions.php del nostro tema attuale. Ti consigliamo vivamente di utilizzare un tema figlio per questo in modo da non perdere alcuna modifica quando il tema principale viene aggiornato.

Una volta aperto il file, incolla questo pezzo di codice alla fine:

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

add_shortcode( 'time_date', 'current_time_date' );

Alcune informazioni su questo: il codice sopra è una funzione che sputa la data e l'ora correnti e quindi la assegna a uno shortcode chiamato [time_date] . Se inserisci lo shortcode sul tuo sito, chiamerà la funzione in azione.

Nel formato che abbiamo usato sopra, l'ora e la data vengono emesse in questo formato: 6 luglio 2017, 12:35:41. Tuttavia, puoi utilizzare diversi formati che puoi conoscere qui.

Ora, per testare il codice, copia semplicemente lo shortcode da qualche parte sul tuo sito. Tieni presente, tuttavia, che per impostazione predefinita gli shortcode non funzionano all'interno dei widget. Per utilizzarli, è necessario installare il plug-in Shortcode Widget o aggiungere questa riga a functions.php .

add_filter('widget_text','do_shortcode');

Dopodiché, ecco il risultato:

Passa a JavaScript

Sembra buono finora, non è vero? Tuttavia, se segui i passaggi precedenti, noterai rapidamente che l'orologio non si aggiorna da solo. Invece, sputa l'ora corrente solo una volta, quando la pagina viene caricata. Dopodiché rimane statico, il che in qualche modo vanifica lo scopo, non sei d'accordo?

Questo perché PHP è un linguaggio lato server, il che significa che devi fare ulteriori chiamate al server per aggiornare le informazioni. Per questo motivo, è meglio lavorare con un linguaggio lato client come JavaScript.

Fortunatamente, ci sono un sacco di orologi JavaScript disponibili in rete. Una breve ricerca su Google mostrerà molti esempi. Ho usato questo servizio per generare il codice JavaScript per il mio formato desiderato. Successivamente, ho inserito il codice in un file chiamato clock.js che ho copiato nella cartella del tema.

Lo script richiede un div del nome clockbox . Per questo motivo, ho cambiato la mia funzione precedente con la seguente:

function current_time_date(){

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

}

add_shortcode( 'time_date', 'current_time_date' );

Ora, non resta che richiamare il mio nuovo file JavaScript:

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

E voilà:

Aggiungi stile

Infine, probabilmente vorrai essere in grado di modellare il tuo widget di data e ora in modo che si adatti al tuo marchio generale. Fortunatamente, poiché la funzione che abbiamo usato ha creato l'id CSS, possiamo aggiungere il nostro stile al widget di data e ora in questo modo:

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

Ecco il risultato:

Non era così difficile adesso, vero? Te l'avevo detto che sarebbe stato facile. Tuttavia, questo è solo un modo per creare il tuo widget di data e ora. Con ulteriori tecniche di programmazione, puoi fare in modo che accada molto di più.

Tuttavia, se non sei uno per il percorso manuale, puoi anche ottenere risultati simili con l'aiuto dei plugin di WordPress.

Plugin per creare widget di data e ora per il tuo sito web

Sebbene il numero di plug-in disponibili nella directory di WordPress non sia travolgente, ci sono alcuni esempi là fuori che fanno un lavoro abbastanza buono.

Data orologio in tempo reale

Il nostro primo contendente è questo plugin. Come suggerisce il nome, ti consente di aggiungere un orologio e la data al tuo sito Web WordPress.

Il loro widget di data e ora offre molte opzioni di personalizzazione. Puoi scegliere tra un ciclo di 12 o 24 ore, se aggiornare l'orologio ogni minuto o secondo, mostrare o nascondere la data e determinarne l'ordine. Il widget ha anche una sezione per CSS personalizzati in modo da poter utilizzare lo stesso carattere del tuo sito web e altro ancora.

Sfortunatamente, le opzioni di formattazione sono in qualche modo limitate. Ad esempio, non è possibile rimuovere il giorno della settimana dalla data. Tuttavia, a parte questo, il plugin fa quello che dovrebbe.

Data e ora Widget

Prima di tutto, un piccolo avvertimento. Questo plugin è un po' vecchio ed è stato aggiornato l'ultima volta due anni fa. Di conseguenza, non vi è alcuna garanzia che funzionerà con tutti i temi moderni e l'ultima versione di WordPress. Tuttavia, dal momento che ha funzionato bene nel mio test con WordPress 4.8 e offre un bel set di opzioni, ho pensato che valesse la pena includerlo.

Dopo l'installazione, il plug-in aggiunge un nuovo widget Data e ora al menu del widget. Quando lo aggiungi a un'area widget, ti offre molti modi per personalizzare.

Come puoi vedere, puoi configurare il formato dell'ora e della data (o disabilitarlo completamente), cambiare la famiglia e la dimensione del carattere, nonché il colore del testo e il colore di sfondo (compresi i codici esadecimali). In questo modo, è facile adattare il widget al tuo tema. Se ciò non bastasse, il widget ha abbastanza classi HTML in modo da poter implementare facilmente le tue regole CSS personalizzate.

Data e ora correnti

Il plugin finale in questo elenco è abbastanza semplice. Installa, attiva e ottieni un nuovo widget chiamato Data e ora correnti che puoi trascinare in qualsiasi area del widget. Fatto.

Il risultato sembra decente e si adatta automaticamente allo stile del tuo tema. È anche mobile responsive, che è un must in questi giorni. D'altra parte, non offre alcuna opzione per regolare nulla. È disponibile un solo formato orario, per di più è necessario acquistare la versione pro.

Conclusione

Ci sono molti motivi per visualizzare un widget di data e ora sul tuo sito WordPress. È un buon modo per far sapere ai tuoi clienti quando possono raggiungerti, quanto sono aggiornati i tuoi contenuti e altro ancora.

Come hai visto da quanto sopra, ci sono diversi modi per implementarlo in WordPress. Uno è impostare il tuo shortcode per implementare il widget ovunque tu voglia. Naturalmente, ci sono anche plugin che possono fare lo stesso per te. Sebbene non siano travolgenti, ci sono alcuni solidi contendenti là fuori.

Adesso tocca a te. Hai già utilizzato un widget di data e ora sul tuo sito? Se sì, a cosa ti serviva e come l'hai implementato? Fatecelo sapere nella sezione commenti qui sotto.

Immagine in miniatura dell'articolo di Jane Kelly / shutterstock.com