Sossyの助太刀ブログ 
今、ブログを始めようとしている方、
今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF！
「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております！
お申し込みはこちらから！
ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます！
(この記事は2021年11月14日に投稿されました。)
WordPressでPCとスマホで処理を分けたい場合にGoogleで検索するとis_mobile()という関数が出てくるかと思います。
is_mobile()はPCかスマートフォンのどちらかを区別して処理を行うことができる関数なのですが、自分で関数を作成する必要があります。
しかし、WordPress内の関数にはデバイスを区別して処理を行うことができる「wp_is_mobile()」というものがあります。
どちらの関数もPCとスマホで区別をして処理を行えるのですが、タブレットで表示した時にはis_mobile()では「PC」として、wp_is_mobile()では「スマホ」として認識するようになります。
そのため、今回はwp_is_mobile()とis_mobile()をWordPress内で比較してみましたので紹介していきます。
wp_is_mobile()とは
wp_is_mobile()とは接続した端末がPCかスマートフォンのどちらかを区別して処理を行うことができる関数になります
wp_is_mobile()はWordPressが準備している既存の関数になりますので、すぐに呼び出して使用することができます。
また、wp_is_mobile()はタブレットで表示するとスマホ扱いとなって表示されるようになります。
wp_is_mobile()はPCかスマートフォンのどちらかを区別して処理を行うことができるWordPressの関数になります。
しかし、WordPressの投稿ページや固定ページに直接書いても使用できませんので注意してください。
is_mobile()とは
is_mobile()も同様に、PCかスマートフォンのどちらかを区別して処理を行うことができる関数になります。
wp_is_mobile()と違ってこちらは、WordPressでは用意されていない関数でになりますので、自分で関数を作成する必要があります。
もし、is_mobile()について詳しく知りたい場合はこちらの記事をご参考ください。
is_mobile()も同様にPCかスマートフォンのどちらかを区別して処理を行うことができますが、WordPressにはない関数になります。
そのため、自ら関数を作成しないと使用することができません。
また、こちらもWordPressの投稿ページや固定ページに直接書いても使用できませんので注意してください。
wp_is_mobile()とis_mobile()で比較してみた
wp_is_mobile()とis_mobile()はどちらが使いやすいのでしょうか？
ここではWordPress内のTOPページ、投稿ページ、固定ページ、カテゴリーページ内でwp_is_mobile()とis_mobile()を使用するとどうなるのか比較してみます。
wp_is_mobile()とis_mobile()をTOPページで比較
まずは、wp_is_mobile()とis_mobile()をTOPページで比較してみます。
TOPページである「front-page.php」に下記のコードを追記します。
■ front-page.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class= "divbox1"> <?php if (wp_is_mobile() ): ?> <p>wp_is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>wp_is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <div class= "divbox2"> <?php if ( is_mobile() ): ?> <p>is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <style> .divbox1, .divbox2 { text-align: center; height: 400px; font-size: 20px; } </style> |
■ 実行結果(PCで表示した場合)
■ 実行結果(スマホで表示した場合)
■ 実行結果(タブレットで表示した場合)
PC画面とスマホ画面では問題はないようですが、タブレット画面ではwp_is_mobile()は「wp_is_mobile()でスマホの画面に表示されている」が表示され、is_mobile()は「is_mobile()でPCの画面に表示されている」が表示されています。
そのため、TOPページでタブレット画面ではwp_is_mobile()だと「スマホ」として、is_mobile()だと「PC」として認識されるようになります。
wp_is_mobile()とis_mobile()を投稿ページで比較
続いて、wp_is_mobile()とis_mobile()を投稿ページで比較してみます。
投稿ページである「single.php」に下記のコードを追記します。
■ single.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class= "divbox3"> <?php if (wp_is_mobile() ): ?> <p>wp_is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>wp_is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <div class= "divbox4"> <?php if ( is_mobile() ): ?> <p>is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <style> .divbox3, .divbox4 { text-align: center; height: 400px; font-size: 20px; } </style> |
■ 実行結果(PCで表示した場合)
■ 実行結果(スマホで表示した場合)
■ 実行結果(タブレットで表示した場合)
やはり、投稿ページでもタブレット画面ではwp_is_mobile()だと「スマホ」として、is_mobile()だと「PC」として認識されるようになります。
wp_is_mobile()とis_mobile()を固定ページで比較
続いて、wp_is_mobile()とis_mobile()を固定ページで比較してみます。
固定ページである「page.php」に下記のコードを追記します。
■ page.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class= "divbox5"> <?php if (wp_is_mobile() ): ?> <p>wp_is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>wp_is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <div class= "divbox6"> <?php if ( is_mobile() ): ?> <p>is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <style> .divbox5, .divbox6 { text-align: center; height: 400px; font-size: 20px; } </style> |
■ 実行結果(PCで表示した場合)
■ 実行結果(スマホで表示した場合)
■ 実行結果(タブレットで表示した場合)
やはり、固定ページでもタブレット画面ではwp_is_mobile()だと「スマホ」として、is_mobile()だと「PC」として認識されるようになります。
続いて、wp_is_mobile()とis_mobile()をカテゴリーページで比較してみます。
カテゴリーページである「category.php」に下記のコードを追記します。
■ category.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class= "divbox7"> <?php if (wp_is_mobile() ): ?> <p>wp_is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>wp_is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <div class= "divbox8"> <?php if ( is_mobile() ): ?> <p>is_mobile()でスマホの画面に表示されている</p> <?php else: ?> <p>is_mobile()でPCの画面に表示されている</p> <?php endif; ?> </div> <style> .divbox7, .divbox8 { text-align: center; height: 400px; font-size: 20px; } </style> |
■ 実行結果(PCで表示した場合)
■ 実行結果(スマホで表示した場合)
■ 実行結果(タブレットで表示した場合)
やはり、カテゴリーページでもタブレット画面ではwp_is_mobile()だと「スマホ」として、is_mobile()だと「PC」として認識されるようになります。
wp_is_mobile()とis_mobile()は組み合わせて使うべき
wp_is_mobile()とis_mobile()で比較を行った結果、タブレットの画面で違いがあることが分かりましたが、結局はどちらを使う方が良いのでしょうか？
個人的にはどちらかの関数に統一するのではなく、組み合わせて使うべきだと思います。
なぜなら、タブレット画面ではスマホの要素もあれば、PCの要素もあるからです。
昔のタブレットはスマホよりも少し大きめな端末機だったのでwp_is_mobile()で分岐できたのですが、最近ではタブレットをPCにする人も増えてきているので、それに合わせてis_mobile()を使用する人も増えてきています。
そのため、「タブレット画面でのメニューはスマホと同じようにしたいのでwp_is_mobile()を、記事の並びやサイドバーをPCと同じように表示したいのでis_mobile()を使用する」
というように組み合わせて使っていくとタブレットの画面の設定がしやすくなるかと思います。
以上のことから、wp_is_mobile()とis_mobile()は組み合わせて使うべきです。
まとめ
⚫︎ wp_is_mobile()とは接続した端末がPCかスマートフォンのどちらかを区別して処理を行うことができるWordPress関数
⚫︎ is_mobile()も同様に、PCかスマートフォンのどちらかを区別して処理を行うことができるWordPress外の関数
⚫︎ is_mobile()でPCとスマホの処理を分岐させるには「functions.php」にis_mobile()を追記し、処理を分岐させたい箇所にコードを追記する
⚫︎ wp_is_mobile()とis_mobile()で比較してみた結果、タブレット画面で違いがある
(wp_is_mobile()だと「スマホ」としてis_mobile()だと「PC」として認識する)
⚫︎ wp_is_mobile()とis_mobile()は組み合わせて使うべき
