WordPress には便利な条件分岐タグが色々と存在します。条件分岐タグとは、テーマファイル内で出力する内容や特定の記事内容を表示する条件を設定する時に使う関数のことです。
その中でも今回は接続元の端末がモバイルなのかPCなのかを判別して、それぞれに適した要素を表示させる方法をご紹介いたします。
モバイルとPCで異なる要素を出力する方法
接続元の端末を判別するには、wp_is_mobile() という関数を使います。
wp_is_mobile() は、WordPress3.4 以降で実装された条件分岐タグで、これを記述するだけで接続元のユーザーエージェントを認識してくれます。なんとも優れものですね。
もっと詳しく知りたいという方は、公式リファレンスをご参照ください。
実際にどうやって分岐させるのかというと、以下のコードをテーマファイル内に記述します。
<?php if (wp_is_mobile()) : ?> // モバイル向けの要素 <?php else: ?> // PC向けの要素 <?php endif; ?>
モバイルならモバイル向けの要素を、それ以外は PC 向けの要素を出力しなさい、という内容になります。シンプルですね。
wp_is_mobile() を使えば、モバイルと PC でサイズの違った広告を出したり、モバイルだけサイドバーの出力を停止したりといったことが簡単にできちゃいます。
注意点
1つだけ注意点があって、wp_is_mobile() を使うと、iPad もモバイル端末として認識されます。なので、スマートフォンだけ表示を変えるといった細かい指定はできません。
スマートフォンだけを判別したい場合は、こちらの記事をご参照ください。
あとがき
モバイルと PC の判別がこんなに簡単にできちゃうなんて、ほんと WordPress って便利ですね。モバイルと PC で出力する内容を変えたい時にはぜひ活用してください。