2012 年春,WordPress3.4 版发布。除了引入主题定制器和自动嵌入推文的功能外,3.4 版还增加了一个函数,开发人员可以用它来测试网站访客是否是通过智能手机或平板电脑等移动设备连接的。
函数 wp_is_mobile()
出现时,苹果公司为其 iPhone 4 推出的著名“视网膜显示屏”只有 640 x 960 像素。WordPress 3.4 发布几个月后,iPhone 5 的显示屏达到了 640 x 1136 像素,这与现代智能手机和平板电脑的显示屏仍有很大差距,后者的显示屏模糊了移动和桌面屏幕的界限。
那么,wp_is_mobile()
在今天还有用吗?
wp_is_mobile()函数的作用
2012 年,浏览器对支持响应式网页设计的 CSS 媒体查询的支持还相对较新。(对于使用微软 Internet Explorer 浏览器的用户来说,这确实是个新技术!)但wp_is_mobile()
的目的并不是让页面布局适应不同的视口尺寸。
该函数不区分手机和平板电脑,完全不考虑访问者浏览器的可用像素。相反,wp_is_mobile()
被认为是一个允许开发人员在响应移动设备时优化带宽的工具,因为移动设备通常性能不足,而且用户可能需要向电信运营商支付数据传输费用。
如今,手机和平板电脑的性能比 2012 年的许多台式机都要强大,因此带宽节流可能已不那么重要,但一个简单地将世界一分为二的函数仍有其用武之地:移动设备和其他设备。
运行中的wp_is_mobile()函数
WordPress的 wp_is_mobile()
函数在执行大多数智能手机和平板电脑(包括Kindle)浏览器的请求时返回 true
。因此,该函数在 PHP 中生成不同内容流的经典示例如下:
<?php if( wp_is_mobile()){ ?> <p>This content is for mobile devices</p> <?php } else { ?> <p>This content is for desktops (and laptops).</p> <?php } ?>
如果确实需要针对移动设备优化网站输出(可能是为了尽量减少带宽需求),可以在主题文件中使用上述技术,为移动和桌面页面输出完全不同的结构。
通过设备检测进行细粒度内容调整
CSS 媒体查询和其他支持响应式网页设计的技术可以帮助页面布局适应各种屏幕尺寸和方向。但它们无法帮助您以移动用户或桌面用户的身份与网站访问者交流。
例如,您知道台式机用户可能会使用鼠标“点击”网站元素,而移动用户则会“轻点”。台式机用户可能会“右击”链接,在新的浏览器窗口中打开链接。与此同时,移动用户可能会“按住”来启动相同的任务。仅仅与用户交流如何浏览网站(比如在帮助文档中),就可能意味着有一半的时间使用了错误的术语。
下面是我们如何将 wp_is_mobile()
和 WordPress 短代码结合起来,以一种便于网站编辑人员指挥的方式支持移动或桌面内容的细粒度输出。
我们将把移动/桌面检测与 WordPress add_shortcode()
和 do_shortocde()
函数结合起来使用,创建编辑人员可以在文章中使用的简码工具。
首先,我们将把这段代码添加到主题的 functions.php 文件中(在创建子主题后对其进行保护):
/** * Add shortcodes */ // Create [desktop] shortcode add_shortcode('desktop', 'show_desktop_content'); function show_desktop_content($atts, $content = null){ if( !wp_is_mobile() ){ return do_shortcode( $content ); } else { return null; } } // Create [mobile] shortcode add_shortcode('mobile', 'show_mobile_content'); function show_mobile_content($atts, $content = null){ if( wp_is_mobile() ){ return do_shortcode( $content ); } else { return null; } }
这样就创建了 [desktop] 和 [mobile] 简码(及其结尾标签),我们可以在任何帖子或页面内容中使用这些简码:
<h2>Password Help</h2> To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.
在移动设备上,上面的内容将显示如下:
移动设备用户将在上述输出中看到“tap”。
在所有其他设备上,访客将看到这个:
桌面用户将在上面的输出中看到“click”。
通过这种技术,可以非常容易地提供能“感知”访问者与 WordPress 网站交互方式的内容。
wp_is_mobile()函数和WordPress缓存
不需要从 2012 年就开始使用WordPress,你也知道页面缓存是提高性能的最有效方法之一。但是,WordPress 的基本缓存功能可能会给试图在请求同一页面时提供不同内容的尝试带来麻烦。
单个页面的 WordPress 缓存由客户端请求启动。如果第一个请求来自移动设备,缓存的内容将通过 wp_is_mobile()
进行修改,为移动用户量身定制。随后对该页面的每个请求都将提供移动内容,甚至包括桌面用户,直到缓存被清除。
小结
WordPress的 wp_is_mobile()
函数看似已经过时,但您可能会发现它的“移动或桌面”检测功能可以帮助您为网站的所有访问者创造更好的体验。
别忘了,如果你想从这些移动和桌面路径中获得最佳性能,就需要为你生成的不同内容分别设置缓存。
你有利用 wp_is_mobile()
好主意吗?请在下面的评论中告诉我们。
评论留言