看到【野兔村】的部落格上面有個漂亮的日曆圖示，真的很想要擁有，上網搜尋了許久，終於找到有國外的網友分享如何製作這種日曆圖示的方法。方法還算簡單，但對不懂得基礎CSS語法的朋友可能也有點吃力，總之工作熊盡量把教學寫得清楚，有問題就留言討論吧！

當時的參考文章網址已經失效了，現在工作熊也忘了內容，但工作熊下面的步驟及語法還是可以參考：

Step 1.
下載日曆圖示並解壓縮，上傳到自己版型的圖檔目錄下。【/public_html/wp-content/themes/twentyten/images/】一般WordPress的版型都存在【/public_html/wp-content/themes/】目錄下方，至於版型目錄，因為這裡以【twentyten】為範例，所以會放在【/twentyten/images/】目錄。

目前原下載的網址已經失效了，工作熊會建議你直接在Google上搜尋【Calendar icon】來使用。

Step 2.
將下面這段程式碼複製並貼到WordPress的style.css式樣表當中。進到WordPress的後台，點選【外觀》主題編輯器》styless.css】就可以編輯了，你可以把程式碼放到式樣表的最下面的位置就好了。其中的【images/dateicons/dateicon.】為圖檔的位置，請更改並確認至正確位置，否則圖示將無法顯示。

.the_date {
display:block;
text-align: center;
float:left;
font-family: Arial, Helvetica, sans-serif;
background: url(images/dateicons/dateicon.) no-repeat;
width:80px;
} .date_m {
display:block;
font-size: .9em;
margin:0;
padding:0;
font-weight: bold;
text-align:center;
} .date_d {
display:block;
font-size:1.4em;
margin:0;
padding:0.7em 0 1.3em 0;
text-align: center;
} 

Step 3.
如果你使用的是「Twenty Ten」的佈景主題，那麼接著要更改loop.php的程式碼，請打開 loop.php 並找到【<a href=”<?php the_permalink(); ?>】這段程式碼，然後在其前面貼上下列的程式碼，請注意：loop.php裡面有兩個一模一樣的搜尋字串，你可以兩個地方都做修改，或是只更改第二個。

請注意：如果你是直接複製原參考來源的英文文章內的程式碼，它的單引號(‘)及雙引號(“)用的是全形，必須要更改成為正常ASCII的半形才可以。

<div class=”the_date”>
<div class=”date_m”><?php the_time(‘F’) ?></div>
< div class=”date_d”><?php the_time(‘jS’) ?></div>
< /div>

2012/02/21 update：使用上述的程式碼，在日期的地方除了會顯示日期數字以外，還會顯示出1st、2nd、3rd、4th…31th等，這些第幾天的式樣在一般的英文日曆是很普遍，如果你不喜歡這樣的式樣，而想要單純的數字就好，可以將上面的程式碼改成如下就可以了：

<div class=”the_date”>
<div class=”date_m”><?php get_the_date(‘M’) ?></div>
< div class=”date_d”><?php get_the_date(‘d’) ?></div>
< /div>

疑難排解：

下面是工作熊在安裝日曆圖示時所發生的一些狀況與問題，在這裡把它們列出來給大家參考，當然如果大家在安裝的時候有問題的話也可以留言討論，另外如果覺得它日曆圖示太大的話，也可以自行使用繪圖軟體縮小在存成.PNG格式的圖檔，改變了圖示的大小後，其相對的位置可能也必須微調一下：

	正確的日曆圖示顯示。
	當出現這種沒有底圖圖框的時候，表示日曆圖示的路徑錯誤或是沒有圖示，WordPress 沒有抓到日曆圖示的圖檔。
	當你看到這種圖示切掉一半的日曆圖示底圖，表示日曆的圖檔大小樣式設定錯誤。可以更改其【width】後面的數字參數。
	如果你不喜歡日曆圖示靠右邊的文章標題太近，你可以在【.the_date {】後面的地方定義 margin 的距離。比如說【margin: 0 10px 0 0;】就是定義右邊要空出10像素的留白，而上面、下面及左邊則不用留白。

回到》用Wordpress架設部落格網站教學 首頁

延伸閱讀：
WordPress外掛：WP-PostViews(文章流量統計)
WP-PageNavi讓Wordpress也可以有數字分頁功能列
WordPress:深入了解WP-PostViews製作「熱門文章」清單