WordPress 移动端主题自动切换(插件+代码)

  上周花了点时间学习研究 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="https://www.hack520.com/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-contentplugins 目录新建 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');
?>;

人已赞赏
WordPress教程

WordPress ID 重排代码文件 – 打开即可重新排列,亲测无误!

2020-12-23 22:45:20

WordPress教程

WordPress 插入表格最简单的方法,无需插件!

2020-12-28 10:45:07

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索