WordPress判断PC端和移动端并显示不同内容 – WordPress教程

2017年3月24日WordPress教程评论392592字阅读8分38秒阅读模式

判断用户PC电脑端和手机移动端,不同客户端显示不同的内容是WordPress必不可少的功能,通过php通过http_user_agent即可判断用户的客户端,王小优就分享一下PC电脑端和移动手机端显示不同内容的方法:文章源自王小优-https://www.wangxiaoyou.com/4344.html

一、functions.php文件中加入代码

找到WordPress当前主题中的functions.php文件,在functions.php文件中插入以下代码:文章源自王小优-https://www.wangxiaoyou.com/4344.html

  1. // 判断PC端
  2. function is_pc() {
  3.         $user_agent = $_SERVER['HTTP_USER_AGENT'];
  4.         $mobile_browser = Array(
  5.                 "mqqbrowser"//手机QQ浏览器
  6.                 "opera mobi"//手机opera
  7.                 "juc","iuc",//uc浏览器
  8.                 "fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
  9.                 "iemobile""windows ce",//windows phone
  10.                 "240x320","480x640","acer","android","anywhereyougo.com","asus","audio","blackberry","blazer","coolpad" ,"dopod""etouch""hitachi","htc","huawei""jbrowser""lenovo","lg","lg-","lge-","lge""mobi","moto","nokia","phone","samsung","sony","symbian","tablet","tianyu","wap","xda","xde","zte"
  11.         );
  12.         $is_mobile = ture;
  13.         foreach ($mobile_browser as $device) {
  14.                 if (stristr($user_agent$device)) {
  15.                         $is_mobile = false;
  16.                         break;
  17.                 }
  18.         }
  19.         return $is_mobile;
  20. }
  21. // 判断手机端
  22. function is_mobile() {
  23.         $user_agent = $_SERVER['HTTP_USER_AGENT'];
  24.         $mobile_browser = Array(
  25.                 "mqqbrowser"//手机QQ浏览器
  26.                 "opera mobi"//手机opera
  27.                 "juc","iuc",//uc浏览器
  28.                 "fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
  29.                 "iemobile""windows ce",//windows phone
  30.                 "240x320","480x640","acer","android","anywhereyougo.com","asus","audio","blackberry","blazer","coolpad" ,"dopod""etouch""hitachi","htc","huawei""jbrowser""lenovo","lg","lg-","lge-","lge""mobi","moto","nokia","phone","samsung","sony","symbian","tablet","tianyu","wap","xda","xde","zte"
  31.         );
  32.         $is_mobile = false;
  33.         foreach ($mobile_browser as $device) {
  34.                 if (stristr($user_agent$device)) {
  35.                         $is_mobile = ture;
  36.                         break;
  37.                 }
  38.         }
  39.         return $is_mobile;
  40. }

二、WordPress模板中调用

在WordPress模板中调用,如index.php、footer.php、single.php等,调用方式:文章源自王小优-https://www.wangxiaoyou.com/4344.html

1、在PC电脑端显示,移动端不显示文章源自王小优-https://www.wangxiaoyou.com/4344.html

  1. <?php if (is_pc() ): ?>
  2.     <div>
  3.     <p>我在PC电脑端显示</p>
  4.     </div>
  5. <?php endif ;?>

2、在移动端显示,PC端不显示文章源自王小优-https://www.wangxiaoyou.com/4344.html

  1. <?php if (is_mobile() ): ?>
  2.     <div>
  3.     <p>我在移动端显示,不在PC端显示</p>
  4.     </div>
  5. <?php endif ;?>

综上,第一步在当前主题中的functions.php文件中插入代码,然后再WordPress主题模板中调用即可。文章源自王小优-https://www.wangxiaoyou.com/4344.html

总结

该代码的主要解决的问题自动判断用户的客户端,然后站长根据不同的客户端来展示不同的内容。文章源自王小优-https://www.wangxiaoyou.com/4344.html

使用is_pc()这段代码,该代码会自动判断访客客户端是否是PC,如果是PC则显示,不是PC则不显示。文章源自王小优-https://www.wangxiaoyou.com/4344.html

使用is_mobile()这段代码,该代码会自动判断访客客户端是否是移动端,如果是移动端则显示,不是移动端则不显示。文章源自王小优-https://www.wangxiaoyou.com/4344.html

  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
王小优
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: