【初心者向け】スマホ(PC)にだけコンテンツを表示させたい場合はこの方法!【条件分岐】

便利ツール

「PCに表示させているものを、
スマホで見た時には別のものを表示させてたい」

カスタマイズをしていると、
こんな悩みでてきませんか?

これは特に知識がなくても、
簡単にできます。
私にもできたので、
やり方をご紹介します。

スポンサーリンク

これによりできること!

今回のやり方によって出来るものの例としては、
以下のようなものがあります。
①PCとスマホで別々の広告ユニットを表示させたい
②PC(スマホ)にのみ広告を表示させる
③スマホだけサイドバーやメニューバーをなくす

等々やれることを挙げるときりがないですが、
こんなことをすることが出来ます。

ある程度イメージができたでしょうか?

これを知っているのと知らないとでは、
全然違うと思うので、今使わなくても、
これを頭の片隅においておけば、後々便利だと思います。

やり方

条件を付けて何かを動作させることを、
「条件分岐」と言います。

今回の条件分岐では、
スマホを基準として、
以下のコードを使用します。

<?php wp_is_mobile(); ?>

上記のコードは、
『スマホの場合~するようにする』というように、
指示するコードです。

<?php else: ?>
また、上記のコードを使うことで、
『それ以外の場合は、~するようにする』というように、
指示することが出来ます。

スマホにのみ表示させる場合

<?php if(wp_is_mobile()): ?>
【スマホにのみ表示したいもののコードを書く】
<?php endif; ?>

このようにコードを書くことで、
【スマホにのみ表示したいもののコードを書く】に書いたものが
スマホでのみ表示され、PCでは表示されません。

スマホとPCで別のものを表示させる場合

<?php if(wp_is_mobile()): ?>
【スマホに表示したいもののコードを書く】
<?php else: ?>
【PCに表示したいもののコードを書く】
<?php endif; ?>

このようにコードを書くことで、
別々のコンテンツを読み込ませることが出来ます。

PCでのみ表示させる場合

<?php if(!wp_is_mobile()): ?>
【PCにのみ表示したいもののコードを書く】
<?php endif; ?>

これでPCでのみ表示され、
スマホでは、読み込まれません。

上記のコードは一見今までのコードと変わらないようにも見えますが、
wp_is_mobileの前に「!」が入っています。

!が入ることでそれ以外という指示になります。

確認をしてみよう!

コードを記述したら、
スマホ、PCで確認してみましょう。

それぞれきちんと表示されていたでしょうか?

やってみると割と簡単なので、
いろいろと試してみて下さい。

コメント