前言
H5持续火热，随着微信公众号、朋友圈、微博等途径可导入大量阅读量，博客网站移动端自适应势在必行。
下面介绍基于wordpress的网站如何实现移动化。
响应式布局
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
优点：一套代码，能够适应不同分辨率设备访问，易于维护。
缺点：受限于同一套HTML结构，导致很多差异化布局不好进行扩展，对于小屏设备往往采用隐藏方式减少内容。
自适应框架如Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss等。
响应式网站展示：http://mediaqueri.es/、http://flatdesignluv.com/
响应式布局的实现方式为通过CSS3的媒体查询Media Queries，针对不同分辨率做断点，使用不同的样式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a stylesheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } @media screen and (min-width:481px) and (max-width:768px){ .sidebar{display: none;} } // 2x图 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (min-resolution:240dpi){ .logo{ background: url(logo@2x.png); } } </style> |
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函数
|
1 2 3 4 5 |
<?php if ( wp_is_mobile() ){ echo '正在使用移动设备浏览'; }else{ echo '目前使用的不是移动设备'; } ?> |
需要判断平板、手机、电脑等设备，请参考此文。
主题切换代码
轩枫阁V2.0的主题，使用的是响应式的实现方案，针对不同的设备，设置了很多断点，缩小浏览器窗口会自适应。但是发现其实sidebar侧边栏在移动端是不需要显示的，所以隐藏不显示。但是侧边栏代码的加载及渲染都很冗余，嵌入的iframe还是得加载，浪费额外的请求及渲染。
对于wp插件，不是很符合轩枫阁自定义页面的需求。而研究了不少插件，有的可以指定本地主题，但是担心会带来性能问题。
而对于差异化处理，轩枫阁移动端页面与PC端页面打算相分离，二者会重新设计。通过wp_is_mobile函数来区分的话，会带来很多的if else，导致代码阅读性差及可维护性差的问题。
最后发现其实可以通过10行自定义插件代码即可解决以上问题。
优点：配置简单，移动端与PC端代码相分离，提高开发自由度。
缺点：需要编程。
在\wp-content\plugins目录新建mobile_switch_theme.php文件（或放入新文件夹中），可以在代码中指定主题文件名，最后再wp后台启用插件即可。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php /*Plugin Name: mobile_switch_theme*/ function mobile_switch_theme($theme){ if( wp_is_mobile() ){ $theme = 'lee3.0-m'; //theme为主题名 } return $theme; } add_filter('template', 'mobile_switch_theme'); add_filter('stylesheet', 'mobile_switch_theme'); ?> |
主题切换代码一直在用，但是现在用了CDN后发现PC和移动出现乱串的问题，已经无法正确判断应该用什么模板了，不知道博主有没有办法解决？
谢谢先了。
求带，收徒弟吗？
请问代码高亮插件用的是什么呢？行号显示功能怎么开启？
这个插件 Crayon Syntax Highlighter
对pc和移动端差异大的来说，这种方法实在是赞，鼓掌！
站长辛苦了，谢谢分享，欢迎回访：六合宝典http://1348567.com
求带
是不是很久没有人更新了，怎么人都没有呢。
兄弟啊，每天都有更新不。