宏亿道子

首页 / WP视点 / wordpress移动端自动切换主题代码

wordpress移动端自动切换主题代码

前言

H5持续火热,随着微信公众号、朋友圈、微博等途径可导入大量阅读量,博客网站移动端自适应势在必行。 下面介绍基于wordpress的网站如何实现移动化。

响应式布局

响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。 优点:一套代码,能够适应不同分辨率设备访问,易于维护。 缺点:受限于同一套HTML结构,导致很多差异化布局不好进行扩展,对于小屏设备往往采用隐藏方式减少内容。 自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。 响应式网站展示:http://mediaqueri.es/http://flatdesignluv.com/ 响应式布局的实现方式为通过CSS3的媒体查询Media Queries,针对不同分辨率做断点,使用不同的样式。 常用断点查询:屏幕尺寸大全UI设计规范

wp插件

安装合适的wp主题插件 优点:使用简单,安装插件,再选择合适的移动端主题即可,无需开发。 缺点:受限于主题,很难再做自定义扩展 常见的移动主题插件如下,其中WPTouch插件非常强大

  • WPtouch
  • WordPress Mobile Pack
  • MobilePress
  • Any Mobile Theme Switcher
  • WordPress Mobile Themes
  • Device Theme Switcher

差异处理

通过读取用户访问的Agent,判断系统及分辨率,再做不同的展现及处理。一般使用wp提供的wp_is_mobile函数来判断是不是移动端访问,来加载不同的HTML段、CSS或JS。 优点:通过判断设备,在一套代码中做差异化处理,达到适应设备显示的目的。 缺点:代码耦合较深,不易于维护及扩展。 从WordPress3.4版本开始,WordPress已支持wp_is_mobile函数

需要判断平板、手机、电脑等设备,请参考此文

主题切换代码

亿道子V2.0的主题,使用的是响应式的实现方案,针对不同的设备,设置了很多断点,缩小浏览器窗口会自适应。但是发现其实sidebar侧边栏在移动端是不需要显示的,所以隐藏不显示。但是侧边栏代码的加载及渲染都很冗余,嵌入的iframe还是得加载,浪费额外的请求及渲染。 对于wp插件,不是很符合轩枫阁自定义页面的需求。而研究了不少插件,有的可以指定本地主题,但是担心会带来性能问题。 而对于差异化处理,宏亿道子亿端页面与PC端页面打算相分离,二者会重新设计。通过wp_is_mobile函数来区分的话,会带来很多的if else,导致代码阅读性差及可维护性差的问题。 最后发现其实可以通过10行自定义插件代码即可解决以上问题。 优点:配置简单,移动端与PC端代码相分离,提高开发自由度。 缺点:需要编程。 在\wp-content\plugins目录新建mobile_switch_theme.php文件(或放入新文件夹中),可以在代码中指定主题文件名,最后再wp后台启用插件即可。

 

参考

响应式网页设计 6 个 WordPress 手机主题调度插件

14/373
16/373

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]