StingerのSNSボックス表示をスマホとPCで切り替え

スポンサーリンク
ビッグバナー728

stingerスマホでのsnsボックス表示

Stingerの一番下の部分、SNSボックス表示をスマホとPCで切り替える方法をご紹介します。

Stinger3ではSNSボックスがさらに大きくなって、横に大きく広がりました。

見やすさを優先させるため、PCはSNSボックスを表示、スマホの場合は消すことにします。

スポンサーリンク

Stinger3 SNSボックスが横に大きくなる

先日、いわしの同級生から連絡がありました。

「いわしくんのブログ、iPhoneだと読みづらいんだけど・・・」

へ、そうなの? スマホやタブレットでも一応確認はしてるんだけどなぁ。どんなところが?

「下の方に出るソーシャルボタンがちょっと大き過ぎるかなぁ」

下の画像はStinger3のスマホ画面ですが、ふむふむ・・・まあ、確かに大き過ぎかもしれません。いわしブログはStinger2ですが、Stinger3ではSNSボックスがさらに大きくなって、横に大きく広がっています。

stingerスマホでのsnsボックス表示

StingerのSNSボックス表示をスマホとPCで切り替えられるといいのでしょうけど、そうなるとソーシャルボタンのクリック率が下がるかもしれません。Googleアナリティクスを見ると、スマホからのアクセスは結構ありますしねぇ。

でも、やっぱり消すことにしました。訪問者にとって見やすいブログを優先させます。

PCはSNSボックスを表示、スマホの場合は表示させないことにしました。

WordPressの「wp_is_mobile」関数を使う

さて、その切り替えですが、WordPressには 「wp_is_mobile」というとっても便利な関数があるので、それを使います。

スマートフォンとPCで表示したいものを切り替える

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

はい、たったこれだけです。後述の参考サイトでは、Adsenseの表示やウィジェットの表示切り替えなんかに使っているようですね。確かにスマホは表示スペースが限られていますから、PCと切り替えができるとすごく便利です。

スポンサーリンク

スマートフォンだけ表示させる

他にも、スマートフォンだけ表示させるという使い分けができます。

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

こちらはスマートフォンで表示させない方法です。

<?php if (!wp_is_mobile()): ?>
	/*PCで表示したいことを記載*/
<?php endif; ?>

StingerのSNSボックスに「wp_is_mobile」関数を使う

さて、実際にStingerのSNSボックスで「wp_is_mobile」関数を使ってみます。

PCではSNSボックスを表示、スマホの場合は表示させないので、この場合は先程の参考例の一番下、「スマートフォンでは表示させない」を使います。

いわしブログはStinger2なので、SNSボックスの表示切り替えはテーマフォルダ内、header.phpのコードを変更します。(Stinger3の場合はfooter.phpです)

このSNSボックス表示に関する条件分岐に、「wp_is_mobile」関数の「スマートフォンでは表示させない」条件文をかぶせる形になります。

<?php if (is_home()) { ?>
/*SNSボタン「トップページ」に関する記載*/
<?php } else { ?>
/*SNSボタン「個別記事」に関する記載*/
<?php } ?>

「wp_is_mobile」関数を使うと、こんな感じになります。

<?php if (!wp_is_mobile()): ?>
<?php if (is_home()) { ?>
/*SNSボタン「トップページ」に関する記載*/
<?php } else { ?>
/*SNSボタン「個別記事」に関する記載*/
<?php } ?>
<?php endif; ?>

実際のコードはもっと長いと思うので、自分のコードに合わせて適宜修正してくださいね。

別の関数を使ってスマホとタブレットで表示切替え

これで、スマホではSNSボックスは表示されなくなりました。

ただ、これだとタブレットの場合もSNSボックスは非表示になります。タブレットは表示スペースに余裕があるので、SNSボックスは表示でも構わないのですが、「wp_is_mobile」関数を使うと、タブレットもスマホ扱いになってしまいます。

スマホとタブレットで表示を切り替える場合は、別の関数を使う必要があります。「みはら.com」さんのブログに、その方法が詳しく記載されていました。おお、すばらしい!

User-agent(UA、ユーザーエージェント)を判別する関数を使って、スマホとタブレットで表示を切り替えます。User-agentとは、要するに「あなたがお使いの機種」ってことです。

まず、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']);
}

ここで定義した「is_mobile」という関数名は、実際は何でもかまいません。

そして、いわしはStinger2を使っているので、header.phpのコードを変更します。先ほどと同様に、SNSボックス表示に関する条件分岐に「is_mobile」関数をかぶせる形ですね。

<?php if (!is_mobile()) { ?>
<?php if (is_home()) { ?>
/*SNSボタン「トップページ」に関する記載*/
<?php } else { ?>
/*SNSボタン「個別記事」に関する記載*/
<?php } ?>
<?php } ?>

これでPCとタブレットはSNSボックス表示、スマホはSNSボックス非表示になりました。こんなに簡単でいいんでしょうか・・・

下の画像はいわしブログをiPhoneで表示させたものです。SNSボックスが消えて表示面積が増えました。なかなか良い感じです。

stinger2スマホでsnsボックス非表示

この関数はSNSボックスの表示に限らず、何かと使い道があると思います。いろいろ工夫してみてくださいね。

今回はこちらの記事を参考にさせていただきました。凛さん、岡山さんありがとうございます。

スポンサーリンク
PC用
PC用

フォローする

コメント

  1. […] StingerのSNSボックス表示をスマホとPCで切り替え(ウィンドミル いわしブログ) […]

  2. […] StingerのSNSボックス表示をスマホとPCで切り替え | ウィンドミル いわしブログ […]