Ads Top

Wordpress temamızda tarihi takvim yaprağı olarak gösterme

Merhaba, bundan sonra temaları düzenleme konusunda zaman zaman paylaşımlar yapacağım, umarım faydalı paylaşımlar olacak.

Bu paylaşımımızda Wordpress temamızda yazılarımızın yazıldığı tarihi gösterirken, bunu takvim yaprağı tarzında göstereceğiz.

İlk önce takvim yaprağı olarak göstereceğimiz arkaplanımızı photoshop veya benzeri bir programla tasarımımıza uygun olarak ayarlıyoruz.
Uygun arkaplanımızı ayarladıktan sonra, temamızın içinde bulunan images klasörünün içine gönderiyoruz.

daha sonra aşşağıdaki kodu
<div class="date"><strong><?php the_time('M') ?></strong>
<em><?php the_time('j') ?></em><span><?php the_time('Y') ?></span></div>

temamızın index.php ve single.php dosyalarımızın içine resimdeki gibi yerleştiriyoruz.
Burada tercih size kalmış, tarihi nerede göstermek istiyorsanız bu kodu oraya koymalısın.



Sıra css dosyamızı düzenlemeye geldi.
temamızın css dosyasını açıyoruz ve aşağıdaki kodları content kısmına yapıştırıyoruz
.date {
background: url(images/date.png) no-repeat top left;
width: 60px;
height: 68px;
text-align: center;
padding: 8px 0 0 0;
float: left;
}

Bu kod ile arkaplanımızın ayarlarını yapıyoruz.
width: 60px kısmında arkaplanımızın genişliğini belirtiyoruz. Eğer farklı boyutlarda bir arkaplan ayarladıysanız bu kısmı ona göre düzenlemelisiniz.
Aynı şekilde height: 68px; kısımda da arkaplanımızın yüksekliğine göre ayarlamalısınız.
Aynı şekilde diğer kodlarımız olan strong, em ve span kısımlarında da width kısmını arkaplanınızın genişliğine göre değiştirmelisiniz.
.date strong {
width: 60px;
display: block;
color: #fff;
font: 900 14px "Georgia", Times New Roman, Times, serif;
}

Bu kod ile Ay kısmını gösteriyoruz.
.date em {
width: 60px;
font: 900 22px/22px "Georgia", Times New Roman, Times, serif;
color: #3e97b8;
margin: 2px 0 0 0;
display: block;
}

Bu kod ile GÜN kısmını gösteriyoruz
.date span {
width: 60px;
font: 400 10px "Arial", Helvetica, sans-serif;
color: #3e97b8;
}

ve bu kod ile YIL kısmını gösteriyoruz.

İşte bu kadar, şimdi temamızda tarihi düz metin yerine takvim yaprağı olarak göstere biliriz.

Başka bir paylaşımda görüşmek dileğiyle.

Hiç yorum yok:

Blogger tarafından desteklenmektedir.