WEBのこと

WordPressでPCとスマホ表示を分ける最も簡単な方法【コピペOK】

WordpressでPCとスマホ表示を分ける最も簡単な方法【コピペOK】

WordPressでPCとスマホ表示を分ける最も簡単な方法は【wp_is_mobile】を使うことです。

wp_is_mobileは条件分岐タグで、どのデバイスからアクセスされたか判別して表示をさせることができます。

実際にコピペをして使えるコードを置いておくので難しいことはありませんよ。

それでは、《WordPressでPCとスマホ表示を分ける最も簡単な方法【コピペOK】》について書いていきます。

条件分岐タグのwp_is_mobile

条件分岐タグの「wp_is_mobile」を使うことで、スマホ・タブレットとパソコンで表示を変えたいときに、「スマホ・タブレット表示は“A”」「PC表示は“B”」のように切り分けることができます。

似たような方法として「display:block」と「display:none」を使ってメディアクエリで調整するやり方もありますね。

wp_is_mobileはこんな時に使える

  • パソコンとスマホで表示するものを変えたい時
  • パソコン用の広告とスマホ用の広告を変えたい時
  • スライダーをパソコン用とスマホ用で変えたい時

様々な用途が考えられます。

ちなみに、「display:block/display:none」はブラウザの幅で表示が変わるのに対して、条件分岐タグのwp_is_mobileはPC・スマホなど端末で判別して表示されます。

IZ
IZ
wp_is_mobileを使った場合はブラウザ幅を縮めても表示はPCのままってことだな!

広告

wp_is_mobileの使い方(コピペできます)

それでは、コードを確認していきましょう。

 

これだけです。コピペした後にそれぞれ表示させたい内容を記述すればOKです。

パソコンのみに画像を表示させたい時は、PCで表示させたい内容のところに画像パスを書き、スマホで表示させたい内容のところは空欄にしておけば良いです。

「スマホ」と「タブレット・PC」で分けたい時

wp_is_mobileはモバイルとPCで切り替えますが、疑問がありますよね。

タブレットはどっちの表示なの?

はい、タブレットは「モバイル」表示になります。つまり、スマホ側ですね。

ですが、タブレットはPCとして表示させたい時もあります。

広告

タブレットをPCに含ませるのは「is_mobile」(コピペ有り)

タブレットをPC扱いをしたい時は、「is_mobile」という条件分岐タグを自分で作り、実装する必要があります。

▼下記のコードを function.php にコピペしてください▼

 

このコードを function.php に追加することで、「is_mobile」が使用できるようになりました。

次に、条件分岐タグを以下のように指定してあげましょう。

 

先ほど「wp_is_mobile」にしていた部分を「is_mobile」にするだけです。

PCとスマホ表示を分ける方法まとめ

本記事では、《WordPressでPCとスマホ表示を分ける最も簡単な方法【コピペOK】》について書いてきました。

メディアクエリの「display」で表示を切り替えるより、条件分岐タグを使った方が余計なコンテンツを読み込まないので、表示速度的にもプラスです。

コピペで簡単にできますし、コードも短いので是非試してくださいね。