WordPress的wp_is_mobile()函式還有用嗎?

WordPress的wp_is_mobile()函式還有用嗎?

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 中生成不同內容流的經典示例如下:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?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 } ?>
<?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 } ?>
<?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 檔案中(在建立子主題後對其進行保護):

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/**
* 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;
}
}
/** * 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; } }
/**
* 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] 簡碼(及其結尾標籤),我們可以在任何帖子或頁面內容中使用這些簡碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<h2>Password Help</h2>
To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.
<h2>Password Help</h2> To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.
<h2>Password Help</h2>
To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.

在移動裝置上,上面的內容將顯示如下:

移動裝置使用者將在上述輸出中看到“tap”

移動裝置使用者將在上述輸出中看到“tap”。

在所有其他裝置上,訪客將看到這個:

桌面使用者將在上面的輸出中看到“click”

桌面使用者將在上面的輸出中看到“click”。

通過這種技術,可以非常容易地提供能“感知”訪問者與 WordPress 網站互動方式的內容。

wp_is_mobile()函式和WordPress快取

不需要從 2012 年就開始使用WordPress,你也知道頁面快取是提高效能的最有效方法之一。但是,WordPress 的基本快取功能可能會給試圖在請求同一頁面時提供不同內容的嘗試帶來麻煩。

單個頁面的 WordPress 快取由客戶端請求啟動。如果第一個請求來自移動裝置,快取的內容將通過 wp_is_mobile() 進行修改,為移動使用者量身定製。隨後對該頁面的每個請求都將提供移動內容,甚至包括桌面使用者,直到快取被清除。

小結

WordPress的 wp_is_mobile() 函式看似已經過時,但您可能會發現它的“移動或桌面”檢測功能可以幫助您為網站的所有訪問者創造更好的體驗。

別忘了,如果你想從這些移動和桌面路徑中獲得最佳效能,就需要為你生成的不同內容分別設定快取。

你有利用 wp_is_mobile() 好主意嗎?請在下面的評論中告訴我們。

評論留言