WordPress 手机主题、WordPress 移动主题开发经验和框架推荐

最近越来越多的人使用移动设备访问网站，移动端的浏览量已经远超过桌面端。有些网站甚至只做移动版而不再制作桌面版。今天我们来探讨一下如何开发WordPress的移动主题。

首先，选择一个移动版的前端框架

移动设备多样化，直接从头开始制作WordPress手机主题需要适配不同设备的分辨率和屏幕大小，工作量非常大。然而，随着前端开发的发展，我们已经有很多成熟的前端框架可以使用了。

以Ratchet为例，这是一个移动前端框架，由BootStrap团队开发，我们可以选用它来制作WordPress手机主题。

根据效果图做出HTML页面

在开始WordPress主题开发之前，我们通常都会拿到设计师提供的效果图。根据效果图，我们可以使用Ratchet的相关组件来构建HTML页面。Ratchet内置安卓和iOS风格皮肤，但很多时候默认皮肤不能满足我们的需求，我们需要根据设计师的配色和设计模式自定义皮肤。Ratchet是基于Less开发的，我们可以通过修改相关变量值来定制符合我们需求的皮肤。由于篇幅限制，这里就不再详细介绍了。

使用Underscore主题框架

完成HTML页面后，我们需要把HTML转换成WordPress模板的形式。这时，我们可以选择直接使用WordPress框架，将HTML与框架结合即可，例如在本文中，我们选用了Underscore主题框架。将CSS与JS引入WordPress主题中，Underscore的CSS和JS都在functions.php文件中定义，我们可以直接修改它们来满足需求。

复制HTML，替换其中内容为WordPress文章字段

在列表页面中，我们需要新建一个自定义查询，然后将WordPress主题循环放置到相应的HTML页面中。如下图所示，我们做好的HTML页面的代码是这样的。

我们只需要将图片、链接和文字替换为WordPress调取出的内容，这一步是最重要的，也是许多WordPress新手感到困难的一步。下面是调用后的代码。

对比前后的代码，可以看到两者的HTML结构都是一样的，主要区别在于写死的内容被替换成了WordPress数据库中调用出来的内容。

本文介绍了使用ratchet移动前端框架制作WordPress移动主题的基本思路。你当然也可以选择其他前端框架来制作移动主题，或者如果你是前端高手，可以不使用前端框架来开发WordPress移动主题。无论使用哪种方式，开发WordPress手机移动主题的思路都是一样的。如果你有更好的想法或其他见解，欢迎在评论中交流。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。