WordPress 版面「Crochimera」

Theme: Crochimera 1.0

名稱:Crochimera
版本:1.0
作者:Wanico
網站:Lab Crocodile

第二次做 WordPress 版面,自學者又自找麻煩了;所謂自找麻煩,是指試了一些以前沒接觸過的東西,還好網路上的資源相當充足、足以應付碰到的所有問題。這個版面具有下列這些特色──HTML5 和 CSS3、index.php 的版面不同於其他頁面、WordPress 文章格式、以及使用外連圖床的特色圖片 (featured image)。

HTML5 和 CSS3

其實 HTML5 有很多有趣的功能都沒用到,重點都擺在 SEO 的標籤上,像是 header、nav、和 section…等。CSS3 部份其實之前的版面就有用到圓角了,這次另外使用了陰影、條紋背景、不透明度、大小變化、以及轉角度。其中值得一提的是條紋背景和轉角度。

首先排除 IE、其他瀏覽器對條紋背景的支援度其實都很好,但是大面積的條紋背景用 Firefox 瀏覽的話會造成瀏覽器動作緩慢,因此為了兼顧 Firefox 最後還是捨棄用 CSS 寫、直接改用圖片。然而問題不是這樣就解決了,這就要講到變形處理的轉角度,若是斜線條紋圖片背景、轉角度後背景填滿的區塊邊緣會出現銳利的鋸齒,因此對轉角度的處理這邊用的是 CSS 寫出來的背景,如上圖所示網誌標題上的 “Welcome to” 區塊。

參考文章:
香腸炒魷魚:WordPress佈景改寫成HTML5的前置步驟
網路集客力:Inbound Marketing Force:HTML5 與 SEO – HTML4/XHTML 與 HTML5 語義架構的差別
LEA VEROU:Checkerboard, striped & other background patterns with CSS3 gradients

Index.php 的版面不同於其他頁面

一般來說 index.php 和 archieve.php 的版面安排相去不遠,就是把 header、sidebar、和 footer 各 php 檔集中起來、裡面再寫語法去抓文章列表;這邊是看過一些偏商用 WordPress 才發現 index.php 可以另外寫不同的版面,不侷限於幾乎和 archieve.php 相同的模式。如果另外需要一個「一般的 index.php」頁面、只要寫一個頁面模板就可以了,例如這邊的 Blog 頁面顯示的文章列表就是另外寫出來的頁面模板;至於後台「閱讀設定」的「首頁顯示」設定為「最新的文章」就不會影響到上述的作法。

WordPress 文章格式

WordPress 3.1增加了文章格式 (Post Formats) 功能,效果的話和 tumblr 很像。不同的文章格式可設定不同的樣式,此佈景主題用到的文章格式只有旁白 (aside) 和藝廊 (gallery),有興趣可以參閱 Blog 頁面、稍微找一下即可發現藝廊和一般文章呈現的差別。

參考文章:
WPBeginner: What, Whys, and How to’s of Post Formats in WordPress 3.1
Lucifr:Inbound Marketing Force: WordPress 的 Tumblr 化:Post Format 功能小试

使用外連圖床的特色圖片 (featured image)

其實這標題應該下「使用外連圖床的 thumbnail」,因為 WordPress 內建的「特色圖片」只限於上傳到媒體庫的檔案、沒辦法用其他空間的圖片網址,所以實際上這邊用的和 WordPress 內建的相去甚遠。總之,因為不想用圖片去塞自己的網頁空間、能外連就盡量外連,所以參考下列那篇教學文、另外自己再加了沒設定 thumbnail 時的顯示圖片,成功在 archieve.php 和 search.php 等頁面運用此使用「自訂欄位」實現的 thumbnail。

參考文章:
tutorial9: Add Thumbnails to WordPress with Custom Fields

結語

這次做版面的過程中比較感嘆的是參考資料;排除英文圈,繁中圈的教學資源遠不及簡中圈來的充足,不然就是內容不夠深入、或是有缺漏,雖然還是必須感謝願意寫教學文的人,但還是希望繁中圈有朝一日能讓初學者有豐富和最新的資料參考。總之,這次因為時間充足、真的玩了不少新東西,現在開學了沒辦法再這樣玩;希望還有機會做新版面!雖然不知道是何時就是了XD

其他參考文章:

银子 ’s 博客:WordPress制作标签云Tags单独页面
怒风的Blog:wordpress文章作者相关技巧
NeoEase:WordPress 3.0 导航菜单 (开发篇)
Life Studio:jQuery 控制字体大小切换
光速捏猫爪♪:制作可变肥的搜索框

分類:網站網誌