WordPress Web Sitenize Tarih ve Saat Widget'ı Eklemenin 5 Yolu

Yayınlanan: 2017-07-15

Tarih ve saat widget'ı görüntülemek, gazete web siteleriyle başlayan bir şeydir. Gazetelerinden bugünün tarihini almak, her zaman insanların hayatlarının bir parçası olan bir şeydi. Basılı gazetecilik web'e taşındığında, bu değişmek üzere değildi.

Ancak güncel tarih ve saatin görüntülenmesi sadece haber siteleri için değildir. Diğer sitelerin de aynı şeyi yapmayı düşünmesi için birçok neden var:

Müşterilere müşteri desteğine ne zaman ulaşabileceklerini bildirmek için saat diliminizde geçerli saati görüntüleyebilirsiniz.
İçeriğiniz biraz daha eski olsa bile sitenizin canlı ve alakalı görünmesini sağlar. Çoğumuz en son, güncel bilgileri aradığımız için bu önemlidir.
Sayfanızda yaklaşan etkinlikler varsa, mevcut saat ve tarih, ziyaretçilerin kendilerini daha ne kadar beklemeleri gerektiğini anlamalarına yardımcı olur (alternatif olarak, Divi temasında bulunana benzer bir geri sayım sayacı modülü kullanın)

Kısacası, bir tarih ve saat pencere öğesi görüntülemek, hedef kitlenizi bağlamanıza yardımcı olur, sitenizi daha çekici hale getirir ve sizi güncel haber ve bilgi sağlayıcısı olarak konumlandırır. WordPress sitenize nasıl uygulanacağını öğrenmek için yeterli sebep.

Aşağıdaki makalede, web siteniz için bir tarih ve saat widget'ı oluşturmanın birkaç yolunu göstereceğiz. İlk olarak, manuel olarak nasıl yapılacağını ele alacağız, ardından aynı şeyi herhangi bir kodlama olmadan yapmanıza izin veren bazı eklenti çözümlerinden bahsedeceğiz.

Kulağa iyi geliyor? O zaman tembellik etmeyelim ama hemen konuya girelim.

WordPress'te Manuel Olarak Tarih ve Saat Widget'ı Nasıl Oluşturulur

Geçerli saati ve tarihi sitenize eklemenin bir yolu, bir çözümü kendiniz kodlamaktır. İlk yapacağımız şey bu. Sitenizde herhangi bir yere girilirse, ziyaretçilerinize saat ve tarihi gösterecek basit bir kısa kod oluşturacağız.

Kısa Kodu Oluşturun

İlk adımımız gerçek kısa kodu ayarlamaktır. Bunun için öncelikle mevcut temamızın function.php dosyasını açacağız. Ana temanız güncellendiğinde herhangi bir değişikliği kaybetmemek için bunun için bir alt tema kullanmanızı şiddetle tavsiye ederiz.

Dosyayı açtıktan sonra, bu kod parçasını sonuna yapıştırın:

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

add_shortcode( 'time_date', 'current_time_date' );

Bununla ilgili bazı bilgiler: Yukarıdaki kod, geçerli tarih ve saati yayan ve ardından onu [time_date] adlı bir kısa koda atayan bir işlevdir . Kısa kodu sitenize girerseniz, işlevi harekete geçirir.

Yukarıda kullandığımız formatta saat ve tarih şu formatta çıktı: 6 Temmuz 2017, 12:35:41. Ancak, burada öğrenebileceğiniz farklı formatları kullanabilirsiniz.

Şimdi, kodu test etmek için kısa kodu sitenizde bir yere kopyalamanız yeterlidir. Ancak, varsayılan olarak kısa kodların widget'ların içinde çalışmadığını unutmayın. Bunları kullanmak için Shortcode Widget eklentisini kurmanız veya bu satırı function.php dosyasına eklemeniz gerekir .

add_filter('widget_text','do_shortcode');

Bundan sonra, işte sonuç:

tarih ve saat widget'ı php

JavaScript'e geç

Buraya kadar iyi görünüyor, değil mi? Ancak yukarıdaki adımları izlerseniz, saatin kendini güncellemediğini hemen fark edeceksiniz. Bunun yerine, geçerli saati yalnızca bir kez – sayfa yüklendiğinde tükürür. Sonrası statik kalıyor, ne tür bir amacı bozuyor, katılmıyor musunuz?

Bunun nedeni PHP'nin bir sunucu tarafı dili olmasıdır, yani bilgileri güncellemek için sunucuya ek çağrılar yapmanız gerekir. Bu nedenle, JavaScript gibi istemci tarafı bir dille çalışmaktan daha iyiyiz.

Neyse ki, internette çok sayıda JavaScript saati mevcut. Kısa bir Google araması bir sürü örnek gösterecektir. İstediğim format için JavaScript kodunu oluşturmak için bu hizmeti kullandım. Ondan sonra kodu, tema klasörüme kopyaladığım clock.js adlı bir dosyaya giriyorum .

Komut dosyası, clockbox adındaki bir div'i çağırır . Bu nedenle önceki işlevimi aşağıdaki gibi değiştirdim:

function current_time_date(){

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

}

add_shortcode( 'time_date', 'current_time_date' );

Şimdi geriye kalan tek şey yeni JavaScript dosyamı çağırmak:

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

Ve işte:

tarih ve saat widget'ı javascript

Stil Ekle

Son olarak, muhtemelen saat ve tarih widget'ınızı genel markanıza uyacak şekilde biçimlendirmek istersiniz. Neyse ki, kullandığımız işlev CSS kimliği oluşturduğundan, tarih ve saat widget'ına şu şekilde kendi stilimizi ekleyebiliriz:

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

İşte sonuç:

stil ile tarih ve saat widget'ı

Bu o kadar da zor değildi, değil mi? Sana kolay olacağını söylemiştim. Ancak bu, kendi tarih ve saat widget'ınızı oluşturmanın yalnızca bir yoludur. Ek kodlama parçalarıyla çok daha fazlasını gerçekleştirebilirsiniz.

Ancak, manuel rotadan biri değilseniz, WordPress eklentileri yardımıyla da benzer sonuçlar elde edebilirsiniz.

Web Siteniz için Saat ve Tarih Widget'ları Oluşturmak için Eklentiler

WordPress dizinindeki mevcut eklentilerin sayısı çok fazla olmasa da, yeterince iyi iş çıkaran birkaç örnek var.

Canlı Saat Tarihi

canlı saat tarih eklentisi

İlk rakibimiz bu eklenti. Adından da anlaşılacağı gibi, WordPress web sitenize bir saat ve tarih eklemenizi sağlar.

Saat ve tarih widget'ları birçok özelleştirme seçeneği sunar. Saati her dakika veya saniyede bir güncellemek, tarihi göstermek veya gizlemek ve sırasını belirlemek için 12 veya 24 saatlik bir döngü arasından seçim yapabilirsiniz. Widget'ın özel CSS için bir bölümü bile vardır, böylece web sitenizle aynı yazı tipini ve daha fazlasını kullanabilirsiniz.

canlı saat tarihi widget seçenekleri

Ne yazık ki, biçimlendirme seçenekleri bir şekilde sınırlıdır. Örneğin, tarihten hafta içi günü çıkarmak mümkün değildir. Ancak, bunun dışında eklenti yapması gerekeni yapar.

Tarih ve Saat Widget'ı

Öncelikle küçük bir uyarı. Bu eklenti biraz eski ve en son iki yıl önce güncellendi. Sonuç olarak, tüm modern temalarla ve WordPress'in en son sürümüyle çalışacağının garantisi yoktur. Ancak, WordPress 4.8 ile yaptığım testte iyi çalıştığından ve güzel bir dizi seçenek sunduğundan, eklemeye değer olduğunu düşündüm.

Kurulumdan sonra eklenti, widget menüsüne yeni bir Tarih ve Saat widget'ı ekler. Widget'lı bir alana eklediğinizde, özelleştirmeniz için size birçok yol sunar.

tarih ve saat widget seçenekleri

Gördüğünüz gibi, saat ve tarih biçimini yapılandırabilir (veya tamamen devre dışı bırakabilir), yazı tipi ailesini ve boyutunu, metin rengini ve arka plan rengini (onaltılı kodlar dahil) değiştirebilirsiniz. Bu şekilde, widget'ı temanıza uygun hale getirmek kolaydır. Bu yeterli değilse, widget'ta kendi özel CSS kurallarınızı kolaylıkla uygulayabilmeniz için yeterli HTML sınıfı vardır.

Geçerli Tarih ve Saat

geçerli tarih ve saat eklentisi

Bu listedeki son eklenti yeterince basit. Yükleyin, etkinleştirin ve herhangi bir pencere öğesi alanına sürükleyebileceğiniz Geçerli Tarih ve Saat adlı yeni bir pencere öğesi elde edin. Tamamlandı.

Sonuç iyi görünüyor ve temanızın stiline otomatik olarak uyum sağlıyor. Ayrıca, bu günlerde olması gereken mobil duyarlı. Öte yandan, herhangi bir şeyi ayarlamak için herhangi bir seçenek sunmuyor. Yalnızca bir seferlik biçim mevcuttur, daha fazlası için pro sürümünü satın almanız gerekir.

Çözüm

WordPress sitenizde bir saat ve tarih widget'ı görüntülemenin birçok nedeni vardır. Müşterilerinize size ne zaman ulaşabileceklerini, içeriğinizin ne kadar güncel olduğunu ve daha fazlasını bildirmenin iyi bir yoludur.

Yukarıda gördüğünüz gibi, bunu WordPress'te uygulamanın birkaç yolu vardır. Bunlardan biri, widget'ı istediğiniz herhangi bir yere uygulamak için kendi kısa kodunuzu oluşturmaktır. Tabii ki, sizin için aynısını yapabilecek eklentiler de var. Ezici olmasa da, orada bazı sağlam rakipler var.

Şimdi sana geçti. Daha önce sitenizde saat ve tarih widget'ı kullandınız mı? Eğer öyleyse, buna ne için ihtiyacınız vardı ve bunu nasıl uyguladınız? Aşağıdaki yorumlar bölümünde bize bildirin.

Makale küçük resmi, Jane Kelly / Shutterstock.com