上周花了点时间学习研究 WordPress 的手机端访问，准确地说，是移动端的访问。其中涉及到不少新的知识，包括 HTML5、响应式设计、自适应框架 Bootstrap 等等，这些较新前沿的技术真的应该花点时间好好学习一下，否则就会落后于这个移动化的时代。

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

　　响应式网站设计（Responsive Web design）的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
优点：一套代码，能够适应不同分辨率设备访问，易于维护。
缺点：受限于同一套HTML结构，导致很多差异化布局不好进行扩展，对于小屏设备往往采用隐藏方式减少内容。

　　自适应框架如 Bootstrap、UIKit、Adobe Edge Inspect、Foundation、Responsablecss 等。响应式布局的实现方式为通过 CSS3 的媒体查询 Media Queries，针对不同分辨率做断点，使用不同的样式。

<!-- 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>

WordPress 插件

安装合适的 WordPress 主题插件，优缺点如下。
优点：使用简单，安装插件，再选择合适的移动端主题即可，无需开发。
缺点：受限于主题，很难再做自定义扩展。
常见的移动主题插件如下，其中 WPTouch 插件非常强大：
WPtouch
WordPress Mobile Pack
MobilePress
Any Mobile Theme Switcher
WordPress Mobile Themes
Device Theme Switcher

差异处理

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

<?php if ( wp_is_mobile() ){
    echo '正在使用移动设备浏览';
}else{
    echo '目前使用的不是移动设备';
} ?>

主题切换代码

在 \wp-content\plugins 目录新建 mobile_switch_theme.php 文件（或放入新文件夹中），可以在代码中指定主题文件名，最后再 WordPress 后台启用插件即可。

<?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');
?>