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

WordPress21,7145

判断用户PC电脑端和手机移动端,不同客户端显示不同的内容是WordPress必不可少的功能,通过php通过http_user_agent即可判断用户的客户端,新手站长网分享PC电脑端和移动手机端显示不同内容的方法:

一:在functions.php中加入如下代码

找到你的WordPress主题中的functions.php文件,在functions.php中插入以下代码:文章源自新手站长-https://xinshouzhanzhang.com/pcmobile.html

// 判断PC端
function is_pc() {
        $user_agent = $_SERVER['HTTP_USER_AGENT'];
        $mobile_browser = Array(
                "mqqbrowser", //手机QQ浏览器
                "opera mobi", //手机opera
                "juc","iuc",//uc浏览器
                "fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
                "iemobile", "windows ce",//windows phone
                "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"
        );
        $is_mobile = ture;
        foreach ($mobile_browser as $device) {
                if (stristr($user_agent, $device)) {
                        $is_mobile = false;
                        break;
                }
        }
        return $is_mobile;
}

// 判断手机端
function is_mobile() {
        $user_agent = $_SERVER['HTTP_USER_AGENT'];
        $mobile_browser = Array(
                "mqqbrowser", //手机QQ浏览器
                "opera mobi", //手机opera
                "juc","iuc",//uc浏览器
                "fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
                "iemobile", "windows ce",//windows phone
                "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"
        );
        $is_mobile = false;
        foreach ($mobile_browser as $device) {
                if (stristr($user_agent, $device)) {
                        $is_mobile = ture;
                        break;
                }
        }
        return $is_mobile;
}

二:WordPress模板中调用

在WP模板中调用,如index.php、footer.php、single.php等,调用方式:
1、在PC电脑端显示,移动端不显示文章源自新手站长-https://xinshouzhanzhang.com/pcmobile.html

<?php if (is_pc() ): ?>
	<div>
    <p>我在PC电脑端显示</p>
	</div>
<?php endif ;?>

2、在移动端显示,PC端不显示文章源自新手站长-https://xinshouzhanzhang.com/pcmobile.html

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

综上,第一步在主题下的functions.php文件中插入代码,然后再WordPress主题模板中调用即可。文章源自新手站长-https://xinshouzhanzhang.com/pcmobile.html

总结:

该代码的主要解决的问题自动判断用户的客户端,然后站长根据不同的客户端来展示不同的内容。
使用is_pc()这段代码,该代码会自动判断访客客户端是否是PC,如果是PC则显示,不是PC则不显示;
使用is_mobile()这段代码,该代码会自动判断访客客户端是否是移动端,如果是移动端则显示,不是移动端则不显示;文章源自新手站长-https://xinshouzhanzhang.com/pcmobile.html 文章源自新手站长-https://xinshouzhanzhang.com/pcmobile.html

【阿里云99元服务器】入口2核2G3M带宽、新老用户同享、99元/年续费到2027年

【腾讯云特价】:2核2G3M 88元一年、2核2G4M 108元1年 366元3年、2核4G5M 166元/年 566元3年、4核8G12M 446元一年 更多配置8核16G18M和16核32G28M 点我直达 >>

2023阿里云优惠活动:xinshouzhanzhang.com/go/aliyun

注意:以上特价轻量服务器限制条件为“产品首单特惠”,如果你的腾讯云账号已经是老用户,建议重新注册一个腾讯云账号,如果你是新用户符合条件,那么无脑入,确实值得。

 最后更新:2018-11-21
腾讯云优惠活动

腾讯云轻量应用服务器镜像是什么?怎么选镜像比较好?

腾讯云轻量应用服务器镜像是什么?镜像是轻量服务器的装机盘,镜像用户按照云服务器的操作系统。腾讯云轻量应用服务器镜像如何选择?可以选择宝塔Linux面板8.0.4腾讯云专享版,如果需要Win系统建议选择...
评论  2  访客  1  作者  1
    • 赵兆 0

      hi,亲,这两段代码是粘贴在移动和PC分别对应的页面,还是粘贴在同一个页面

        • 新手站长

          @ 赵兆 问题很好,是我没写清楚,稍后本文会做修改。
          is_pc()和is_mobile()会自动判断访客的客户端,粘贴到那个页面,看自己喜好了;
          例如:
          使用is_pc()这段代码,该代码会自动判断访客客户端是否是PC,如果是PC则显示,不是PC则不显示;
          使用is_mobile()这段代码,该代码会自动判断访客客户端是否是移动端,如果是移动端则显示,不是移动端则不显示;

          假设将is_pc()这段代码粘贴到移动页面,移动端访客肯定会访问你的移动页面,那is_pc()这段代码就无意义了,同理粘贴到PC端,也是无意义的。该代码的主要解决的问题自动判断用户的客户端,然后站长根据不同的客户端来展示不同的内容。

      评论已关闭!