WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン

更新

レスポンシブデザインでWordPressをスマホ対応させるとき、スマホとPCで表示を切り替えたくなることは多いです。その方法をまとめました。

PCとPC以外とを区別するwp_is_mobile関数を使う

wp_is_mobile関数は、ガラケー・スマホ・タブレットでの閲覧時にはTRUEを返し、PCでの閲覧時にFALSEを返します。

<?php 
if(wp_is_mobile())
{
(タブレット・スマホ・ガラケーから閲覧された場合の処理)
}
else
{
(PCから閲覧された場合の処理)
}
?>

一見これで問題ないように思えますが、ユーザビリティ的にはあまりよくないのです。

グーグルは「タブレットユーザーはスマートフォン版のサイトではなくPC版のサイトが表示されることを期待している」と断言しています。

ユーザビリティーの観点からタブレット端末ではPCと同様の表示が行われるべきなのです。

「タブレット・PC」と「スマホ・ガラケー」とを区別する「is_mymobile関数」を自作して利用

というわけで「スマホ・ガラケー」での閲覧時にはTRUEを返し、「タブレット・PC」での閲覧時にFALSEを返す関数「is_mymobile関数」を作りました。

以下のような感じで、タブレットではPCと同様の表示をすることが出来ます。

<?php 
if(is_mymobile())
{
(スマホ・ガラケーから閲覧された場合の処理)
}
else
{
(タブレット・PCから閲覧された場合の処理)
}
?>

…言うのは簡単なんですが、is_mymobile関数を定義するのには結構苦労しました。

以下のコードをfunction.phpに書けばis_mymobile関数が使えるようになります。


//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;
}
}

WordPressの投稿で「PC・タブレット」と「スマホ・ガラケー」で表示を切り替える為のショートコード

is_mymobile関数を応用したショートコードを作ると、投稿本文中で、「スマホ・ガラケー」と「PC・タブレット」で表示を切り替えることが出来ます。

function.phpでis_mymobileを定義した部分の後ろに、以下のコードを貼り付けます。

//スマホ・ガラケーでのみ表示するコンテンツ
function if_is_phone($atts, $content = null ) 
{
$content = do_shortcode( $content);
if(is_mymobile())
{
return $content;
}
}
add_shortcode('phone', 'if_is_phone');
//PC・タブレットなどスマホ・ガラケー以外でのみ表示するコンテンツ
function if_is_nophone($atts, $content = null ) 
{
$content = do_shortcode( $content);
if(!is_mymobile())
{
return $content;
}
}
add_shortcode('nophone', 'if_is_nophone');

すると、[phone]と[/phone]で囲まれた部分はスマホでのみ表示され、[nophone]と[/nophone] で囲まれた部分はPCとタブレットでのみ表示されるようになります。

WordPressの投稿で「PC」と「タブレット・スマホ・ガラケー」で内容を変えるためのショートコード

wp_is_mobile関数を応用したショートコードを作ると、投稿本文中で、「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_nopc($atts, $content = null ) 
{
$content = do_shortcode( $content);
if(wp_is_mobile())
{
return $content;
}
}
add_shortcode('nopc', 'if_is_nopc');

これで[phone]と[/phone]で囲まれた部分はスマホ・ガラケーでのみ表示され、[nophone]と[/nophone] で囲まれた部分はPCとタブレットでのみ表示されるようにします。

スマホとPCで画像の大きさを差し替えるプラグイン

スマホのような幅の狭いデバイスでPC用の画像を表示するのは、高速化の観点からいただけません。

スマホでは、PC用画像の縮小版に、差し替えたいところです。

そんなときにぴったりなプラグインがHammyです。

レスポンシブデザインを諦めてスマホ用テーマを自動出力するプラグインを使うのも手です。

スマホ対応をレスポンシブデザインで行うと色々融通が利く反面、結構面倒くさいです。

いっそのことスマホ専用のテーマを作ってしまう手もあります。

プラグインの中にはスマホ用テーマを自動的に作成してくれるものもあります。

個人的には、スマホ専用テーマを作ってくれるプラグインに頼ると色々窮屈な気がするので、面倒でもレスポンシブデザインのテーマを弄っています。

WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン」への7件のフィードバック

  1. ピンバック: 知ってるとちょっと便利なWordpress関数

  2. ピンバック: WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめ - ゆめぴょんの知恵

  3. ピンバック: WordPressでスマホ / それ以外の広告を出し分ける話 | もやし工房

    1. ウェブシュフ 投稿作成者

      筒井さん、コメントありがとうございます。

      改築頑張ってください。

      返信
  4. 松尾司

    初めまして、こんばんは、function.phpを編集することなく、
    の下にmoreタグを入れると、崩れてしまいます、どのようにすればよろしいでしょうか?

    返信
    1. ウェブシュフ 投稿作成者

      松尾司様、コメントありがとうございます。

      moreタグ絡みのトラブルは未体験にてお答えすることが出来ません。

      お力になれず申し訳ございません。

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です