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

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

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

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

一見これで問題ないように思えますが、ユーザビリティ的にはあまりよくないのです。
[img-link url=”http://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html” title=”Google ウェブマスター向け公式ブログ: タブレット端末ユーザーにはフルサイズのウェブを表示しましょう”]

グーグルは「タブレットユーザーはスマートフォン版のサイトではなく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です。

[img-link url=”https://webshufu.com/wordpress-plugin-hammy/” title=”【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフ”]

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

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

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

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

[img-link url=”http://netaone.com/wp/wordpress-smartphone-plugin/” title=”WordPressのスマートフォンサイト自動生成プラグイン6選＋おまけ – ネタワン”]

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