看到【野兔村】的部落格上面有個漂亮的日曆圖示，真的很想要擁有，上網搜尋了許久，終於找到有國外的網友分享如何製作這種日曆圖示的方法。方法還算簡單，但對不懂得基礎CSS語法的朋友可能也有點吃力，總之我盡量把教學寫得清楚，有問題就留言討論吧！
文章參考：http://www.euphorish.com/2007/web-20-date-icons-for-your-blog/
Step 1.
下載日曆圖示並解壓縮，上傳到自己版型的圖檔目錄下。【/public_html/wp-content/themes/twentyten/images/】一般WordPress的版型都存在【/public_html/wp-content/themes/】目錄下方，至於版型目錄，因為這裡以【twentyten】為範例，所以會放在【/twentyten/images/】目錄。
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>
疑難排解：
下面是我在安裝日曆圖示時所發生的一些狀況與問題，在這裡把它們列出來給大家參考，當然如果大家在安裝的時候有問題的話也可以留言討論，另外如果覺得它日曆圖示太大的話，也可以自行使用繪圖軟體縮小在存成.PNG格式的圖檔，改變了圖示的大小後，其相對的位置可能也必須微調一下：
 |
正確的日曆圖示顯示。 |
 |
當出現這種沒有底圖圖框的時候，表示日曆圖示的路徑錯誤或是沒有圖示，WordPress 沒有抓到日曆圖示的圖檔。 |
 |
當你看到這種圖示切掉一半的日曆圖示底圖，表示日曆的圖檔大小樣式設定錯誤。可以更改其【width】後面的數字參數。 |
 |
如果你不喜歡日曆圖示靠右邊的文章標題太近，你可以在【.the_date {】後面的地方定義 margin 的距離。比如說【margin: 0 10px 0 0;】就是定義右邊要空出10像素的留白，而上面、下面及左邊則不用留白。 |
回到》用Wordpress架設部落格網站教學 首頁
延伸閱讀：
WordPress:深入了解WP-PostViews製作「熱門文章」清單
WordPress外掛：WP-PostViews(文章流量統計)
WP-PageNavi讓Wordpress也可以有數字分頁功能列
Leave a Reply