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

WordPress日曆效果圖示看到【野兔村】的部落格上面有個漂亮的日曆圖示,真的很想要擁有,上網搜尋了許久,終於找到有國外的網友分享如何製作這種日曆圖示的方法。方法還算簡單,但對不懂得基礎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/】目錄。

下載 .PNG 日曆圖示

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

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

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



留言注意事項:
1.首次留言須通過審核後留言才會出現在版面,請大家不要重覆留言。
2.留言時請在相關主題的文章下留言,與主題無關的留言將會被視為垃圾留言,請善加利用搜尋框尋找相關文章,找不到主題時請在「水平選單」的「留言板」留言。
3. 本部落格支援Gravatar通用個人頭像
4. 歡迎您訂閱本部落格的最新文章,當有新文章時會主動以電子郵件通知您。

發表迴響

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