Çeşitli blog sitelerinde özellikle yazıların yan kısımlarında o yazının yanında bulunan tarih simgeleri görüyoruz. Bu yazımda wordpress tarih kodlarını kullanarak css & xhtml uyumlu tarih simgeleri oluşturacağız.

kullanacağımız wordpress tema kodları

Yazdığınız gün

<?php the_time('j'); ?>

Yazdığınız ay

<?php the_time('M'); ?>

Yazdığınız yıl

<?php the_time('Y'); ?>

evet kullanacağımız wordpress tema kodları bunlar.

Kodları XHTML ile kullanalım

<div class=”date”><?php the_time(’j'); ?><br />
<span class=”month”>
<?php the_time(’M'); ?></span>
<br /><?php the_time(’y'); ?>
</div>

Daha sonra wp-admin’e giriyoruz. Görünüm –> Tema editörü –> Ana İndeks Åz(ablonun da uygun bir yere xhtml kodlarını yapıştırıyoruz. Kaydedip sitemize baktıktan sonra henüz css kodları yazmadığımızdan dolayı sitenizde ki görüntü şu şekilde olacaktır.

CSS kodlarımızı yazalım

.date {width:3em;       padding:0.6em 0 0 0;
text-align:center;
border-right:1px solid #bcd0d4;
border-bottom:1px solid #bcd0d4;
color:#355b61;
background-color:#dfe9eb;}

.month {text-transform:uppercase; font-weight:bold; color:#9b241b;}

bu kodları wp-admin den görünüm –> tema editörü –> style.css’nin içine yapıştıralım. Kaydedip sitemize baktığımızda aşağıda ki görüntü gibi bir öncekinden daha güzel çıkacaktır. Fakat background-image belirtmediğimiz için yazının girişinde solda bulunan tarih simgesi gibi olmayacaktır.

Yukarı da ki simgeyi yaptık. Åz(imdi birde buna bir background-image ekleyelim. Bunun için aşağıda ki resmi kaydedin.

Tekrar wp-admin’e giriyoruz. Görünüm –> Tema Editörü –> Style.css deki .date kodlarına

background-image:url(images/calbg.jpg);

background-repeat:no-repeat;

background-position:top center;

ekliyoruz. Kaydedip tekrar sitemize bakıyoruz.

Ve sonuç…

Yorumlar: