wordpress移动PC端启用不同主题的实现办法以及插件推荐

77生活网 wordpress主题24,731阅读模式

如何以最简洁的代码实现移动端使用不同主题呢?虽然wordpress主题狠多都是自适应的,不过也有很多仿站的或者特殊需求的,需要移动与PC单独开来,外观基本上是两个不同的站点,其实自适应也是不一样的,不过喜欢PC端的不喜欢移动端的,反之也是如此,那么wordpress移动PC端启用不同主题的实现办法就有必要看看了,下面77生活网网搜后在轩枫阁找到了解决方法。

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

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

而对于差异化处理,移动端页面与PC端页面打算相分离,二者会重新设计。通过wp_is_mobile函数来区分的话,会带来很多的if else,导致代码阅读性差及可维护性差的问题。其实可以通过10行自定义插件代码即可解决以上问题。

优点:配置简单,移动端与PC端代码相分离,提高开发自由度。

缺点:需要编程。

通过读取用户访问的Agent,判断系统及分辨率,再做不同的展现及处理。一般使用wp提供的wp_is_mobile函数来判断是不是移动端访问,来加载不同的HTML段、CSS或JS。

优点:通过判断设备,在一套代码中做差异化处理,达到适应设备显示的目的。

缺点:代码耦合较深,不易于维护及扩展。

WordPress已支持wp_is_mobile函数

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

具体步骤如下:

首先切换主题肯定是需要用到插件的,代码不能加到当前电脑端启用的主题文件里。所以只需要再/wp-content/plugins/新建一个文件夹 比如 change 啥的 或者直接将下面代码保存为 php 文件 放到 plugins 文件夹即可,wordpress移动端自动切换主题代码

<?php
/*Plugin Name: mobile_switch_theme*/
function mobile_switch_theme($theme){
	if( wp_is_mobile() ){
	$theme = 'WPtheme'; //WPtheme 为主题名
	}
	return $theme;
}
add_filter('template', 'mobile_switch_theme');
add_filter('stylesheet', 'mobile_switch_theme');
?>

其中 WPtheme 为主题文件夹名。

wordpress移动PC端启用不同主题的wp插件推荐

安装合适的wp主题插件

优点:使用简单,安装插件,再选择合适的移动端主题即可,无需开发。

缺点:受限于主题,很难再做自定义扩展

常见的移动主题插件如下,其中WPTouch插件非常强大

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

 

继续阅读
我的微信
微信扫一扫
weinxin
我的微信
你领一次红包多一份动力
支付宝搜索7503319领取
weinxin
我的公众号
 
77生活网
评论  2  访客  1  作者  1
    • 诗梦
      诗梦 0

      插件插件 :eek:

        • 77生活网
          77生活网

          @ 诗梦 WPtouch
          WordPress Mobile Pack
          MobilePress
          Any Mobile Theme
          SwitcherWordPress Mobile Themes
          Device Theme Switcher
          这里不有么

      评论已关闭!