Chẳng biết bắt đầu từ đâu đây, bởi vì quả thực rất đơn giản để tạo date stamp cho Wordpress, mà tôi lại rất thích nó mỗi lần mang CSS ra nghịch ngợm và trang trí. Tạo date stamp cũng là bài học đầu tiên của tôi về CSS, đến bây giờ lại được dùng lần nữa cho Wordpress và viết bài này trên blog của mình chia sẻ cách tạo nó.

Vị trí của date stamp thường được đặt bên trái tiêu đề trong single.php, hoặc bên phải tùy vào sở thích của người làm.

Bạn có thể hình dung calendar icon & date stamp qua một số mẫu sau:

Bắt tay vào việc nhé!

Chỉ cần 3 bước để tạo:

Bước 1: Tạo background (hay calendar icon)

Dùng photoshop tạo 1 hình nền cho date stamp, bước này chú ý đến kích cỡ của image, thường có độ lớn 46×50, độ lớn phụ thuộc vào kích thước và độ cao tiêu đề bài của single.php, tìm thấy bằng cách xem font-size <hx></hx> là bao nhiêu (x=có thể là 1,2,3..tùy vào từng theme mà tác giả đặt cho nó) . Bước làm này thực sự khó khăn với ai chưa làm quen với Photoshop, nhưng đừng lo bởi trên kho tàng Internet vô vàn những thứ ta cần đến đều miễn phí và hướng dẫn cách làm qua các bài tutorial, tôi xin giới thiệu một số địa chỉ để các bạn tham khảo cách làm bằng photoshop hoặc tải chúng về.

Xem tutorial tạo calendar icon

Calendar Icon – Photoshop tutorial

Bài khác về Calendar icon

Và một bài nữa 

Hoặc download miễn phí.

Download mẫu 1

Download mẫu 2

Bước 2: Điền code

Điền code sau vào single.php, vị trí điền tùy chọn, tôi thì đặt trước tiêu đề bài viết trong single.php

<div class="date-stamp">
<div class="month"><?php the_time('M') ?></div>
<div class="day"><?php the_time('d') ?></div>
</div>

Bây giờ tìm hiểu ý nghĩa của đoãn mã trên

<div class=”date-stamp”> – bắt đầu một box – hay <div> – với tên là date-stamp

<div class=”month”> – box có tên month, nằm trong box date-stamp

<div class=”day”> – box có tên day, nằm trong box date-stamp

<?php the_time(’M') ?> – Sử dụng php hàm the-time(’M') truy xuất giá trị của tháng, ở đây là M (ký hiệu cho Month), hiển thị sẽ là ví dụ FEB.

<?php the_time(’d') ?> – Sử dụng php hàm the-time(’d') truy xuất giá trị của ngày, ở đây là d (ký hiệu cho Day), hiển thị sẽ là 2 chữ số ví dụ 28.

Bạn có thể lựa chọn cách hiển thị ngày và tháng bằng cách xem thêm ở www.php.net

</div> – thẻ đóng box.

Bước 3: Now! Trang hoàng date-stamp bằng CSS

Bước này yêu cầu bạn biết chút xíu (rất chút xíu) về CSS. Mã CSS có thể khác nhau, bởi vì nó phụ thuộc vào độ lớn của calendar icon (background), theme của bạn và của tôi, vì vậy không thể nói trước nếu bạn làm giống như bài này mà sao không thành công, nhưng về cơ bản đoạn mã CSS của tôi như sau:

/*CSS DATE STAMP BOX*/
.date-stamp{
float: left;
display: inline;
margin: 0 10px 0 0;
padding: 0 0;
background: url(images/calendar-icon.png)  no-repeat;
}

.month{
color: red;
font-family: Verdana, Tahoma, Arial;
font-size: 15px;
margin: 0 0;
padding: 0 0;
}

.date{
color: blue;
font-family: Veranda, Tahoma, Arial;
font-size: 11px;
margin: 0 0;
padding: 0 0;
}

Dĩ nhiên đoạn mã này được add thêm vào style.css và nhớ bỏ calendar-icon.png trong thư mục images theme của bạn.

đây là kết quả

Chúc bạn có theme ưng ý!