WordPress 手机主题、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页面的代码是这样的。

media-list

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

media-list-wordpress

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

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

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。