imXD5 以HTML5為架構的WordPress佈景主題

又到了換佈景的季節了，這回突然心血來潮想要挑戰一下HTML5的架構。雖說這個架構要到2022年才會完全落實，不過現在開始動其實也不嫌早，畢竟這是未來的趨勢，使用語意標籤去架構整個網站，未來維護也會比較方便，新標籤也多了一些額外功能，對於搜尋引擎來講，似乎有一些小小的加分(?)，在這樣的迷思下，不小心就把網站給改好了。

像是上一版的imXD只有一張RSS圖感覺非常單調，所以這次加了許多的小圖案(雖然也不是很明顯..)來點綴一下網站。不過主要的變化還是對整體的網站架構有了新的變動，也把許多功能function化，讓佈景主題程式碼乾淨一點，只是functions.php倒是增肥了不少，至於CSS也用了一些CSS3的語法來達到一些小小的特效。

本來這篇文章是想要先打完之後，再跟著佈景一同現身，不過因為想說都調整這麼久了，總有一股衝動想要直接給他啟用，所以在昨天晚上半夜12點多，趁著網站人數不多的時候，默默地上架了。一上架就發現許多小問題，因為本機電腦環境和實際運作環境的東西有差，所以修正這一些小問題又花了不少的時間。會出問題的主要是在側邊欄模組，因為我本機電腦環境和網站上落差蠻大的Orz。

版面寬度990

就從版面框框先講起，如果大家有注意到，這次的版面「好像」比較寬一點？沒錯！因為版面的寬度從原本的960調整到990，想說現在的螢幕都逐漸走向寬螢幕1024×768的解析度使用者應該越來越少，所以就偷偷調整了。雖然我每次都跟人家講說網頁寬度請保持在960px~980px之間，不過考慮到一些狀況，所以這次就真的給他改下去了，因為有好幾次都想說將舊版改寬，但中間都遇到很多突發狀況。

這回的版面除了調寬之外，側邊欄也縮小，上一版的imXD則是將側邊欄放寬到快300px，這回側邊欄僅有250px而已，這樣改主要是想讓內容寬度可以更寬一些，因為內容區域是網站的一個主體，如果小小窄窄的，閱讀起來不太舒服、也會感受到一些小小的壓力。以前曾經換成三欄式，結果一個月就下架了。後來接手的就是目前新佈景imXD5架構的雛型了…(就是傳說中的inove佈景，相信大家都不陌生。)

〈▲以HTML5+CSS3為架構：imXD5。〉

HTML5的語意架構

前一版不是叫做imXD，這版怎麼會突然跳成imXD5呢？因為這次的版面使用HTML5的架構去寫的主題，如同前面提到，HTML5是目前最新的網頁架構，強調「語意」標籤，用這個架構主要是為了搜尋引擎最優化，因為HTML5語意的關係，對於搜尋引擎來講等於說是直接告訴他網頁哪個地方權重較高，直接把重點給搜尋引擎，另外網頁程式碼也會比HTML4更好解讀。目前WordPress的預設佈景twentyeleven就是使用HTML5的架構，你發現了嗎？

〈▲HTML5特色：語意標籤。〉

內文側邊社群分享按鈕

目前還算是社群服務還是很夯的時代，所以不得不把社群分享按鈕弄得明顯一點。如果螢幕寬度夠寬的畫，相信會在內文頁面的左方看到一排分享按鈕。有Google+1、Facebook以及Twitter的分享按鈕。這樣的做法是上次在硬是要學的網站上看到，感覺不錯就學回來了(國外網站也蠻多這樣做的)。

〈▲看到這邊，別忘了看看左邊，順手按個讚！〉

網頁上方社群分享按鈕

以往，香腸炒魷魚的網站右上角都空空的(因為沒有人買廣告阿~笑)，本來想要把搜尋放到那邊去，但總覺得怪怪的，剛好想起免費資源網路社群網站右上角是放社群分享按鈕，再加Google+1說他們會影響到一些搜尋權重(個人化搜尋)，如法炮製的把按鈕搬到右上角了，只是放三個按鈕還是覺得很少，又加上這一陣子的RSS訂閱數都沒有衝高，所以又擺了個RSS圖示上去，希望以起大家的注意。

〈▲如果你還沒按讚、推、+1的人，別忘了幫我們按一下唷！〉

側邊社群追蹤數字

放一個Facebook粉絲框剛剛好，如果再放上一個Plurk框、Google+框，感覺整排側邊欄就太長了，而且越下面大家越容易沒看到，又加上自己想要看到統計的數字，所以找了一些資料就把功能實做出來了，至於怎麼做，相信大家Google一下國外網站，可以找到不少資料(不過有些寫法比較舊，要自己改寫一下)。在處理的過程中，唯獨噗浪不知道怎麼弄API，所以就直接擺上文字了Orz…。

〈▲歡迎訂閱、追蹤我們！〉

網頁自適應性CSS3 Media Queries

最近mrmu也將自己網站改成HTML5的架構，其中布景也使用了一些CSS3的效果，如果大家有注意到他的網站，最明顯的就是使用CSS3網頁自適應性(CSS3 Media Queries)，因此香腸就把這個做法移到內文區的分享按鈕，解決在瀏覽器寬度太窄的況下，還是會有按鈕顯示。或許大家有個小疑問，為什麼要這麼麻煩？因為內文區擺太脫按鈕改覺很雜，所以才用這樣的方法來處理。(但IE8以下，就全露餡了)

〈▲網頁自適應性可，以讓使用者更好的體驗。〉

隨機分類推薦閱讀

這功能應該是這次花蠻多時間在處理的部分，因為這邊的作法是隨機選取五個分類然後再根據這五個分類去隨機選取五篇文章，並顯示標題、圖片與超連結。並且搭配JQuery的Tab來達成效果，簡單說應該是仿Yahoo首頁新聞的作法。因為我同學Mavis想要在文章內使用這功能，所以我就先拿自己網站開刀測試看看了，如果OK到時候再幫他裝上，她主要是Photoshop教學網站，使用這種方式推薦閱讀，會更有看頭。

〈▲圖像的推薦閱讀，可以更吸引訪客。〉

網站導航麵包屑(Breadcrumb)

以前曾經在Sofreev1.1和LowYA內加入過這樣的導航功能，但後來我也不知道為什麼拿掉了？或許是因為感覺放在那邊跟標題卡在一起感覺很怪吧？這回心血來潮又將按鈕放回去了，並且將顏色調淡、標題有多一些間距，感覺不會搶走標題的風采。補充一下，這個功能正確的名稱是麵包屑(Breadcrumb)，對於搜尋引擎或是訪客，都是一個很好的東西，可以清楚地告知訪客目前位置。

〈▲看到哪邊，都不會迷失方向。〉

HTML5留言表單

既然網頁整體架構使用HTML5去構版，那麼就不得不用一下HTML5的標籤了，雖然WordPress本身有提醒機制，不過使用HTML5的方式去做，感覺可以潮一點。目前暫時找不到針對其他非Google Chrome的瀏覽器，美化這個提示框Orz…

〈▲減少系統驗證，省去資源耗用。〉

新版404錯誤頁面

一個網站對於404頁面的設計其實是最容易忽略的，大多數的人可能認為不重要，但是當訪客近來你的網站，如果找不到想要的資訊就會跳出，那麼我們該如何好號把握這個訪客呢？倘若訪客找不到相關資訊，肯定是關掉瀏覽器走人，這時候我們可以自訂一下404頁面，留下一些可能會吸引訪客的資訊。這回在404頁面上的設計，跳脫了之前的框框，改用虛線底線來牌版，並且顯示各分類的文章，另外下方也顯示一些文章彙整，香腸自己也可以檢視一下每個月寫了多少文章(笑)。

〈▲留住訪客最有效的方式。〉

佈景自訂選項

最後，來看一下佈景後台設置。其實最近這幾個面板，都有加入佈景後台的設計，因為這樣的功能真的很方便，不需要改程式，就可以直接將功能加到主題中了，而且如果把佈景給朋友，他們也可以輕鬆加入自己想要的東西。後台的欄位主要就是整合META優化、廣告欄位以及Facebook留言整合。比起上一版的imXD少掉許多東西，因為目前佈景沒有要釋出，所以功能就不必做太多了。(因為上一版imXD有給幾個同主機的朋友使用:卡咪龜、殺氣、小俊，所以功能較多XD)

〈▲第一次秀後台(blush)。〉

function 功能模組化

這次大多數的功能都盡量做成模組，對於程式設計師來講，一開始會比較難做，因為要考慮到傳值的問題，或者是global變數的使用，但是功能一但做到後，未來如果要改佈景，就使用function即可輕鬆轉移。如果要自訂function的話，就要善用佈景主題的functions.php，即可達到自己所需的效果。

〈▲functions.php檔案變大了〉

IE的一些小問題&總結

這次調整佈景主題只針對IE9、IE8、IE7、Firefox7、Chrome14做校正，其他瀏覽器我就沒辦法支援了。針對目前這些瀏覽器做校正，絕對是可以涵蓋90%以上的使用者，剩下的使用者就請你們轉換一下了。至於蘋果的Safari我也沒去校正，因為Chrome和他同核心，所以網頁樣式不會相差太大的。那IE6呢？我已經把他丟到路邊的垃圾桶了。這回來開IETester都懶…(因為IE9的相容模式可以向下相容到IE7)

IE7其實也不太想調整了，因為她是跟著失敗的作業系統一同現身的，不過還是有很多人使用，所以只好默默地支援了。在改版的過程中遇到了關於IE7的問題，常見的是Google +1按鈕在IE7無法出現，因此版面配置上為了避免排版不好看，Google+1按鈕一定要放在最前面或最後面，不然放中間到時候會變成一個空洞。在IE8的狀況下，Google連結組廣告會被遮蓋(這應該是Google本身的問題)。

整體來講，很多東西都是由前一版imXD來改的，因為目前香腸自己對於這樣的版面算是很滿意，那麼另外一位站長魷魚絲呢？他好像一年沒發文了？(聽說他最近很忙，香腸也很少看見他上線)。既然香腸說OK，魷魚絲應該也OK啦(笑)。目前可能還有一些小Bug，如果大家有發現，別忘了回報一下唷！

這個新版，希望大家會喜歡 :D