在網站剛建了沒多久之後,我就開放 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

這個插件用來讓你的博客為手機互聯網時代做好準備。它會檢測通過手機訪問你的博客的用户。它可以自動發送經過優化適應移動用户的版本。他會調整博客中圖片的尺寸來適應手機,如果手機不支持圖片就會直接移除圖片,這樣用户訪問不會有任何問題。