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

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

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

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

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

  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. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。ブログのオープンおめでとうございます。今後も時々遊びにいきますね。また何か分からない部分などあればいつでもコメント下さい。今後もよろしくお願い致します。

  7. 乃風

    しげぞう様

    おはようございます、しげぞうさん。

    今日、無事に自分のブログをオープンさせました。この3か月間、色々と本当にありがとうございました。時々遊びに来てくださいね。今後もまたお世話になることがあると思います。よろしくお願いします。

  8. 乃風

    しげぞうさま

    いつもお世話になっております。header.phpの変更、うまくいったみたいです。よかったです。それから、「ニックネームでもかまいません。」の挿入もうまくいったのですが、ただ直前の説明文字が小さくて、見た目、合わない気がしたので、「お名前」と「※」の間に入れてみました。こんな感じです、「お名前※」→「お名前またはニックネーム※」と。これなら文字の大きさを変更しなくてもいい感じなので、これでいくことにしました。ありがとうございました。

    それと、例の支払いの設定、まだ何の動きもないんです。設定出来たらご報告にきますね。

  9. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。そうですね、その2箇所を変更してみて下さい。PC表示では変化はないと思いますが、もしPCの表示でも変化があればどこかミスがあるかもしれませんので、保存したら一度確認してみてください。

  10. しげぞう 投稿作成者

    乃風様

    以前コメント欄のカスタマイズで「comments.php」に「お名前」に変更した部分があると思います。この後の部分に追加してこのような形にすればOKと思います。

    <?php
    $comments_args = array(
        'fields' => array(
            'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'お名前' ) . ( $req ? ' <span class="required">*</span>ニックネームでもかまいません' : '' ) . '</label> ' .

    なので、この「author」という項目の部分を見つけて書き直しして見て下さい。

  11. 乃風

    しげぞう様

    いつもありがとうございます。送信されてなかったのかどうかわからないので、再度お送りします。重複していたらすみません。

    「コメントをどうぞ  メールアドレスが公開されることはございません。※がついている欄は必須項目です。」の次に「お名前※」が表記されているのですが、そのすぐ後に「ニックネームでもかまいません。」と入れたいのですが、comments.phpに、どのように書き加えたらいいのでしょうか?

  12. 乃風

    しげぞう様

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

    <script async

  13. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。厳密にはアドセンス設置したファイルは全て修正しておいた方が良いです。「single.php」だけでなく、「header.php」などもアドセンスを設置し、条件分岐した部分は修正しておいて下さい。ただ、修正はしなくても表示自体に問題があるわけではなく、あくまでタブレットでどう表示させるかの問題になります。スマホと同じ表示にするのかPCと同じ表示にするのかの違いです。

  14. 乃風

    しげぞうさま

    いつもありがとうございます。「single.php」での分岐の最終訂正、うまくいきました。うまくいった・・・というより、うまくいったと思います・・・と言ったほうがいいかも。実は、私、タブレットももってないので、確認できないんですぅぅぅぅぅぅ。訂正箇所は、1か所だけでよかったんですよね? 他に見当たらなかったもので。

  15. 乃風

    しげぞう様

    いつもありがとうございます。 え? アドセンスを設置した「single.php」だけでいいのですね。そうでしたかぁ~・・・。気持ちが少し楽になりました。私は、「single.php」をはじめ、「page.php」「index.php」それに、もしかしたらスマフォの「header」も? と思い、で、また最後に「functions.php」なのかなぁ~・・・などとあれこれと考えてしまいました。お聞きしてよかったです。よかったぁ~~~~~~~~~~~~! 気持ちを落ち着けて、とにかく今、行ってきます。

  16. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。「is_mobile」に修正するのはアドセンスを条件分岐した部分ですので、アドセンスを設置した「single.php」だけでOKです。アドセンスを設置したコードの条件分岐だけを変更してみて下さい。

  17. 乃風

    しげぞうさんへ

    いつもお世話になっております。

    行ったり来たりしているうちに、なんのことなのか分からなくなってしまいました。ここの記事にあったfunctions phpへのコピぺは終わりました。最後の部分がよく分からなかったので、教えてください。ここの記事で、「後は前回アドセンスの設置で利用した「wp_is_mobile」という部分を「is_mobile」に修正すれば「PC&タブレット」と「スマートフォン」を分けることができるという訳。」と書いてあったのですが、どのphp上で、「wp_is_mobile」を「is_mobile」に修正すればいいのでしょうか? よろしくお願いします。

  18. 乃風

    しげぞう様

    いつもお世話になっております。

    もう、functions.phpには、こりました。だって、今回で2度目ですからねぇ~。初心者には、ほんと堪えますよ、あの真っ白画面は。うふふふふふふふ。下記のコピペのコードを見て、やっぱりそういうことだったのかぁ~・・・と気づきました。ありがとうございました。

    コンテンツを増やすのですね。はい、分かりました。私のURLがよみがえった昨日、実は、私もそう思いました。

  19. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。functions.phpはちょっとしたコードのミスでエラーがでますので、コードはそのままコピペして下さい。

    <?php
     
    /**
     * Sets the post excerpt length to 40 words.
     * ’続きを読む’
     * To override this length in a child theme, remove the filter and add your own
     * function tied to the excerpt_length filter hook.
     */
    function twentytwelve_excerpt_length( $length ) {
    	return 40;
    }
    add_filter( 'excerpt_length', 'twentytwelve_excerpt_length' );
    
    if ( ! function_exists( 'twentytwelve_continue_reading_link' ) ) :
    /**
     * Returns a "Continue Reading" link for excerpts
     */
    function twentytwelve_continue_reading_link() {
    	return ' <a href="'. esc_url( get_permalink() ) . '">' . __( '続きを読む <span class="meta-nav">→</span>', 'twentytwelve' ) . '</a>';
    }
    endif; // twentytwelve_continue_reading_link
    
    /**
     * Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and twentytwelve_continue_reading_link().
     *
     * To override this in a child theme, remove the filter and add your own
     * function tied to the excerpt_more filter hook.
     */
    function twentytwelve_auto_excerpt_more( $more ) {
    	return ' …' . twentytwelve_continue_reading_link();
    }
    add_filter( 'excerpt_more', 'twentytwelve_auto_excerpt_more' );
    
    /**
     * Adds a pretty "Continue Reading" link to custom post excerpts.
     *
     * To override this link in a child theme, remove the filter and add your own
     * function tied to the get_the_excerpt filter hook.
     */
    function twentytwelve_custom_excerpt_more( $output ) {
    	if ( has_excerpt() && ! is_attachment() ) {
    		$output .= twentytwelve_continue_reading_link();
    	}
    	return $output;
    }
    add_filter( 'get_the_excerpt', 'twentytwelve_custom_excerpt_more' );
    
    /**
     * Makes our wp_nav_menu() fallback -- wp_page_menu() -- show a home link.
     *
     * @since Twenty Twelve 1.0
     */ 
    
    
    //jquery
    if (!is_admin()) {
        function deregister_script(){
             wp_deregister_script('jquery');
           
            
        }
        function register_script(){
            wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
            wp_register_script( 'scroll-top', get_stylesheet_directory_uri() . '/js/scroll-top.js', array( 'jquery' ), '', true);
            
            
        }
        function add_script() {
            deregister_script();
            register_script();
           wp_enqueue_script('jquery');
            wp_enqueue_script('scroll-top');
            
                }
        add_action('wp_enqueue_scripts', 'add_script');
    }
    
    
    
    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']);
    }
    
    
    ?>
  20. しげぞう 投稿作成者

    乃風様

    フッターメニューに関しては絶対に必要という訳ではないので、無くてもOKですし、アドセンス申請していなくても特に問題はありません。ただ、フッターメニューには人気記事一覧などの設置も書いてますので、先にコンテンツをどんどん作成して行くことをおすすめします。カスタマイズはほぼ終わっていると思いますので、まずはコンテンツを増やすと良いかと思います。

  21. 乃風

    URL、復活しました! 人騒がせですみません。「スマートフォンページのフッターに固定メニューを作成してみました」は、アドセンス申請しはじめてからの方がいいみたいですね。ようやくそれがここの記事で分かりました。今後もよろしくお願します。

  22. しげぞう 投稿作成者

    >モース様

    わざわざ報告ありがとうございます。WordPress関連の記事もまだまだ記事にできそうな部分が多いですね。また今後も記事を追加していきますのでよろしくお願い致します。また分かりにくい部分等あればコメントで指摘していただけるとありがたいです。どうぞよろしくお願いいたします。

  23. モース

    しげぞうさんおはようございます。
    さっそく試させていただきました。
    完璧です。
    本当にありがとうございすm(_ _)m
    私は格好から入るタイプの人間ですので、デザイン等にある程度納得いかなければ、前に進めなくなってしまうのです(笑)
    これでコンテンツ作りに集中できます!
    今後とも宜しくお願い致します。