在網站剛建了沒多久之後,我就開放 rpc-xml,並用官方的 WordPress 客戶端瀏覽網站,結果那開啟速度慢得嚇人啊!然後用 mini opera 開啟網站,可憐我的流量!於是便有了為手機等移動裝置做一個移動版介面的想法。
終於選了一個最佳的方案,用了 3 天的時間,為網站做了一個移動版介面。
雖然這個移動版介面早在 2 月中旬便做好了,但一直都沒有對它進行介紹,趁著今天總算大概把 「塗鴉大賽」 活動籌備好了,果斷跟大家分享製作 WordPress 移動版的方法。
為 WordPress 製作移動版主要有三種方案,都是透過外掛來讓網站識別使用者是否透過移動裝置瀏覽網站,然後給使用者載入移動介面。第一種具體的原理是直接把網站轉為 wap 版,第二種則是為網站套用另一個主題。在這裡我推薦使用第二種方法,第一種方法把網站轉為 wap 版雖然方便,但是直接轉的網站 UI 實在不是那麼的好看,只是純文字,加上最簡單的至上而下排版,而且幾乎沒有任何讓我們進行開發的地方。而第二種則可以讓我們自己重新做一個 UI 面積小,而且與電腦版介面搭配的移動版介面。經過我用 Android,諾基亞 (Symbian),索愛 (A200)3 個操作平臺和作業系統測試過後均能正確識別,載入移動版介面。
下面先簡單介紹製作移動版本的主角——WordPress Mobile Pack
WordPress Mobile Pack 會自動識別使用者是透過何種瀏覽器瀏覽 WordPress 站點,能在 WordPress2.5 或以上版本中使用。如果是用移動裝置上的瀏覽器瀏覽,則會自動給使用者載入移動介面,這個移動介面可以是用 WordPress Mobile Pack 自帶的主題 (4 鍾顏色),也可以用自己製作的主題。如果你使用的是外掛自帶的主題,那麼在後臺—外觀—WordPress Mobile Pack(手機主題) 裡勾選第一個選項 (啟用諾基亞模板),則可以為諾基亞的瀏覽者提供更多的介面最佳化,同時該選項也支援為基於 WebKit 的移動瀏覽器提供豐富的主題,如蘋果的 iPhone 和 Palm Pre 。當然為了更好地配合電腦版主題,我還是使用自己製作的主題,為了更好地適合移動裝置瀏覽,這次的主題以簡潔,體積小為設計理念,能不用的功能就不用,能用 css background 的就不用圖片,loop 、 header 和配色提取自一個模仿 Blueberry 的官方移動版主題,然後經過 3 天的努力,把 sidebar 和 4 個頁面模板做好了!其中日誌列表頁面與電腦版的大不相同,沒有使用 loop 而直接使用 wp_get_archives 呼叫日誌列表,然後用 css 加以控制。留言板頁面也是直接使用 wp_list_comments 和原生的巢狀回覆,因此在各種移動裝置上都有很高的外觀與功能相容性。
然後就是把自己做的主題上傳到 WordPress 的主題目錄,在後臺—外觀—WordPress Mobile Pack(手機主題) 裡選擇自己的主題。順帶把最後一個選項也勾選了,它會在你的電腦版和移動版介面的底部里加入一個連結,點選該連結可以把切換為另一種介面,防止有部分移動裝置無法自動切換為移動版介面時可以讓使用者手動切換。
這裡提供一個 WordPress Mobile Pack 的漢化補丁,雖然是 1.2.2 版的漢化補丁,但測試後在該外掛的最新版本 1.2.4 上也能正常使用。
WordPress Mobile Pack 漢化補丁
經過多次的區域性修改,就有了現在大家看到的移動版介面:

用資料說話是最有力的,馬上用手機進行瀏覽測試:
移動裝置:N85
瀏覽器:UC
統計方式:UC 流量統計
開啟 UC,檢視流量,顯示本次流量為 2.33 K(說明 UC 開啟時會自動聯網並載入一些資料) 。
然後直接開啟我的網站,完全載入後再檢視本次流量:9.62 K,即開啟移動版的網站消耗了 7.29 K 流量。
再用網站底部的連結手動切換為電腦版主題,檢視本次流量:51.67K,即開啟電腦版主題消耗了 42.05K 流量。

經過測試,瀏覽移動版介面只需要電腦版 1/6 的流量。可見為 WordPress 制定移動版本的確能大大節省瀏覽者的手機流量 (話說哥昨晚超流量了,不知不覺被扣掉 GPRS 費,結果早上起來十分悲劇的發現手機已經停機了,10086 果然是世界上最關心我話費的人) 。當然移動版介面的載入速度也是飛快的!
當初玩 WordPress,就是希望能拋開各種繁瑣的統計,追求簡單的生活!簡簡單單的記錄下每一個文字。也正像這個移動版主題那樣簡潔、快速!所以只從移動版介面投入使用後,幾乎每天晚上睡前總會習慣性地用手機瀏覽一下網站。
§
編輯補充:推薦十個 WordPress 外掛,可以讓你網站更便於手機訪問。
1. WordPress Mobile Edition
由 Crowd Favorite 開發,這個外掛對於移動裝置訪問者提供一個簡潔的潔面。當使用者使用手機瀏覽器訪問你的網站的時候,它能自動檢測瀏覽器,並載入網站的手機版。你可以在設定頁編輯移動瀏覽器的列表。這個外掛可以對於特定的瀏覽器或裝置載入指定的主題,比如 iPhone, Windows Mobile, Opera Mini 或者其他的手機網路瀏覽器。
2. WordPressMobile.mobi
最熱門的 WordPress 外掛之一,已被下載數千次。這個 WordPress 外掛讓你部落格對手機更加友好,減少在手機瀏覽器中的載入時間,配置頁面更加適合手機。
3. WordPress Mobile Pack
有一個 WordPress 手機瀏覽器外掛。它能識別手機、重排版面並支援掛件。由於具有了手機識別、版面重排的功能,它可以自動調整圖片大小,分割文章為多個頁面,因此你的網站在任何移動手機上都會表現很好。他有移動管理面板,可以輕鬆進行管理。移動廣告掛件允許在網頁的手機版中顯示手機廣告。
4. MobilePress
你可以設定這個外掛對特定的裝置模式或者手機瀏覽器顯示指定的主題,比如 iPhone, Opera Mini 等,這樣你的部落格外觀更適合這些裝置。這個外掛也允許 WordPress 主題開發者開發自己主題的移動版本。
5. Mobile Admin
這個 WordPress 手機外掛允許使用者透過手機對管理後臺進行友好的訪問。這個外掛轉為 iPhone 和 iPod Touch 裝置開發,在基本功能上也支援其他的瀏覽器。 Mobile Admin 支援 WordPress 管理控制檯的大多數功能,比如編輯文章、自動儲存、標籤、稽核評論等等。
6. Mobilize
這個 WordPress 外掛一旦安裝,會自動檢測任何訪問你的網站的移動裝置,並重定向到 Mippin 伺服器。 Mippin 將會重新組織你的頁面內容來適應手機的型號。比如說,如果你的網站有土坡,Mippin 就會調整圖片大小適應手機螢幕,影片會轉換為 3gp 格式,因此使用者會獲得較好的使用體驗,並樂於訪問你的網站。
7. WPhone Admin Plug-in
這個外掛允許使用移動瀏覽器來管理 WordPress 部落格。他有兩個移動管理介面,一個適合 iPhone/iPod Touch 或者其他支援 JavaScript 和 CSS AJAC 以及側滑選單的裝置;另一個精簡版適用於不支援 JavaScript 裝置的手機。他在瀏覽器中可以在全功能版本和精簡版之間進行自動切換。
8. Mowser
Mowser 是個可以讓你的 WordPress 博
客更適合手機瀏覽器或者其他手持裝置的服務。這個外掛自動檢測使用行動電話的訪問者,並重定向到部落格經過最佳化的版本。
9. Wetomo WordPress to Mobile
Wetomo 外掛將自動檢測使用手機訪問你的網站的使用者。 Wetomo 將會扮演一個你和使用者之間的一個代理,調整你的部落格來適應使用者的手持裝置,這樣讓你的部落格在移動瀏覽器中更好看。
10. WP viewMobile
這個外掛用來讓你的部落格為手機網際網路時代做好準備。它會檢測透過手機訪問你的部落格的使用者。它可以自動傳送經過最佳化適應移動使用者的版本。他會調整部落格中圖片的尺寸來適應手機,如果手機不支援圖片就會直接移除圖片,這樣使用者訪問不會有任何問題。