前回WordPressにアドセンスを設置する方法を紹介しましたが、条件分岐を使って「スマートフォン」と「PC」の表示を分けながら設置しました。
しかしながら前回紹介した「wp_is_mobile」という関数を使って条件分岐すると「PCページ」と「スマートフォン&タブレット」という分け方になってしまいます。
タブレットって横幅があるのでタブレットでの表示はPCと同じにしたい！という訳でスマートフォンとタブレットを分ける条件分岐をしていこうと思います。結果的に「PC&タブレット」と「スマートフォン」に分ける条件分岐にするって事です。
functions.phpで新しい条件分岐を作る
子テーマのfunctions.phpに記述をしていきますが、テーマによっては既にこの記述はあるかもしれないので確認しておくこと（同じ記述を子テーマに記述するとエラーがでるかも）。Stinger系のテーマは既に記述されていますので不要です。
それと初めてfunctions.phpを作成する場合には注意が必要なのでこの記事を参考に。
⇒子テーマにfunctions.phpを追加する時の注意点
functions.phpに追加するのは次のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //スマホ表示分岐 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&タブレット」と「スマートフォン」を分けることができるという訳です。
例えばこういう条件分岐。
1 2 3 4 5 | <?php if ( wp_is_mobile() ) : ?> // モバイル用コンテンツ <?php else: ?> // PC用コンテンツ <?php endif; ?> |
これの「wp_is_mobile」という部分を「is_mobile」に修正してこんな感じにする訳ですね。
1 2 3 4 5 | <?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