一月16
添加日曆圖示到WordPress部落格

WordPress日曆效果圖示

看到【野兔村】的部落格上面有個漂亮的日曆圖示,真的很想要擁有,上網搜尋了許久,終於找到有國外的網友分享如何製作這種日曆圖示的方法。方法還算簡單,但對不懂得基礎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日曆效果圖示 正確的日曆圖示顯示。
WordPress日曆效果圖示,底圖錯誤沒有顯示。 當出現這種沒有底圖圖框的時候,表示日曆圖示的路徑錯誤或是沒有圖示,WordPress 沒有抓到日曆圖示的圖檔。
WordPress日曆效果圖示,圖示切邊錯誤。 當你看到這種圖示切掉一半的日曆圖示底圖,表示日曆的圖檔大小樣式設定錯誤。可以更改其【width】後面的數字參數。
WordPress日曆效果圖示,但與右邊的標題文字太近。 如果你不喜歡日曆圖示靠右邊的文章標題太近,你可以在【.the_date {】後面的地方定義 margin 的距離。比如說【margin: 0 10px 0 0;】就是定義右邊要空出10像素的留白,而上面、下面及左邊則不用留白。

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

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




本部落格提供免費電子書索取:
我如何開始寫部落格 寫部落格賺錢術 如何提昇部落格人氣

添加日曆圖示到WordPress部落格 有 7 則回應

  1. GY 說道:

    熊大,我只有顯示字沒有顯示圖耶!
    你第一步說要解壓縮到那個資料夾
    是指整個PNG資料夾都放那
    還是PNG裡的圖片檔放上去阿?

  2. 阿殘 說道:

    我也會有th的字樣~~怪怪
    自己打一遍也會,確定沒有全形的字了

  3. 工作熊 說道:

    阿殘;
    有"th"的字樣是正常的,這是英文日曆的標準用法。如果不想要"th"的字樣,只要將元來的程式碼
    ?php the_time(‘jS’) ?
    改成
    ?php get_the_date(“d") ?
    這樣就可以了。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *