移動設(shè)備越來越流行了，不少網(wǎng)站中，來自移動端（包括手機(jī)瀏覽器，微信，移動應(yīng)用等）的瀏覽量已經(jīng)遠(yuǎn)超過桌面端了。更有甚者，有些網(wǎng)站直接省略了桌面版的網(wǎng)站，只做一個移動版。今天我們就來討論一下WordPress手機(jī)主題（移動主題）的開發(fā)方法。
首先，選擇一個移動版的前端框架
因?yàn)橐苿釉O(shè)備的多樣化，如果我們直接從頭開始制作WordPress手機(jī)主題，需要適配不同分辨率，不同屏幕大小的設(shè)備，工作量無疑是非常大的。隨著前端開發(fā)的快速發(fā)展，我們已經(jīng)有很多比較成熟的前端框架可以使用了。
今天我們以BootStrap團(tuán)隊(duì)出品的移動前端框架Ratchet為例，為大家介紹一下WordPress手機(jī)主題的開發(fā)方法。
根據(jù)效果圖做出html頁面
在開始WordPress主題開發(fā)之前，我們肯定已經(jīng)拿到了設(shè)計(jì)師的效果圖。根據(jù)效果圖，使用Ratchet相應(yīng)的組件構(gòu)建html頁面。Ratchet默認(rèn)提供了安卓和ios皮膚，大多數(shù)情況下，默認(rèn)皮膚是滿足不了我們的要求的，我們需要根據(jù)設(shè)計(jì)師給到我們的配色和設(shè)計(jì)模式，開發(fā)一個新的皮膚。Ratchet是基于Less開發(fā)的，提供了非常豐富的變量，我們直接修改變量值即可定制一個大致符合我們需求的皮膚。受篇幅限制，這一步就不再多說了。
使用Underscore主題框架
做好了HTML，我們需要把HTML做成WordPress模板，因?yàn)橛鞋F(xiàn)成的WordPress框架了，我們直接選擇一個自己喜歡的WordPress框架，把HTML和框架結(jié)合起來就可以了，本文中我們以Underscore主題框架為例。把css和js引入到WordPress主題中，Underscore的css和js是在functions.php中定義的，我們可以直接修改掉就可以了。
復(fù)制HTML，替換其中內(nèi)容為WordPress文章字段
比如列表頁面，新建一個自定義查詢，把WordPress主題循環(huán)放入相應(yīng)的html即可，如下圖，我們做好的HTML頁面中的代碼是這樣的。
我們只需要把其中相應(yīng)的圖片、鏈接和文字替換為WordPress調(diào)取出來的內(nèi)容即可，這一步是最重要的，也是很多WordPress新手感覺最困難的一步，下面是調(diào)用后的代碼。
前后對比一下，HTML結(jié)構(gòu)都是一樣的，主要的區(qū)別就是把寫死的內(nèi)容替換成了從WordPress數(shù)據(jù)庫中中調(diào)出來的內(nèi)容。
本文介紹的是使用ratchet移動前端框架制作WordPress移動主題的大致思路，當(dāng)然，你也可以使用其他前端框架來制作WordPress移動主題，或者，如果你是前端高手，也可以不使用前端框架來開發(fā)主體，無論是否使用前端框架，開發(fā)WordPress手機(jī)移動主題的思路都是一樣的。如果你有更好的想法或者不同見解，歡迎在評論中交流。
