[教學]WordPress手機版佈景開發指南

發表時間： 2012-12-28

使用智慧型手機上網的人越來越多，倘若網站沒有手機版佈景或是樣式，那麼對於使用行動裝置的朋友來講，或許不是太方便，因為手機版的畫面解析度、尺寸與一般PC電腦不同，若直接套用瀏覽，體驗效果並不好。而WordPress在手機佈景主題(WordPress Mobile Themes)其實有很多外掛可以相容，但是若你不喜歡別人的樣式，那可以試著自己來做做看。

想要開發WordPress手機版佈景主題，首先你必須了解WordPress整體版型架構與一些函數該如何使用，若這點不太清楚，可能開發上會有點麻煩。不過大家不用太擔心，因為手機版的佈景主題開發，主要針對幾個頁面就可以了，而且開發上並不會太困難，因為在手機版上實在是可以捨棄掉太多東西了，製作手機版的重點就是要「瀏覽舒適」。

最近香腸才自己改完手機版佈景主題，雖然畫面上並沒有經過什麼特別設計，但主要還是讓WordPress網頁內容可以在手機有一個比較適合的大小，讓訪客透過行動裝置瀏覽器還可以有較相應的尺寸與排版讓他可以一目了然，若沒有特別作手機版、行動版的佈景主題，那瀏覽上則須一直將網頁放大才可以看到文章內容，瀏覽上一整個很辛苦。

現在讓我們進入WordPress手機版佈景開發教學吧！不過在此要提醒一下大家，這部分的教學其實只是給大家一個方向，至於詳細的語法香腸無法完整的在文章內說明，因此本篇文章主要是設定在對WordPrrss佈景主題已經有開發過、改過的朋友，算是進階一點的使用者瀏覽後通常就知道該怎麼開發手機版佈景了，不過在此同時，我也希望讓沒開發過佈景主題的朋友，對於手機版有一個基礎概念。

教學目錄

手機版佈景需要哪些頁面？

手機版寬度

文章列表呈現樣式

內文版面

手機版側邊欄、頁尾

不要放置留言區

網站頂部該放些什麼？

需要做HTML5、SEO優化嗎？

放Google AdSense廣告賺錢

安裝手機版外掛

文章目錄

一、手機版佈景需要哪些頁面？
二、手機版寬度(全站設定)
三、文章列表呈現樣式(首頁、彙整頁、分類頁、標籤頁)
四、內文版面
五、手機版側邊欄、頁尾
六、不要放置留言區
七、網站頂部該放些什麼？
八、需要做HTML5、SEO優化嗎？
九、放Google AdSense廣告賺錢
十、安裝手機版外掛

一、手機版佈景需要哪些頁面？

在WordPress佈景主題題中，一般我們需要使用到的檔案大概15個上下，不過我們製作手機版，香腸建議可以精簡到12個(檔案+資料夾)，以方便手機佈景開發，這些檔案如下：

images目錄：圖片目錄
404.php：錯誤頁面
archive.php：文章彙整、分類頁、標籤頁
footer.php：網站頁尾
functions.php：自訂函式庫
header.php：網站頂部
index.php：首頁
page.php：網誌分頁
screenshot.png：佈景主題縮圖
sidebar.php：網站側邊欄，不過手機版我們要放分類和分頁清單。
single.php：內文
style.css：樣式表

如果你想要精簡，其實可以少到剩下五個檔案，但是不建議，因為這樣你必須在index.php內做關於分類、標籤頁、內文頁、文章彙整頁等判斷，比較麻煩。(不建議)

style.css：網頁樣式
index.php ：首頁、分類頁、標籤頁、內文頁、文章彙整頁
page.php：網誌分頁
header.php：網頁頂部
footer.php：網頁底部

二、手機版寬度(全站設定)

更動樣式：style.css
更動版型：index.php、archive.php、footer.php、header.php、page.php、sidebar.php、single.php

關於佈景主題的詳細寫法與程式碼不再本篇討論範圍，寫法基本上跟一般的佈景是一樣的做法，只是在呈現樣式上我們需要注意。在「版面整體寬度」，建議設定100%，這樣在行動裝置上，可以依照不同的尺寸有不一樣的相容性，例如我們調整為手機板會看到適合手機板的樣式。

如果調整成平板之類的，則可以看到以下畫面，整體畫面會拉寬，不會因為本身是手機板，而當平板存取的時候還是小框框。這應該是有點自適應網頁(Responsive Web Design)的概念。

[教學]WordPress手機版佈景開發指南

三、文章列表呈現樣式(首頁、彙整頁、分類頁、標籤頁)

更動樣式：style.css
更動版型：index.php、archive.php

因為手機、平板等行動裝置因為畫面比PC桌上型電腦小，所以在文章清單的呈現上，最好是清楚明瞭，以列表式為佳，而且不要有內容摘要，最好是一張圖搭配標題與發表時間，抓出文章圖片香腸是使用「timthumb」而非用內建的特色圖片，當然您也可以使用特色圖片。至於頁碼功能可以直接套用桌面版或是變成大按鈕的設計。

這樣的呈現方式也可以針對文章彙整頁面、分類頁、標籤頁套用相同設計，而在WordPress佈景主題結構中，如果沒有category.php、tag.php，版面的設定將轉直接套用archive.php的樣版，因為我們要做到呈現上都相同，所以不必多去定義分類或是標籤頁，直接在archive.php彙整頁面內加入即可。

四、內文版面

更動樣式：style.css
更動版型：single.php

內文版面的設計，我們也是要做成縮放的(前面已經提到)，這樣在平板或是手機都可以有自適應網頁的效果。在內文的下方(如右圖)，您可以加入社群分享按鈕，例如Facebook粉絲團、Line分享按鈕等等，但在香腸建議各家的按鈕都可以不要裝，但是一定要安裝Line按鈕。

原因在於如果你放了各式各樣的社群按鈕，例如Facebook讚按鈕、Plurk、Twitter、Google+等等，但是這些大部分都有相應的APP可以瀏覽，一般使用者比較少會透過手機瀏覽器登入這些服務，那麼要按個讚或是推特一下，不就要額外登入，換句話說，會透過這些按鈕分享文章的人會很少。

不過Line按鈕是針對手機去做設計的，簡單說他只有在手機上發揮效益，反倒是在電腦版上面此按鈕完全無用，因此香腸會建議你安裝Line按鈕在文章的下方，方便訪客看了覺得不錯、想分享，可以很快地透過Line按鈕連結Line APP 做分享。在Line按鈕的下方，我們可以放置文章所屬分類與發表時間，至於標籤因為放了會很雜，基本上是不建議。

[教學]WordPress手機版佈景開發指南

五、手機版側邊欄、頁尾

更動樣式：style.css
更動版型：sidebar.php、footer.php

因為手機版的畫面小，其實在手機版上根本沒有什麼側邊欄可言，反倒是將側邊欄排到文章清單下方、頁尾上方。在手機版上要做側邊欄，建議你只要在裡面放上「分類」、「頁面」連結，能的話最好搭配縮放的JQuery特效，讓需要的訪客自行點開查看有哪些分類。

在文章頁尾，建議放個「切換為桌面版」以及「回頂端」按鈕，方便使用者快速回到最上端以及如果覺得看手機版畫面太小，可以切換為桌面版查看較大的版本。

[教學]WordPress手機版佈景開發指南

六、不要放置留言區

更動樣式：style.css
更動版型：single.php

沒錯，你沒有看錯，內文區的留言框不見了？因為手機版本身畫面就不大，手機輸入也不比電腦版來的好用，所以我們將留言區拿掉了，針對手機使用者的設計就是「純瀏覽」資訊，需要進一步的討論，使用者可以點選「網頁版」切換回去即可留言。

[教學]WordPress手機版佈景開發指南

七、網站頂部該放些什麼？

更動樣式：style.css
更動版型：header.php

在網頁的頂部，一般我們會放置RSS、Ping/trackback等等，在<head>標籤中我們只需要放置：網站標題、網頁編碼、viewport、樣式表、RSS、Google分析追蹤碼、JQuery(有使用才放)，其餘皆可以省略不放，SEO優化那些可以不必擺在這個地方。

[教學]WordPress手機版佈景開發指南

八、需要做HTML5、SEO優化嗎？

關於WordPress手機版佈景主題是否需要使用HTML5或者是SEO優化？基本上，這一部分是可以省略的，如果你要優化當然是最好的，將網頁優化到最佳狀態這是建議的。但是若你沒有多餘的時間，在手機版上面基本上我們只要讓他可以正常的瀏覽、不要出錯、速度快即可，其他多餘的東西可以不必。

因為手機版的判斷是透過User Agent，所以在搜尋上其實他們找的還是一般的網頁PC版，因為只要User Agent 符合手機版、平板才會切換到手機版佈景，其他一律顯示桌面版佈景，所以使用者可以不必擔心手機版要不要HTML5或是做好SEO，除非你真的很閒或者是網頁有使用HTML5特效才去做HTML5和SEO，不然以最快最方便的寫法並符合W3C標準就可以了。