2020年06月06日

PCとスマホでの出力を分ける方法(WordPress編)

お世話になっております。SeekNextの佐藤です。
今回はWordPressにおいて「PCとスマホでの出力を分ける方法」を書いていきたいと思います。

PCとスマホでの見た目を分けたい際に最も使用されている方法はCSSのメディアクエリにて区別する方法だと思います。

CSSでのメディアクエリの例

@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }
}

基本的には以上の方法で事足りると思いますが、時にはこれではうまく行かないことがあります。CSSのメディアクエリで出し分けるを行うとコード自体はブラウザに出力されることになるので、コードそのものをレスポンスさせたくない場合などは対応出来ません。
基本的には見た目上の対策になります。

簡単にPCとスマホの出力を切り替えが可能な関数「wp_is_mobile()」

そんな時に使用できるのが「wp_is_mobile()」関数になります。
この関数を使用することで簡単に出し分けることが可能です。

wp_is_mobile()の使用方法

ユーザーの端末がスマホであれば、true、そうでなければ、falseを返します。実際の使用方法としてはif,elseで分けてあげるだけです。

<?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?>

いかがでしょうか?簡単に実装可能なことがお分かり頂けると思います。

基本的にはメディアクエリで出しかけることがほとんどだと思いますが、コード自体の出力を分けたい場合は是非使用してみてください。