あまり使用頻度は多くないと思いますが、投稿エディタ内でデバイスの判定をしたい時があります。
例えば電話番号リンク。
<a href="tel:0110000000">011-000-0000</a>
プレビューサンプル
011-000-0000とすると、電話が掛けられるデバイス（スマホ）の場合、リンクから直接電話がかけられるようになります。
しかし、電話がかけられないPCやタブレットなどの場合に該当部分をクリックすると「このリンクを開くためのアプリを選択してください」といった表示が出てきますので、スマホ以外のデバイスでは電話番号のリンクを無効にする必要があります。最近、PCサイトでもお構いなしに電話リンク張ってるサイトをよく見かけるんですが、個人的にはスマホ以外では無効にしたいところです。
実装方法
functions.phpに各デバイスを判定するためのコードを書いた上で、ショートコード化してデバイス毎に表示させたい部分を分ける方法となります。wp_is_mobile()による判定をエディタ内でするためにショートコード化するという感じです。
なお、wp_is_mobile()による判定は、タブレットの場合もスマホ判定されてしまうので、デフォのままでは電話が掛けられないタブレットにも電話番号リンクがついてしまう事になります。
「PC」と「それ以外のデバイス」を判定
タブレットをPC判定させるかスマホ判定させるかは下記コードで判定可能です。ただし、タブレットはスマホと同じ扱いとなります。
//PCで表示するコンテンツ
function if_is_pc($atts, $content = null ){
$content = do_shortcode( $content);
if(!wp_is_mobile()){
return $content;
}
}
add_shortcode('pc', 'if_is_pc');
//モバイルで表示するコンテンツ
/*タブレットも含まれる*/
function if_is_sp($atts, $content = null ){
$content = do_shortcode( $content);
if(wp_is_mobile()){
return $content;
}
}
add_shortcode('sp', 'if_is_sp');
[pc] <p>お問い合わせ番号：011-000-0000</p> [/pc] <!--スマホ・タブレットで表示させたい内容--> [sp] <p>お問い合わせ番号：<a href="tel:0110000000">011-000-0000</a></p> [/sp]
タブレットをPC判定させる場合
functions.phpに下記コードを追記してください。ガラケーやマイナー機種も含めて細かく判定します。上記の判定方法とは違い、タブレットはPCと同じ扱いになります。
//iphoneまたはipodで閲覧されているかどうかを判定
function is_iphone()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'iPhone')!== false||
strpos($ua, 'iPod')!== false
)
{
return true;
}
else
{
return false;
}
}
//androidスマートフォンで閲覧されているかどうかを判定
//mobileの文字列からタブレット端末をfalse判定
function is_android()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'Android')!== false&&strpos($ua, 'Mobile')!== false
)
{
return true;
}
else
{
return false;
}
}
//Mozillaのスマートフォン用OS「Firefox OS」の判定
function is_firefox_os()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'Android')=== false&&strpos($ua, 'Firefox')!== false&&strpos($ua, 'Mobile')!== false
)
{
return true;
}
else
{
return false;
}
}
//Windows Phoneの判定
//mobileの文字列からタブレット端末をfalse判定
function is_windows_phone()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'Windows')!== false&&strpos($ua, 'Phone')!== false
)
{
return true;
}
else
{
return false;
}
}
//BlackBerryの判定
function is_blackberry()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'BlackBerry')!== false
)
{
return true;
}
else
{
return false;
}
}
//ガラケーの判定
function is_ktai()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'DoCoMo')!== false||
strpos($ua, 'KDDI')!== false||
strpos($ua, 'UP.Browser')!== false||
strpos($ua, 'MOT-')!== false||
strpos($ua, 'J-PHONE')!== false||
strpos($ua, 'WILLCOM')!== false||
strpos($ua, 'Vodafone')!== false||
strpos($ua, 'SoftBank')!== false
)
{
return true;
}
else
{
return false;
}
}
/*****
is_ktai()・is_iphone()・is_android()・is_firefox_os()・is_windows_phone()・is_blackberry()のどれかがTRUEを返すとis_mymobile()はTRUEを返す。要するにガラケー･スマホでの閲覧時にはTRUE、PC・タブレットでの閲覧時にはFALSEを返す。
******/
function is_mymobile()
{
if(
is_ktai()||
is_iphone()||
is_android()||
is_firefox_os()||
is_windows_phone()||
is_blackberry()
)
{
return true;
}
else
{
return false;
}
}
//スマホ・ガラケーで表示するコンテンツのショートコードを作成
function if_is_phone($atts, $content = null )
{
$content = do_shortcode( $content);
if(is_mymobile())
{
return $content;
}
}
add_shortcode('sp', 'if_is_sp');
//PC・タブレットでのみ表示するコンテンツ
function if_is_nophone($atts, $content = null )
{
$content = do_shortcode( $content);
if(!is_mymobile())
{
return $content;
}
}
add_shortcode('pc', 'if_is_pc');
使い方
エディタ内で、表示させたいデバイス毎に以下の様にショートコードで囲ってください。
<p>何でもお気軽にお問い合わせください！</p> <!--PC・タブレットで表示させたい内容--> [pc] <p>お問い合わせ番号：011-000-0000</p> [/pc] <!--スマホのみで表示させたい内容--> [sp] <p>お問い合わせ番号：<a href="tel:0110000000">011-000-0000</a></p> [/sp]
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
