H5持续火热,随着微信公众号、朋友圈、微博等途径可导入大量阅读量,博客网站移动端自适应势在必行。下面介绍基于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>

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函数


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

主题切换代码

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


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