「wp_is_mobile」パソコン・スマホで表示されるWEBページを切り替える

wpismobile-switch-min

WordPressをカスタマイズするときによく使うタグが「wp_is_mobile」です。このタグを使えばパソコンでWEBページを見たときの表示と、スマホでWEBページを見たときの表示を使い分けすることができます。

SPONSORED LINK

例えば、このようなときに使えるという便利なタグです。

  • 「パソコンとスマホで広告の種類を切り替えたい」
  • 「パソコンだけに表示したいパーツがある」
  • 「スマホだけに表示したいパーツがある」

コードを記述

書き方は簡単、以下のコードを表示させたい場所に追記するだけです。たったこれだけで表示切り替えが可能なんです。

<?php if ( wp_is_mobile() ) : ?>
スマホ・タブレットで表示したい内容
<?php else: ?>
パソコンで表示したい内容
<?php endif; ?>

このようにとっても簡単ですが、1つ気を付けたいことがあります。

スマホとタブレット端末の表示は一緒の扱いです。スマホとタブレット端末、iPhoneやKindle端末と分ける方法はあるにはあるようですが、その場合他にコードを追記する必要があります。

以下は「パソコンだけで表示したい」、「スマホ・タブレットだけで表示したい」場合のコードです。

<?php if ( wp_is_mobile() ) : ?>
パソコンだけで表示したい内容
<?php endif; ?>
<?php if ( wp_is_mobile() ) : ?>
スマホ・タブレットだけで表示したい内容
<?php else: ?>

まとめ

このコードはよく使うので、自分の備忘録として記事にしてみました。便利で簡単なおすすめカスタマイズ・コードです。

SPONSORED LINK