前回WordPressにアドセンスを設置する方法を紹介しましたが、条件分岐を使って「スマートフォン」と「PC」の表示を分けながら設置しました。
しかしながら前回紹介した「wp_is_mobile」という関数を使って条件分岐すると「PCページ」と「スマートフォン&タブレット」という分け方になってしまいます。
タブレットって横幅があるのでタブレットでの表示はPCと同じにしたい！という訳でスマートフォンとタブレットを分ける条件分岐をしていこうと思います。結果的に「PC&タブレット」と「スマートフォン」に分ける条件分岐にするって事です。
functions.phpで新しい条件分岐を作る
子テーマのfunctions.phpに記述をしていきますが、テーマによっては既にこの記述はあるかもしれないので確認しておくこと（同じ記述を子テーマに記述するとエラーがでるかも）。Stinger系のテーマは既に記述されていますので不要です。
それと初めてfunctions.phpを作成する場合には注意が必要なのでこの記事を参考に。
⇒子テーマにfunctions.phpを追加する時の注意点
functions.phpに追加するのは次のコードです。
//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'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']);
}参考：【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！｜Naifix
この記述で「is_mobile」という関数を作成してモバイル端末には「iPhone」「Android」「iPod」・・・を含めるという設定をしておきます。これで準備はOK。
後は前回アドセンスの設置で利用した「wp_is_mobile」という部分を「is_mobile」に修正すれば「PC&タブレット」と「スマートフォン」を分けることができるという訳です。
例えばこういう条件分岐。
<?php if ( wp_is_mobile() ) : ?> // モバイル用コンテンツ <?php else: ?> // PC用コンテンツ <?php endif; ?>
これの「wp_is_mobile」という部分を「is_mobile」に修正してこんな感じにする訳ですね。
<?php if (is_mobile()) : ?> // スマートフォン用コンテンツ <?php else: ?> // PC・タブレット用コンテンツ <?php endif; ?>
これで修正は完了。PCとタブレットで同じ広告が表示されて、スマートフォンと分けることができます。
コメント
さーや様
コメントありがとうございます。私自身stingerはあまり使った事がないのでよく分からないのです、すみません。stinger系のテーマは使っている方が多いので、検索すれば欲しい情報が見つかるかもしれません。もしどうしてもという場合には何か参考のサイトとさーや様のサイトを教えて下さい。検証まではできませんが、何かアイディアは出せるかもしれません、ブログのURLはコメント公開時には削除しますのでどうぞよろしくお願い致します。
stinger8のアコーディオンメニュー(スマホ)のカスタマイズができません（泣）
知識のない私が悪いのですが、 st-accordion-menu.phpを見てもいじり方がさっぱりです。
メニューバー？( 三 ←こんなの)を横幅いっぱいに表示して「MENU」という文字を入れたり、枠線を実線にしたりなど、いろいろデザインを変えたいです。
現在stinger8の子テーマを使用しており、デフォルトでは一番右上に表示されるアコーディオンメニューを、ブログタイトルの下に移動させております(必要ない情報かもしれませんが)。
よければご教授お願い致します。
しげぞうさま
お返事遅くなってすみません。しげぞうさまのおっしゃったとおり、「st_is_mobile」と記述するとタブレットでも綺麗にPC表記することができました。(それまでは「wp_is_mobile」記述してました)
解決法を教えて頂き本当にありがとうございました。
さーや様
コメントありがとうございます。私もダウンロードしてチェックしてみたのですが、stinger系のテーマは親テーマのfunctions.phpですでにこの条件分岐が記述されているみたいです。なので、自分で条件分岐を追加する必要はなそさそうです。
それで、その条件分岐を使う場合には「is_mobile」ではなく、「st_is_mobile」という記述で条件分岐できるかと思います（私はまだ検証してませんが。。すみません）ので、一度試してみて下さい。テーマの編集前にはコピー（バックアップ）をしておいていつでも元に戻せるようにしておいて下さいね！！
しげぞうさま
stinger8だとタブレットではスマホ表記になってしまいます。（私の場合スマホとpcサイトが所々混じった感じ）
stinger8でタブレットでもpc表示にするにはどのようにすればよろしいでしょうか？
ちなみにstinger8の子テーマを使用しています。
お返事いただけると幸いです。
しげぞう様
ありがとうございます。そういうことだったのですね。せっかくなので、他のところも修正しておくことにしました。「header.php」では、下記のように表示されているのですが、１行目の「 exists(‘ 」 の次の「 wp_ 」と「＆＆」の次の「 wp_ 」の２か所を取り除けばいいということなのでしょうか？
<script async
乃風様
返信ありがとうございます。厳密にはアドセンス設置したファイルは全て修正しておいた方が良いです。「single.php」だけでなく、「header.php」などもアドセンスを設置し、条件分岐した部分は修正しておいて下さい。ただ、修正はしなくても表示自体に問題があるわけではなく、あくまでタブレットでどう表示させるかの問題になります。スマホと同じ表示にするのかPCと同じ表示にするのかの違いです。
乃風様
返信ありがとうございます。「is_mobile」に修正するのはアドセンスを条件分岐した部分ですので、アドセンスを設置した「single.php」だけでOKです。アドセンスを設置したコードの条件分岐だけを変更してみて下さい。
しげぞうさんへ
いつもお世話になっております。
行ったり来たりしているうちに、なんのことなのか分からなくなってしまいました。ここの記事にあったfunctions phpへのコピぺは終わりました。最後の部分がよく分からなかったので、教えてください。ここの記事で、「後は前回アドセンスの設置で利用した「wp_is_mobile」という部分を「is_mobile」に修正すれば「PC&タブレット」と「スマートフォン」を分けることができるという訳。」と書いてあったのですが、どのｐｈｐ上で、「wp_is_mobile」を「is_mobile」に修正すればいいのでしょうか？ よろしくお願いします。
乃風様
フッターメニューに関しては絶対に必要という訳ではないので、無くてもOKですし、アドセンス申請していなくても特に問題はありません。ただ、フッターメニューには人気記事一覧などの設置も書いてますので、先にコンテンツをどんどん作成して行くことをおすすめします。カスタマイズはほぼ終わっていると思いますので、まずはコンテンツを増やすと良いかと思います。
＞モース様
わざわざ報告ありがとうございます。WordPress関連の記事もまだまだ記事にできそうな部分が多いですね。また今後も記事を追加していきますのでよろしくお願い致します。また分かりにくい部分等あればコメントで指摘していただけるとありがたいです。どうぞよろしくお願いいたします。
しげぞうさんおはようございます。
さっそく試させていただきました。
完璧です。
本当にありがとうございすm(_ _)m
私は格好から入るタイプの人間ですので、デザイン等にある程度納得いかなければ、前に進めなくなってしまうのです（笑）
これでコンテンツ作りに集中できます！
今後とも宜しくお願い致します。