用is_mobile()函数判断手机设备wordpress

为了使得手机端和PC端显示不一样的内容字数,用了<?php if (is_mobile() ): ?><?php endif ;?>来判断,不过在此之前需要在 functions.php 内添加如下代码才能有效:

第一种代码:
这是一段php通用的判断移动浏览器的函数,原理比较简单,就是判断浏览器返回的user_agent,条件包括手机系统、品牌和窗口大小。

以WordPress为例,在主题的 functions.php 内加上如下代码,目前已包含常见移动浏览器的useragent,基本上可以涵盖可能会用手机上网的用户群了。

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 = true;
 break;
 }
 }
 return $is_mobile;
}

然后在主题任意模板如顶部加上如下判断:

<?php if (is_mobile() ): ?>
 //怎样怎样..(这里可以添加一个mobile.css,如<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/mobile.css" />)
<?php endif ;?>

还需要注意的一点:不管是单独的WordPress主题 还是自适应主题,都需要在头部将添加下面meta,否者可能导致手机显示字体过小等问题。

其实官方已经在WordPress3.4版本后添加了这个相关函数wp_is_mobile(),利用这个函数很简单的实现相关判断。
wp_is_mobile()源码:

functionwp_is_mobile(){
 static $is_mobile;
 
 if( isset($is_mobile))
   return $is_mobile;
 
 if( empty($_SERVER['HTTP_USER_AGENT'])){
   $is_mobile =false;
 } 
 else if ( strpos($_SERVER['HTTP_USER_AGENT'],'Mobile')!==false
   || strpos($_SERVER['HTTP_USER_AGENT'],'Android')!==false
   || strpos($_SERVER['HTTP_USER_AGENT'],'Silk/')!==false
   || strpos($_SERVER['HTTP_USER_AGENT'],'Kindle')!==false
   || strpos($_SERVER['HTTP_USER_AGENT'],'BlackBerry')!==false
   || strpos($_SERVER['HTTP_USER_AGENT'],'Opera Mini')!==false){
   $is_mobile =true;
 }else{
   $is_mobile =false;
 }
 
 return $is_mobile;
}

从源代码中我们可以看出,这个功能强大的函数,已经可以识别很多的移动设备的浏览器了,包括Iphone,ipad, android, silk, kindle ,BlackBerry,Opera Mini以及Opera Mini。这基本上已经满足了所有的移动设备了!

参考:WordPress中wp_is_mobile()函数判断手机设备

 

 

如果还不能满足就结合用第二种代码:

/*移动端判断*/
    function isMobile()
    { 
        // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
        if (isset ($_SERVER['HTTP_X_WAP_PROFILE']))
        {
            return true;
        } 
        // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
        if (isset ($_SERVER['HTTP_VIA']))
        { 
            // 找不到为flase,否则为true
            return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;
        } 
        // 脑残法,判断手机发送的客户端标志,兼容性有待提高
        if (isset ($_SERVER['HTTP_USER_AGENT']))
        {
            $clientkeywords = array ('nokia',
                'sony',
                'ericsson',
                'mot',
                'samsung',
                'htc',
                'sgh',
                'lg',
                'sharp',
                'sie-',
                'philips',
                'panasonic',
                'alcatel',
                'lenovo',
                'iphone',
                'ipod',
                'blackberry',
                'meizu',
                'android',
                'netfront',
                'symbian',
                'ucweb',
                'windowsce',
                'palm',
                'operamini',
                'operamobi',
                'openwave',
                'nexusone',
                'cldc',
                'midp',
                'wap',
                'mobile'
                ); 
            // 从HTTP_USER_AGENT中查找手机浏览器的关键字
            if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT'])))
            {
                return true;
            } 
        } 
        // 协议法,因为有可能不准确,放到最后判断
        if (isset ($_SERVER['HTTP_ACCEPT']))
        { 
            // 如果只支持wml并且不支持html那一定是移动设备
            // 如果支持wml和html但是wml在html之前则是移动设备
            if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html'))))
            {
                return true;
            } 
        } 
        return false;
    }

如果调用函数返回结果为true,则为移动端。

有时候,我们会根据移动端和PC端的区别,分别配置不同的域名访问。对此,我们可以判断当前访问的域名,然后再判断终端设备,根据判断跳转到对应的域名访问。如下:

// 判断当前访问地址
$url = $_SERVER['HTTP_HOST'];
if($url == '移动端url') {    //移动端访问地址
    if(!isMobile()) {
    // 终端是PC,跳转到PC端url
        echo '<script>location.href="https://PC端url地址"</script>';
        exit;
    }
} else {                    //pc访问地址
    if(isMobile()) {
        // 终端是移动端,跳转到移动端url
        echo '<script>location.href="https://移动端访问地址"</script>';
        exit;
    }
}

参考:PHP函数判断移动端和PC端判断移动设备的function isMobile()(PHP)wordpress中wp_is_mobile()函数判断手机设备

 

而我结合把这些结合了一下,如:

/**判断手机移动设备**/
function is_mobile() {
    // 如果有HTTP_X_WAP_PROFILE则一定是移动设备  
        if (isset ($_SERVER['HTTP_X_WAP_PROFILE']))  
        {  
            return true;  
        }   
        // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息  
        if (isset ($_SERVER['HTTP_VIA']))  
        {   
            // 找不到为flase,否则为true  
            return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;  
        }   
// 脑残法,判断手机发送的客户端标志,兼容性有待提高  
 $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 = true;
 break;
 }
 }
 return $is_mobile;
}

 

然后改了/*调用站内文章\文章内链短代码*/手机端摘要字数,之前是这样的

/**
   *调用站内文章\文章内链短代码
 */
function fa_insert_posts( $atts, $content = null ){
    extract( shortcode_atts( array(

        'ids' => ''

    ),
        $atts ) );
    global $post;
    $content = '';
    $postids =  explode(',', $ids);
    $inset_posts = get_posts(array('post__in'=>$postids));
    foreach ($inset_posts as $key => $post) {
        setup_postdata( $post );
        $imgthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $inset_posts->ID ), 'post-thumbnail' );
        $content .=  '<div class="product-box" data-id="' . get_the_ID() . '" >
                        <div class="item" data-id="' . get_the_ID() . '">
                            <a href="' . get_permalink() . '" target="_blank" data-id="' . get_the_ID() . '" alt="' . get_the_title() . '">
                                <span style="background-repeat: no-repeat;background-position: center center;background-size: cover;background-image: url(http://cdn.guzhangv.com/wp-content/uploads/2017/05/zhanbiao.png);"  class="img" ><img src="' . esc_url( $imgthumb[0] ) . '"></span>
                                <h3>' . get_the_title() . '</h3>
                                <div>' . wp_trim_words( get_the_excerpt(),60) . '</div>
                                <i class="p-arr"><i></i></i>
                            </a>
                        </div>
                    </div>';
    }
    wp_reset_postdata();
    return $content;
}
add_shortcode('fa_insert_post', 'fa_insert_posts');

然后硬生生地改成这样了(我脑洞大不大):

/**
   *调用站内文章\文章内链短代码
 */
function fa_insert_posts( $atts, $content = null ){
    extract( shortcode_atts( array(

        'ids' => ''

    ),
        $atts ) );
    global $post;
    $content = '';
    $postids =  explode(',', $ids);
    $inset_posts = get_posts(array('post__in'=>$postids));
    foreach ($inset_posts as $key => $post) {
        setup_postdata( $post );
        $imgthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $inset_posts->ID ), 'post-thumbnail' );
        if (is_mobile()) {
        $content .=  '<div class="product-box" data-id="' . get_the_ID() . '" >
                        <div class="item" data-id="' . get_the_ID() . '">
                            <a href="' . get_permalink() . '" target="_blank" data-id="' . get_the_ID() . '" alt="' . get_the_title() . '">
                                <span style="background-repeat: no-repeat;background-position: center center;background-size: cover;background-image: url(http://cdn.guzhangv.com/wp-content/uploads/2017/05/zhanbiao.png);"  class="img" ><img src="' . esc_url( $imgthumb[0] ) . '"></span>
                                <h3>' . get_the_title() . '</h3>
                                <div>' . wp_trim_words( get_the_excerpt(),20) . '</div>
                                <i class="p-arr"><i></i></i>
                            </a>
                        </div>
                    </div>';
                    } 
        else {
        $content .=  '<div class="product-box" data-id="' . get_the_ID() . '" >
                        <div class="item" data-id="' . get_the_ID() . '">
                            <a href="' . get_permalink() . '" target="_blank" data-id="' . get_the_ID() . '" alt="' . get_the_title() . '">
                                <span style="background-repeat: no-repeat;background-position: center center;background-size: cover;background-image: url(http://cdn.guzhangv.com/wp-content/uploads/2017/05/zhanbiao.png);"  class="img" ><img src="' . esc_url( $imgthumb[0] ) . '"></span>
                                <h3>' . get_the_title() . '</h3>
                                <div>' . wp_trim_words( get_the_excerpt(),60) . '</div>
                                <i class="p-arr"><i></i></i>
                            </a>
                        </div>
                    </div>';
            }
    }
    wp_reset_postdata();
    return $content;
}
add_shortcode('fa_insert_post', 'fa_insert_posts');

然后还改了个地方,content-image.php,这个文件里面的这一行原来是:

<p class="neirong2"><a href="<?php the_permalink();?>" target="_blank" ><?php echo mb_strimwidth(strip_shortcodes(strip_tags(apply_filters('the_content', $post->post_content))), 0, 200,"...");?></a></p>

然后被我改成

<p class="neirong2"><a href="<?php the_permalink();?>" target="_blank" ><?php if (is_mobile()): ?><?php echo mb_strimwidth(strip_shortcodes(strip_tags(apply_filters('the_content', $post->post_content))), 0, 100,"...");?><?php else : ?><?php echo mb_strimwidth(strip_shortcodes(strip_tags(apply_filters('the_content', $post->post_content))), 0, 200,"...");?><?php endif;?></a></p>

 

 

历史的今天:

斌斌

赞 赏

    推 荐 阅 读

  • 给网站开启CDN加速和云存储!

    什么是CDN加速 相信很多站长朋友都在用wp-super-cache这款插件给自己的网站开启静态加速,它的原理是通过把网站生成静态页面缓存到本地,让访客直接浏览的是这个文件,而不需要...

    给网站开启CDN加速和云存储!
  • 不变形原比例缩放图片代码

    自己整理了几种图片展示的方法,实现图片原比例缩小、放大、不失真、不变形,先来看看实例图: 不变形原比例缩放图片代码 以下是对应的各种样式的代码。 <!DOCTYPE html> ...

    不变形原比例缩放图片代码
  • 设计了一个网站…

    近一段时间累的一塌糊涂也过的一塌糊涂,基本每天凌晨三五点睡,恨不得不用吃饭不用睡觉的敲代码,睡梦中还在php if 、else if 、div class…。虽然知道熬夜不好,但生怕一...

    设计了一个网站…
  • 自定义个性化文章形式

    添加内置文章形式(post-formats),列表循环不同的文章形式。   第一步 打开wp-includes/文件夹里的post-formats.php文件,添加需要增加的样式名称,   第二步 将add_...

    自定义个性化文章形式
  • 调用站内文章/文章内链短代码

    昨天在大发的博客里看到他调用的站内文章样式很好看,高大上。随即给他留言向他请教,今天回复了一条教程链接,原来发哥早就写过教程,有需要的也可以看看,链接地址:https://f...

    调用站内文章/文章内链短代码