5 moduri de a adăuga un widget de dată și oră pe site-ul dvs. WordPress

Afișarea unui widget pentru dată și oră este ceva care a început cu site-urile web ale ziarelor. Obținerea datei de astăzi de la ziarul lor doar ceva care a făcut întotdeauna parte din viața oamenilor. Când jurnalismul tipărit s-a mutat pe web, nu a fost pe cale să se schimbe.

Cu toate acestea, afișarea datei și orei curente nu este doar pentru site-urile de știri. Există o mulțime de motive pentru care alte site-uri ar trebui să se gândească să facă același lucru:

• Puteți afișa ora curentă în fusul dvs. orar pentru a informa clienții când pot ajunge la asistența pentru clienți
• Îți face site-ul să pară viu și relevant, chiar dacă conținutul tău este puțin mai vechi. Acest lucru este important, deoarece majoritatea dintre noi suntem în căutarea celor mai recente informații actualizate.
• Dacă aveți evenimente viitoare pe pagina dvs., ora și data curentă îi ajută pe vizitatori să înțeleagă cât mai mult trebuie să aștepte (alternativ, utilizați un modul de temporizare inversă, cum ar fi cel inclus în tema Divi)

Pe scurt, afișarea unui widget de dată și oră vă ajută să vă legați publicul, vă face site-ul mai atractiv și vă poziționează ca furnizor de știri și informații actualizate. Motiv suficient pentru a afla cum să implementați unul pe site-ul dvs. WordPress.

În articolul următor, vă vom arăta mai multe moduri în care puteți crea un widget de dată și oră pentru site-ul dvs. web. În primul rând, vom analiza cum să o faceți manual, apoi vom vorbi despre câteva soluții de pluginuri care vă permit să faceți același lucru fără nicio codare.

Sună bine? Atunci, să nu facem dillydally, ci să ne îndreptăm spre el.

Cum să creați manual un widget de dată și oră în WordPress

O modalitate de a include ora și data curente pe site-ul dvs. este să codificați singuri o soluție. Iată ce vom face mai întâi. Vom crea un cod scurt simplu care, dacă este introdus oriunde pe site-ul dvs., va afișa ora și data vizitatorilor dvs.

Creați codul scurt

Primul nostru pas este să configurăm codul scurt real. Pentru aceasta, vom deschide mai întâi functions.php a temei noastre actuale. Vă recomandăm cu tărie să utilizați o temă pentru copii pentru a nu pierde nicio modificare atunci când tema părinte este actualizată.

Odată ce am deschis fișierul, lipiți această bucată de cod la sfârșitul acestuia:

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

add_shortcode( 'time_date', 'current_time_date' );

Câteva informații despre acest lucru: Codul de mai sus este o funcție care scuipă data și ora curente și apoi le atribuie unui shortcode numit [data_oră] . Dacă introduceți codul scurt pe site-ul dvs., acesta va apela funcția în acțiune.

În formatul pe care l-am folosit mai sus, ora și data sunt afișate în acest format: 6 iulie 2017, 12:35:41. Cu toate acestea, puteți utiliza diferite formate despre care puteți afla aici.

Acum, pentru a testa codul, pur și simplu copiați codul scurt undeva pe site-ul dvs. Rețineți totuși că codurile scurte implicite nu funcționează în widgeturi. Pentru a le utiliza, fie trebuie să instalați pluginul Shortcode Widget, fie să adăugați această linie la functions.php .

add_filter('widget_text','do_shortcode');

După aceea, iată rezultatul:

Treceți la JavaScript

Arată bine până acum, nu-i așa? Cu toate acestea, dacă urmați pașii de mai sus, veți observa rapid că ceasul nu se actualizează singur. În schimb, scuipă ora curentă o singură dată - când pagina este încărcată. După aceea, rămâne static, ce fel de înfrângere are oarecum scopul, nu sunteți de acord?

Acest lucru se datorează faptului că PHP este un limbaj de pe server, ceea ce înseamnă că trebuie să efectuați apeluri suplimentare către server pentru a actualiza informațiile. Din acest motiv, este mai bine să lucrăm cu un limbaj de partea clientului, cum ar fi JavaScript.

Din fericire, există multe ceasuri JavaScript disponibile pe net. O scurtă căutare pe Google va afișa o mulțime de exemple. Am folosit acest serviciu pentru a genera codul JavaScript pentru formatul dorit. După aceea, am introdus codul într-un fișier numit clock.js, pe care l-am copiat în folderul tematic.

Scriptul solicită o divizare a casetei de nume. Din acest motiv, mi-am schimbat funcția anterioară cu următoarele:

function current_time_date(){

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

}

add_shortcode( 'time_date', 'current_time_date' );

Acum, nu mai rămâne decât să apelez la noul meu fișier JavaScript:

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

Și voila:

Adaugă stil

În cele din urmă, probabil că doriți să vă puteți stiliza widgetul de dată și oră, astfel încât să se potrivească brandingului dvs. general. Din fericire, deoarece funcția pe care am folosit-o a creat id-ul CSS, putem adăuga propriul nostru stil la data și ora widgetului astfel:

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

Iată rezultatul:

Nu era atât de greu acum, nu-i așa? Ți-am spus că ar fi ușor. Cu toate acestea, acesta este doar un mod de a crea propriul widget de dată și oră. Cu cotletele de codificare suplimentare, puteți face mult mai multe.

Cu toate acestea, dacă nu sunteți unul pentru ruta manuală, puteți obține și rezultate similare cu ajutorul pluginurilor WordPress.

Pluginuri pentru a crea widgeturi de dată și oră pentru site-ul dvs. web

Deși numărul de pluginuri disponibile în directorul WordPress nu este copleșitor, există câteva specimene care fac o treabă suficient de bună.

Data ceasului live

Primul nostru concurent este acest plugin. După cum sugerează și numele, vă permite să adăugați un ceas și data pe site-ul dvs. WordPress.

Widgetul lor de dată și oră oferă o mulțime de opțiuni de personalizare. Puteți alege între un ciclu de 12 sau 24 de ore, dacă actualizați ceasul în fiecare minut sau secundă, să afișați sau să ascundeți data și să determinați ordinea acestora. Widgetul are chiar o secțiune pentru CSS personalizate, astfel încât să puteți utiliza același font ca și site-ul dvs. web și multe altele.

Din păcate, opțiunile de formatare sunt altfel oarecum limitate. De exemplu, nu este posibil să eliminați ziua săptămânii de la dată. Cu toate acestea, în afară de aceasta, pluginul face ceea ce ar trebui să facă.

Widget Data și Ora

În primul rând, un mic avertisment. Acest plugin este puțin vechi și a fost actualizat ultima dată acum doi ani. În consecință, nu există nicio garanție că va funcționa cu toate temele moderne și cea mai recentă versiune de WordPress. Cu toate acestea, deoarece a funcționat bine în testul meu cu WordPress 4.8 și oferă un set frumos de opțiuni, am crezut că merită inclus.

După instalare, pluginul adaugă un nou widget de dată și oră în meniul widget. Când îl adăugați la o zonă widgetizată, vă oferă multe modalități de personalizare.

După cum puteți vedea, puteți configura formatul orei și datei (sau dezactivați-l complet), puteți schimba familia și dimensiunea fontului, precum și culoarea textului și culoarea de fundal (inclusiv codurile hex). În acest fel, este ușor să faceți widgetul să se potrivească temei dvs. Dacă acest lucru nu este suficient, widgetul are suficiente clase HTML, astfel încât să puteți implementa propriile reguli CSS personalizate cu ușurință.

Data și ora curente

Completul final din această listă este suficient de simplu. Instalați, activați și veți obține un nou widget numit Data și ora curente pe care le puteți trage în orice zonă de widget. Terminat.

Rezultatul arată decent și se ajustează automat la stilul temei dvs. De asemenea, este receptiv pentru mobil, ceea ce este obligatoriu în zilele noastre. Pe de altă parte, nu oferă opțiuni pentru a regla nimic. Este disponibil un singur format de timp, pentru mai multe trebuie să cumpărați versiunea pro.

Concluzie

Există multe motive pentru a afișa un widget de dată și oră pe site-ul dvs. WordPress. Este o modalitate bună de a informa clienții când pot ajunge la dvs., cât de actual este conținutul dvs. și multe altele.

După cum ați văzut din cele de mai sus, există mai multe moduri de a implementa acest lucru în WordPress. Una este să configurați propriul cod scurt pentru a implementa widgetul oriunde doriți. Desigur, există și pluginuri care pot face același lucru pentru dvs. Deși nu sunt copleșitori, există câțiva concurenți solizi acolo.

Acum, la tine. Ați mai folosit un widget de dată și oră pe site-ul dvs.? Dacă da, pentru ce ai avut nevoie și cum l-ai implementat? Spuneți-ne în secțiunea de comentarii de mai jos.

Imagine în miniatură a articolului de Jane Kelly / shutterstock.com