Membuat Button Tanggal WordPress

Secara default, tampilan tanggal postingan artikel akan ditampilkan sebagai teks biasa. Jika anda mau, anda dapat memodifikasi tampilan tanggal sebuah artikel dimuat dengan grafik sehingga lebih menarik. Berikut kita akan belajar bagaimana cara membuat sebuah button tanggal untuk WordPress melalui 3 langkah sederhana.

Langkah Pertama – Tulis Kode

<div class=”post-date”>
<div class=”month”><?php the_time(’M’) ?></div>
<div class=”day”><?php the_time(’d’) ?></div>
</div>

Begini semestinya tampilan kodenya :

date_button_codes.gif

Apa makna kode-kode itu ? Berikut penjelasannya :

<div class=”post-date”> – Kita mulai box atau DIV dengan nama “post-date.”
<div class=”post-month”> – Dalam box post-date, kita memulai box lain untuk bulan.
<?php the_time(’M’) ?> – Disini kita gunakan fungsi PHP the_time(’M’), untuk memanggil bulan dimana kita membuat artikel, contohnya JUN untuk Juni.
</div> – Box bulan berakhir disini.
<div class=”day”> – Box untuk hari dimulai.
<?php the_time(’d’) ?> – Gunakan fungsi PHP the_time(’d’), kita akan memanggil angka hari yang berupa 2 digit nomer, misalnya 03.
</div> – Box hari selesai.
</div> – Tak ada lagi yang perlu ditambahkan, jadi kita akhiri box post-date atau DIV dengan tag penutup.

Langkah Kedua – Buat Gambar Latar

Kita memerlukan program pengolah gambar, seperti Photoshop, untuk mendesain gambar latar untuk button sesuai kehendak kita. Disini aku perlihatkan gambar yang aku ambil dari blog WpDesigner.com:

date_button_template.gif

Langkah Ketiga – Aturlah Style-nya

Langkah ini membutuhkan sedikit pengetahuan tentang CSS dan bergantung pada selera individu karena bisa jadi latar imagenya berbeda, Namun, inilah dasarnya. buat class di file css kita (biasanya style.css), gunakan notepad++ untuk keperluan ini, atau apapun editor anda.

.post-date{
float: left;
display: inline;
margin: 0 10px 0 0;
background: url(images/date_button_template.gif) no-repeat;

date_button_template.gif merupakan nama gambar latar anda. images/ merupakan lokasi folder dimana gambar berada. Jika anda menyimpan gambar di folder lain, ganti images/ sesuai dengan nama folder yang anda gunakan untuk menyimpan gambar.

Catatan :
Letakkan kode pertama di file single.php dimana anda ingin muncul button tanggal itu.

Dari berbagai sumber