122月

WordPress|PCとスマホで記事中に表示させるコンテンツを切り替える方法


Google Analyticsを見ると、Handmade Future ! にアクセスしてくださる方の環境は、4割がモバイル(スマートフォン&タブレット)です。

2013-02-12_0946

ほとんどのブログやWebサイトは大差ないはずです。それどころか、スマートフォンからのアクセスが上回る時代が近いうちに来るでしょう。もはやスマートフォン対応は必須ですよね。

スマートフォン対応には大きく2つの方向性があります。1つはスマートフォン用のサイトを構築する方法。もう1つは、Handmade Future ! もそうですがレスポンシブデザインです。PCで閲覧している方は、ブラウザの横幅を小さくしてみてください。Handmade Future ! は、ある一定の大きさになるとタブレット用のレイアウトに、もっと小さくするとスマートフォン用のレイアウトに、シームレスに変化します。

スマートフォンで見せる場合には、PC環境に比較して「貧弱な通信回線」「処理速度の遅いCPU」という2つの課題を解消する必要があります。同じコンテンツを見せれば、スマートフォンのほうがより時間がかかり、「重い」印象になるわけです。

例えば、Handmade Future ! では、読み込み負荷を軽減させるために、スマートフォン環境では、記事下コールトゥアクションのFacebookページ『Like Box』を表示させていません。

このように、WordPressで構築しているサイトで、閲覧環境(パソコンor スマートフォン)によって記事中に表示させるコンテンツを切り替える方法を紹介します。

 

1. ユーザエージェントを判定するコードを追加する

WordPressの管理画面から、外観 → テーマ編集へと進みます。『functions.php』に、以下のコードを追加します。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

なお、このコードにはiPadが含まれていません。Handmade Future ! のレイアウト&コンテンツの場合は、タブレットはPCと同じ内容で良いとの判断からです。

iPadもモバイルに含めたい場合は、iPhoneの下あたりに、

        'iPad',           // iPad

を追加してください。

また、モバイルに判定するべきユーザエージェントが増えた場合は、追加していく必要があります。

 

2. 記事中でPHPコードを利用できるようにする

手順1の段階で、PHPコードを利用して表示の切り替えができる状態になります。サイドバーやフッターなど、テーマ内ではPHPコードが利用できるので、すぐにでも機能します。

がしかし、記事中では、PHPコードを利用できません。

そこで、記事中でPHPコードを利用できるようにするWordPressプラグインをインストールします。『Insert PHP』や『Allow PHP in Posts and Pages』など、いくつか種類があります。Handmade Future ! では『Exec-PHP』を使っていますが、2年以上アップグレードがない古いプラグインなので、今後もきちんと動作するか不透明です。

WordPressの管理画面から、プラグイン → 新規追加と進みます。プラグイン名で検索するか、「PHP」などの単語で検索して見つけてください。

同様に、ウィジェット内でPHPコードを利用できるようにするプラグインもあります。必要に応じて検索してインストールしてください。

 

3. PHPを利用し、表示させるコンテンツを指定する

準備が整ったら、PHPコードで、環境ごとに表示させるコンテンツを指定します。

<?php if(is_mobile()) { ?>
【スマートフォンで表示させるコンテンツ】
<?php } else { ?>
【スマートフォン以外(PC&iPad)で表示させるコンテンツ】
<?php } ?>

簡単なコードですよね。これ1つで、記事中でもサイドバーでもウィジェット内でも表示の切り替えができます。

例えば、PCとスマートフォンで読ませる文章を変えることもできますし、PCでは埋め込んだ動画を読み込ませ、スマートフォンでは動画が置いてある元ページのリンクを読み込ませる、といった動作が可能になります。

 

地道に最適化していこう

初心者の方は、はじめはスマートフォン対応に苦戦すると思いますが、スマートフォンでアクセスする割合が4割を超えてきているので、もはや無視はできません。

最初から完璧なWebサイトはありません。記事をUPしたら手持ちのスマートフォンでチェックして、違和感のある箇所を見つけ次第、地道に修正していくクセをつけるのがベターだと思います。

Share this Story
記事はいかがでしたか?
1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価はありません)
Loading...




寄金佳一 デジタル販売記事
urepia-banner3のコピー writing-bannerのコピー



話題の記事





最新記事はSNSをチェック

TOPページ サイトマップ 更新履歴