WordPressでレスポンシブデザインにするなら必ず覚えておきたい、AdsenseやソーシャルーシャルボタンなどをスマートフォンとPCで出し分ける方法。


WordPressでレスポンシブを実現しよう

猫も杓子もレスポンシブな昨今ですが、レスポンシブデザインで結構困ってしまうのがスマートフォンとPCで色々な要素を出し分けたい場合。
サイトの見た目については素人でも結構手軽にレスポンシブ出来るようになりましたが、レスポンシブでかつモバイルとPCにそれぞれ要素を出し分けたいとなるとちょっと一手間ですね。
okaoka.netはWordPressで作られているので、今回は達人じゃなくてもお手軽に要素を出し分けるためのお話Wordpress篇です。
saiso blogから呼び出されて良いネタを貰いました。

okaoka.netで出し分けている要素たち

だいたいどこも困っているのは似たり寄ったりだとは思うのですが、以下が本サイトでスマートフォンとPCで出し分けている要素たちです。
基本的な目的は、見た目、軽量化&効率化。
あ、これは出し分けたいかも!って思ったなら最後までお付き合いください。

・Adsense

Googleの広告ですね。nanapiでも超お世話になってます。
サーバ代くらいは稼ぎたいのですが、万能サイズであるレクタングル(300×250)がスマホだと表示しきれなかったりするので、PC・スマホそれぞれサイズと表示場所を変えて効率的っぽく広告を出し分けたいです。

・ソーシャルボタン

Facebookのいいね!ボタンやら、はてなブックマークのはてブボタンやらです。基本ソーシャルボタンは外から呼び出す都合上、重たいのでモバイルではなるべく軽くしたいところですね。
ただ、okaoka.netではソーシャルボタンは軽量化よりも見た目シンプルなボタンにしたい&それぞれのボタン幅を変更したいという用途で出し分けております。
PCではよりリッチに、モバイルではよりシンプルに。ってのも一つの考え方かと思ってます。

・Zenback

これはもう正直、PCでも重いのでモバイルでは表示しない方向で。

・サイドバーに表示されているアレヤコレヤ。

このサイトではFacebookページのウィジェットやその他幾つかのウィジェットを出し分けています。
Facebookページウィジェットは、PCでは300×250のサイズで表示していますが、モバイルでは250×250で表示しています。良ければイイねしてください(・ω<)

・LINEで送るボタン

今は利用していないのですが、こいつもPCで出ている意味が無いので出し分け対象です。
とまあ個人的にはこんな感じでしょうか。

WordPress3.4以降なら(おそらく)最も手軽な方法※条件付き

当初上記欲求を満たすべくリファレンスなどをペロペロ読んでいて見つけた方法がコレ。

「wp_is_mobile」関数

Wordpress3.4から実装された条件分岐関数です。標準機能で出来るのかよ!すげぇなWordpress!と思ってました。が。

  • iPadが、PCじゃなくてスマートフォンとして認識されちゃう。
  • 予め決められたUserAgent以外は対応が面倒くさい(アップデートで対応してくれるとは思いますがちょい柔軟性にかける)

とまあ、これは(個人的に)痛い。iPadはPCとして扱いたい(個人的に)。ので私は残念ながら使いませんでした。
下の理由はなんとなく自力で即できる部分を残しておきたい的な大雑把な理由ではあります。
ただ、「別にiPadはモバイルで良くない?」って人や、「自分で指定とか超面倒」なんて人は、コチラを使うのが標準機能ですし手軽ですしオススメです。
wp_is_mobile関数で出し分けたい要素をこんな感じで書いて出し分けます。

■スマートフォンには要素A、その他には要素Bを表示

<?php if (wp_is_mobile()): ?>
	/*スマートフォンで表示したい要素Aを記載*/
<?php else: ?>
	/*それ以外(PC)で表示したい要素Bを記載*/
<?php endif; ?>

■スマートフォンだけに要素を表示

<?php if (wp_is_mobile()): ?>
	/*スマートフォンで表示したい要素を記載*/
<?php endif; ?>

■今度は逆にスマートフォンなら要素を出さない

<?php if (!wp_is_mobile()): ?>
	/*モバイル(PC)で表示したい要素を記載*/
<?php endif; ?>

だいたいがsingle.phpなんかの記事ページ用テンプレートに記載になるかと思いますが、超簡単ですね!

iPadはPCで出し分けたいしUserAgentには柔軟に即対応したいんだよ

なんて人は以下を参照。
上で解決する人は良かったね!です。下のは必要ないです。
前述のとおり、私としては、iPadはPCとして出し分けたい。ある程度UAコントロールが容易に出来るようにしておきたい。
で良い感じの説明方法をGoogle先生で探してみたらすぐ見つかりました。全部書いてある!便利。
[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com  – http://miha5.com/2012/09/2682/
ナイス解説です。みはら.comさん!
要は上述のwp_is_mobile関数と似た機能を自前で用意する形ですね。
以下コードを引用。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']);
}

引用終わり。
色々とUserAgentリストが書かれていますが、おそらく現在ではiPhone,iPod,Androidだけでも十分かと思います。
必要なら自分のサイトのGoogle Analyticsでも調べて、よく来るモバイルブラウザのUserAgentを書けば良いと思います。
面倒ならそのままで。ただメリットの一つでもあると思いますので、せっかうだから色々なOSや色々なブラウザのUserAgentに興味をもつのも一興。
そのうちfirefox OSやTizen、Ubuntu touchなども必要になるかもね。ワクワク。
で、今度はまた先程のwp_is_mobileのように出し分けたい箇所に以下を書きます。
以下またコードを引用。

<?php if(is_mobile()) { ?>
    /*【スマートフォン用のAdSenseコード】*/
<?php } else { ?>
    /*【PC用のAdSenseコード】*/
<?php } ?>

引用終わり。
みはら.comさんではAdsenseで書かれていますが、別にAdsenseじゃなくてもソーシャルボタンやらサイドバーの要素やらもOKです。お好きな要素を出し分けよう。
これで、色々なUAを自前である程度コントロールしつつ、出しわけを実現することが出来ます。

最後にデメリットというか弱点

標準のwp_is_mobileも、みはら.comさんのis_mobileもデメリットというか、弱点もあります。※ただし技術のある人を除く。

ソースが汚くなる

技術が足りないだけなんですが…。どうしても色々なところを分岐させて行くとソースコードがかなりゴチャゴチャになり、可読性が著しく落ちます。要所要所で使うのが良いでしょう。
ショートコードなんかと組み合わせると整理できそうなんですが…

レスポンシブの意義からどんどん遠ざかる

これはそもそも論的なところですが、レスポンシブなのにいちいち両方確認して修正など手間が増えます。
レスポンシブの宿命なのかもしれませんが、上手いこと対応できる方法があるのかもしれない。
ってなことで想像していたより記事が長くなってしまいましたが、便利ですし想像力次第で使いドコロはかなり多岐にわたるので、覚えておいて損はありません!
Wordpressでレスポンシブサイトを作っている方は、是非使ってみましょう!
あともっといい方法あるよ!ってのを知っていらっしゃる方は是非教えて下さい!