WordPress Tarih ve Zaman Gösteriminin Özelleştirilmesi


WordPress tarih gösterimi aslına bakarsanız çoğu zaman üzerinde pek durmadığımız bir özelliktir. Tarih gösteriminin özelleştirilmesi ve farklı şekillerde gösterilmesi aslına bakarsanız sandığımız kadar zor değil.

Farklı tarih gösterimleriyle birlikte blogumuzun görünümünü de büyük oranda değiştirebilir ve farklılık katabiliriz. Bu makalemizde örnek olarak WordPress tabanlı bir blog üzerinde bir tarih alanı oluşturacak ve bunu görüntüleyeceğiz.

Öncelikle ilk adım olarak tarih alanımızın görüneceği Xhtml, Php kod bileşenini yazalım ve açıklayalım. Bu kodu index.php içerisinde gönderi başlığınızdan önce görünmesini istediğiniz bir alana ekleyin.

[HTML]

< ?php the_time(d); ?>

< ?php the_time(M); ?>

[/HTML]

Yukarıdaki kodda gördüğünüz üzere tarih isimli bir div sınıfı oluşturduk. Bu div içerisinde “tarih-gun” isimli sınıfa WordPress’in the_time fonksiyonundan yararlanarak günü gösteren Php kodunu (< ?php the_time(d); ?>) yazdık ve etiketimizi kapattık. Sonra aynı şekilde “tarih-ay” isimli sınıfta da < ?php the_time(M); ?> kodunu kullanarak ayın 3 harfli kısaltmasını yazdık. Daha sonra açtığımız etiketleri sırasıyla kapattık ve işin Xhtml, Php bölümünü bitirdik. Sıra geldi Css’ye, yani en sevdiğim kısma icon smile Wordpress Tarih ve Zaman Gösteriminin Özelleştirilmesi

Sırasıyla tarih, tarih-gun ve tarih-ay isimli sınıflarımızı style.css dosyasında tanımlıyoruz.

[HTML]
.tarih {
width:48px;
height:48px;
background:#fff url(tariharkaplan.gif) no-repeat;
display:inline;
float:left;
}

.tarih-gun {
font:bold 14px/24px Arial, Verdana, sans-serif;
color:#333;
text-align:center;
}

.tarih-ay {
font:bold 16px/24px Arial, Verdana, sans-serif;
color:#fff;
text-align:center;
}
[/HTML]

Css kodlarında ise önce tarih alanını tanımladık. Bir arkaplan resmi belirledik. Bu alan 48*48 piksel genişliğinde olacak ve arkaplan resmimiz de aynı boyutta. Bu resmi ben Photoshop’ta önceden oluşturup uygulamamızda kullandım. Makalemizin sonunda örnek resmi alabilirsiniz.

Sonrasında tarih-gun alanında arkaplan resmimize uygun olarak #333 renginde ve Arial yazıtipinde, 14 piksel boyutunda bir yazıtipi belirledik. Text-align:center parametresi ile yazılan değerin alanın ortasında yer almasını istedik. Tarih-ay bölümünde ise sadece yazıtipimizin rengi ve boyutunu değiştirdik. Dikkat ederseniz 48 piksellik arkaplan resmimizde iki ayrı alan olan tarih-ay ve tarih-gun içindeki yazıtipimizde 24 piksellik bir alan yüksekliği belirledik. (font:bold 16px/24px Arial, Verdana, sans-serif; kodunda gördüğünüz gibi)

Yukarıda yer alan kodları index.php içinde tarih alanımızın görünmesini istediğimiz yere ekleyerek tamamlayalım. Gördüğünüz gibi WordPress’in the_time fonksiyonu oldukça esnek bir yapıda ve bu özellikleri farklı farklı kullanarak değişik görüntüler elde edebiliriz.