博华网络科技,点击查看详情

WordPress教程:根据访问设备使用不同的主题

现在的网页都使用了响应式布局,对于不同的设备,使用媒体查询自动适配设备,但是这对代码的编写较为复杂,有些甚至需要使用脚本来完成的功能,那么我们完全可以使用两个主题模版,来分别在移动端和PC端显示。

704Z

在WordPress我们也有相关的方法来实现这样的功能,请看下面的代码:

  1. //根据访问设备切换wordpress主题
  2. function ws_switch_theme($theme){
  3. global $is_IE;
  4. if($is_IE){
  5. preg_match(‘/MSIEs(d).0;/’, $_SERVER[‘HTTP_USER_AGENT’], $matches);
  6. $IEversion = $matches[1];
  7. if($IEversion=6){
  8. $theme=’twentyten’;
  9. }
  10. if($IEversion=7){
  11. $theme=’twentyeleven’;
  12. }
  13. if($IEversion=8){
  14. $theme=’twentytwelve’;
  15. }
  16. }
  17. if(wp_is_mobile()) {
  18. $theme=’twentytwelve’;
  19. }
  20. return $theme;
  21. }
  22. add_filter( ‘template’, ‘ws_switch_theme’ );
  23. add_filter( ‘stylesheet’, ‘ws_switch_theme’ );

你可以根据上面的代码自行修改,在何种设备访问时加载什么主题。注意主题名字一定是主题文件夹名字,而不是后台管理界面你看到的主题名字。

主题这个代码也不能直接扔进 functions.php 文件中而是要做成一个插件上传启用。

在这里我用了wp_is_mobile()这个WordPress自带函数来检测移动设备,不过这个很不准确,有很大可能不能正确判断移动设备。

不仅仅检测移动设备,而且检测桌面浏览器版本。而且你也可再发挥下,稍稍改下代码,就能实现让用户自行选择使用桌面网站还是移动网站并记住选择。

人已赞赏
wordpress教程

WordPress教程:固定静态化搜索链接

2020-5-26 12:40:31

wordpress教程

wordpress教程:nginx安装ssl证书通过https访问WordPress博客

2020-5-26 12:40:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索