5 Cara Menambahkan Widget Tanggal dan Waktu ke Situs WordPress Anda

Menampilkan widget tanggal dan waktu adalah sesuatu yang dimulai dengan situs web surat kabar. Mendapatkan tanggal hari ini dari surat kabar mereka hanya sesuatu yang selalu menjadi bagian dari kehidupan masyarakat. Ketika jurnalisme cetak pindah ke web, itu tidak akan berubah.

Namun menampilkan tanggal dan waktu saat ini tidak hanya untuk situs web berita. Ada banyak alasan mengapa situs lain harus berpikir untuk melakukan hal yang sama:

• Anda dapat menampilkan waktu saat ini di zona waktu Anda untuk memberi tahu pelanggan kapan mereka dapat menghubungi dukungan pelanggan
• Itu membuat situs Anda terlihat hidup dan relevan, bahkan jika konten Anda sedikit lebih tua. Ini penting karena kebanyakan dari kita mencari info terbaru dan terkini.
• Jika memiliki acara mendatang di halaman Anda, waktu dan tanggal saat ini membantu pengunjung memahami berapa lama mereka harus menunggu (sebagai alternatif, gunakan modul penghitung waktu mundur seperti yang disertakan dalam tema Divi)

Singkatnya, menampilkan widget tanggal dan waktu membantu mengikat audiens Anda, membuat situs Anda lebih menarik dan memposisikan Anda sebagai penyedia berita dan informasi terkini. Cukup alasan untuk mempelajari cara menerapkannya di situs WordPress Anda.

Pada artikel berikut, kami akan menunjukkan kepada Anda beberapa cara untuk membuat widget tanggal dan waktu untuk situs web Anda. Pertama, kita akan membahas bagaimana melakukannya secara manual, kemudian akan berbicara tentang beberapa solusi plugin yang memungkinkan Anda melakukan hal yang sama tanpa pengkodean apa pun.

Kedengarannya bagus? Kalau begitu mari kita tidak main-main tapi langsung saja.

Cara Membuat Widget Tanggal dan Waktu Secara Manual di WordPress

Salah satu cara untuk memasukkan waktu dan tanggal saat ini di situs Anda adalah dengan membuat kode sendiri solusinya. Ini yang akan kita lakukan terlebih dahulu. Kami akan membuat kode pendek sederhana yang, jika dimasukkan di mana saja di situs Anda, akan menampilkan waktu dan tanggal ini kepada pengunjung Anda.

Buat Kode Pendek

Langkah pertama kami adalah mengatur kode pendek yang sebenarnya. Untuk itu, pertama-tama kita akan membuka functions.php dari tema kita saat ini. Kami sangat menyarankan Anda menggunakan tema anak untuk itu agar tidak kehilangan perubahan apa pun saat tema induk Anda diperbarui.

Setelah kami membuka file, rekatkan potongan kode ini di akhir file:

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

add_shortcode( 'time_date', 'current_time_date' );

Beberapa informasi tentang itu: Kode di atas adalah fungsi yang mengeluarkan tanggal dan waktu saat ini dan kemudian menetapkannya ke kode pendek yang disebut [time_date] . Jika Anda memasukkan kode pendek di situs Anda, itu akan memanggil fungsi ke dalam tindakan.

Dalam format yang kami gunakan di atas, waktu dan tanggal adalah output dalam format ini: 6 Juli 2017, 12:35:41. Namun, Anda dapat menggunakan format berbeda yang dapat Anda pelajari di sini.

Sekarang, untuk menguji kode, cukup salin kode pendek di suatu tempat di situs Anda. Namun, perlu diketahui bahwa secara default shortcode tidak berfungsi di dalam widget. Untuk menggunakannya, Anda perlu menginstal plugin Shortcode Widget atau menambahkan baris ini ke functions.php .

add_filter('widget_text','do_shortcode');

Setelah itu, inilah hasilnya:

Beralih ke JavaScript

Terlihat bagus sejauh ini, bukan? Namun, jika Anda mengikuti langkah-langkah di atas, Anda akan segera melihat bahwa jam tidak memperbarui dirinya sendiri. Sebaliknya, itu hanya memuntahkan waktu saat ini sekali — ketika halaman dimuat. Setelah itu tetap statis, seperti apa yang sedikit mengalahkan tujuannya, setujukah Anda?

Itu karena PHP adalah bahasa sisi server, artinya Anda perlu melakukan panggilan tambahan ke server untuk memperbarui informasi. Untuk alasan itu, kami lebih baik bekerja dengan bahasa sisi klien seperti JavaScript.

Untungnya, ada banyak jam JavaScript yang tersedia di internet. Pencarian Google singkat akan menampilkan banyak contoh. Saya menggunakan layanan ini untuk menghasilkan kode JavaScript untuk format yang saya inginkan. Setelah itu, saya memasukkan kode ke dalam file bernama clock.js yang saya salin ke folder tema saya.

Script memanggil div dari nama clockbox . Untuk alasan itu, saya mengubah fungsi saya sebelumnya menjadi yang berikut:

function current_time_date(){

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

}

add_shortcode( 'time_date', 'current_time_date' );

Sekarang, yang tersisa hanyalah memanggil file JavaScript baru saya:

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

Dan voila:

Tambahkan Gaya

Terakhir, Anda mungkin ingin dapat menata widget waktu dan tanggal agar sesuai dengan branding Anda secara keseluruhan. Untungnya, karena fungsi yang kami gunakan membuat id CSS, kami dapat menambahkan gaya kami sendiri ke widget tanggal dan waktu seperti:

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

Inilah hasilnya:

Itu tidak begitu sulit sekarang, bukan? Sudah kubilang itu akan mudah. Namun, ini hanyalah salah satu cara untuk membuat widget tanggal dan waktu Anda sendiri. Dengan potongan kode tambahan, Anda dapat membuat lebih banyak hal terjadi.

Namun, jika Anda tidak menyukai rute manual, Anda juga dapat mencapai hasil serupa dengan bantuan plugin WordPress.

Plugin untuk Membuat Widget Waktu dan Tanggal untuk Situs Web Anda

Meskipun jumlah plugin yang tersedia di direktori WordPress tidak banyak, ada beberapa contoh di luar sana yang melakukan pekerjaan dengan cukup baik.

Tanggal Jam Langsung

Pesaing pertama kami adalah plugin ini. Seperti namanya, ini memungkinkan Anda untuk menambahkan jam dan tanggal ke situs WordPress Anda.

Widget waktu dan tanggal mereka menawarkan banyak opsi penyesuaian. Anda dapat memilih antara siklus 12 atau 24 jam, apakah akan memperbarui jam setiap menit atau detik, menampilkan atau menyembunyikan tanggal dan menentukan urutannya. Widget bahkan memiliki bagian untuk CSS khusus sehingga Anda dapat menggunakan font yang sama dengan situs web Anda dan banyak lagi.

Sayangnya, opsi pemformatan sebaliknya agak terbatas. Misalnya, tidak mungkin untuk menghapus hari kerja dari tanggal. Namun, selain itu plugin melakukan apa yang seharusnya.

Widget Tanggal dan Waktu

Pertama, sedikit peringatan. Plugin ini agak lama dan terakhir diperbarui dua tahun lalu. Akibatnya, tidak ada jaminan itu akan berfungsi dengan semua tema modern dan versi terbaru WordPress. Namun, karena ini berfungsi dengan baik dalam pengujian saya dengan WordPress 4.8 dan menawarkan serangkaian opsi yang bagus, saya pikir itu layak untuk disertakan.

Setelah instalasi, plugin menambahkan widget Tanggal dan Waktu baru ke menu widget. Saat Anda menambahkannya ke area widget, ini memberi Anda banyak cara untuk menyesuaikan.

Seperti yang Anda lihat, Anda dapat mengonfigurasi format waktu dan tanggal (atau menonaktifkannya sepenuhnya), mengubah jenis dan ukuran font serta warna teks dan warna latar belakang (termasuk kode hex). Dengan begitu, mudah untuk membuat widget sesuai dengan tema Anda. Jika itu tidak cukup, widget memiliki kelas HTML yang cukup sehingga Anda dapat menerapkan aturan CSS kustom Anda sendiri dengan mudah.

Tanggal dan Waktu Saat Ini

Plugin terakhir dalam daftar ini cukup sederhana. Instal, aktifkan, dan Anda mendapatkan widget baru bernama Tanggal dan Waktu Saat Ini yang dapat Anda seret ke area widget mana pun. Selesai.

Hasilnya terlihat layak dan secara otomatis menyesuaikan dengan gaya tema Anda. Ini juga responsif seluler, yang harus dimiliki akhir-akhir ini. Di sisi lain, ia tidak menawarkan opsi apa pun untuk menyesuaikan apa pun. Hanya satu format waktu yang tersedia, untuk lebih banyak Anda perlu membeli versi pro.

Kesimpulan

Ada banyak alasan untuk menampilkan widget waktu dan tanggal di situs WordPress Anda. Ini adalah cara yang baik untuk memberi tahu klien Anda kapan mereka dapat menghubungi Anda, seberapa terkini konten Anda, dan banyak lagi.

Seperti yang telah Anda lihat di atas, ada beberapa cara untuk menerapkan ini di WordPress. Salah satunya adalah mengatur kode pendek Anda sendiri untuk mengimplementasikan widget di mana pun Anda inginkan. Tentu saja, ada juga plugin yang dapat melakukan hal yang sama untuk Anda. Meskipun tidak berlebihan, ada beberapa pesaing yang solid di luar sana.

Sekarang ke Anda. Pernahkah Anda menggunakan widget waktu dan tanggal di situs Anda sebelumnya? Jika demikian, untuk apa Anda membutuhkannya dan bagaimana Anda menerapkannya? Beri tahu kami di bagian komentar di bawah.

Gambar thumbnail artikel oleh Jane Kelly / shutterstock.com