WordPressの条件分岐でスマートフォンとタブレットを分ける方法

前回WordPressにアドセンスを設置する方法を紹介しましたが、条件分岐を使って「スマートフォン」と「PC」の表示を分けながら設置しました。

しかしながら前回紹介した「wp_is_mobile」という関数を使って条件分岐すると「PCページ」と「スマートフォン&タブレット」という分け方になってしまいます。

タブレットって横幅があるのでタブレットでの表示はPCと同じにしたい!という訳でスマートフォンとタブレットを分ける条件分岐をしていこうと思います。結果的に「PC&タブレット」と「スマートフォン」に分ける条件分岐にするって事です。

functions.phpで新しい条件分岐を作る

子テーマのfunctions.phpに記述をしていきますが、テーマによっては既にこの記述はあるかもしれないので確認しておくこと(同じ記述を子テーマに記述するとエラーがでるかも)。Stinger系のテーマは既に記述されていますので不要です。

それと初めてfunctions.phpを作成する場合には注意が必要なのでこの記事を参考に。
子テーマにfunctions.phpを追加する時の注意点

functions.phpに追加するのは次のコードです。

参考:【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!|Naifix

この記述で「is_mobile」という関数を作成してモバイル端末には「iPhone」「Android」「iPod」・・・を含めるという設定をしておきます。これで準備はOK。

後は前回アドセンスの設置で利用した「wp_is_mobile」という部分を「is_mobile」に修正すれば「PC&タブレット」と「スマートフォン」を分けることができるという訳です。

例えばこういう条件分岐。

これの「wp_is_mobile」という部分を「is_mobile」に修正してこんな感じにする訳ですね。

これで修正は完了。PCとタブレットで同じ広告が表示されて、スマートフォンと分けることができます。

最終更新日:2017/12/15

WordPressの条件分岐でスマートフォンとタブレットを分ける方法”に12件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    さーや様

    コメントありがとうございます。私自身stingerはあまり使った事がないのでよく分からないのです、すみません。stinger系のテーマは使っている方が多いので、検索すれば欲しい情報が見つかるかもしれません。もしどうしてもという場合には何か参考のサイトとさーや様のサイトを教えて下さい。検証まではできませんが、何かアイディアは出せるかもしれません、ブログのURLはコメント公開時には削除しますのでどうぞよろしくお願い致します。

  2. さーや

    stinger8のアコーディオンメニュー(スマホ)のカスタマイズができません(泣)

    知識のない私が悪いのですが、 st-accordion-menu.phpを見てもいじり方がさっぱりです。

    メニューバー?( 三 ←こんなの)を横幅いっぱいに表示して「MENU」という文字を入れたり、枠線を実線にしたりなど、いろいろデザインを変えたいです。

    現在stinger8の子テーマを使用しており、デフォルトでは一番右上に表示されるアコーディオンメニューを、ブログタイトルの下に移動させております(必要ない情報かもしれませんが)。

    よければご教授お願い致します。 

  3. さーや

    しげぞうさま

    お返事遅くなってすみません。しげぞうさまのおっしゃったとおり、「st_is_mobile」と記述するとタブレットでも綺麗にPC表記することができました。(それまでは「wp_is_mobile」記述してました)

    解決法を教えて頂き本当にありがとうございました。

  4. しげぞう 投稿作成者

    さーや様

    コメントありがとうございます。私もダウンロードしてチェックしてみたのですが、stinger系のテーマは親テーマのfunctions.phpですでにこの条件分岐が記述されているみたいです。なので、自分で条件分岐を追加する必要はなそさそうです。

    それで、その条件分岐を使う場合には「is_mobile」ではなく、「st_is_mobile」という記述で条件分岐できるかと思います(私はまだ検証してませんが。。すみません)ので、一度試してみて下さい。テーマの編集前にはコピー(バックアップ)をしておいていつでも元に戻せるようにしておいて下さいね!!

  5. さーや

    しげぞうさま

    stinger8だとタブレットではスマホ表記になってしまいます。(私の場合スマホとpcサイトが所々混じった感じ)

    stinger8でタブレットでもpc表示にするにはどのようにすればよろしいでしょうか?

    ちなみにstinger8の子テーマを使用しています。

    お返事いただけると幸いです。

  6. 乃風

    しげぞう様

    ありがとうございます。そういうことだったのですね。せっかくなので、他のところも修正しておくことにしました。「header.php」では、下記のように表示されているのですが、1行目の「 exists(‘  」 の次の「 wp_ 」と「&&」の次の「 wp_ 」の2か所を取り除けばいいということなのでしょうか?

    <script async