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

前回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とタブレットで同じ広告が表示されて、スマートフォンと分けることができます。

しげぞうより:

2016年12月6日 9:39 PM

さーや様

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

さーやより:

2016年12月4日 3:29 PM

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

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

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

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

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

しげぞうより:
2016年12月6日 9:39 PM
さーや様
コメントありがとうございます。私自身stingerはあまり使った事がないのでよく分からないのです、すみません。stinger系のテーマは使っている方が多いので、検索すれば欲しい情報が見つかるかもしれません。もしどうしてもという場合には何か参考のサイトとさーや様のサイトを教えて下さい。検証まではできませんが、何かアイディアは出せるかもしれません、ブログのURLはコメント公開時には削除しますのでどうぞよろしくお願い致します。
さーやより:
2016年12月4日 3:29 PM
stinger8のアコーディオンメニュー(スマホ)のカスタマイズができません（泣）
知識のない私が悪いのですが、 st-accordion-menu.phpを見てもいじり方がさっぱりです。
メニューバー？(　三　←こんなの)を横幅いっぱいに表示して「MENU」という文字を入れたり、枠線を実線にしたりなど、いろいろデザインを変えたいです。
現在stinger8の子テーマを使用しており、デフォルトでは一番右上に表示されるアコーディオンメニューを、ブログタイトルの下に移動させております(必要ない情報かもしれませんが)。
よければご教授お願い致します。

« 前へ 12