Wordpressカスタマイズ

【条件分岐】覚えておきたい「”この場合”は”これ”を表示!」がしたいIF文の使い方

WordPressのカスタマイズをしてとても役立つIF文による条件分岐をご紹介します。レスポンシブ時にだけ表示したい、PCブラウザにだけ表示したい、など使い分けたい場合にご活用できます。

なぜ条件分岐が必要なのか?

昨今のサイト制作において、PCブラウザとレスポンシブ(スマホ)のデザインを分けて制作することが多く、デザイン上、両環境において必要不必要なものがどうしても発生してしまいます。
その場合にテーマ内のテンプレートファイルに少し記述することで、コンテンツの出し分けが簡単にできますので、サイズ違いの広告やメニューやウィジェットなどに使うととても便利です。

基本的なPHP IF文の書き方

色々書き方はありますが、こちらがが基本型になります。
<?php if (条件A) :>

<?php endif; >
簡単に解説すると、
「条件A」のときは赤字のコードを表示する
ということのみを記述しています。
「この場合はこれ!」ということだけが指定されているのみで、それ以外の条件(そうではなく条件Bの場合、それ以外の場合)に対する記述は一切ありません。
最も簡単なIF文ですがこの基本形からスタートします。
まずはこの形さえ覚えてしまえばあとは応用なので難しいことはありません。
基本的にはこの”条件式A”のところを変えて行くだけです。
慣れてくればelseやelseifを使って(条件式B)の場合は、という分岐を使ってさらに絞り込んでコンテンツを出し分けることができます。

よく使うサンプル

ホームに表示する
(※投稿記事ページには表示しない)

<?php if ( is_home() : ?>
<p>ここはホームです!</p>
<?php endif; ?>

投稿記事ページに表示する場合
(※ホームには表示しない)

<?php if ( is_single() : ?>
<p>ここは記事ページです!</p>
<?php endif; ?>

レスポンシブ(スマホ)のみに表示する場合
(※PCブラウザには表示しない)

<?php if ( wp_is_mobile() : ?>
<p>ここは記事ページです!</p>
<?php endif; ?>

PCブラウザのみに表示する場合
(※レスポンシブ(スマホ)には表示しない)

<?php if ( !wp_is_mobile() : ?>
<p>ここは記事ページです!</p>
<?php endif; ?>

↑wp_is_mobile()の前に” ! “をつけることにより否定の意味になります。
つまり、「スマホではない場合=PCの場合」という意味の条件にすることができます。

少し応用してみる

レスポンシブ(スマホ)のホームのみに表示する

<?php if ( is_home() && wp_is_mobile() : ?>
<p>ここはスマホのホームです!</p>
<?php endif; ?>

↑&&をつけることで、◎◎かつ(&&)◎◎という複数条件を指定することができます。

PCホームにはAを、スマホホームにはBをそれ以外のページではCを表示する

<?php if ( is_home() && !wp_is_mobile() : ?>
<p>A(ここはPCのホームです!)</p>
<?php elseif ( is_home() && wp_is_mobile() : ?>
<p>B(ここはスマホのホームです!)</p>
<?php else : ?>
<p>C(それ以外の全てのページ)</p>
<?php endif; ?>

↑elseifを使うことで、最初の条件ではなく、別の条件の場合という連結ができます。そしてelseを使ってそのどちらの条件にも当てはまらない全ての場合に対して記述記述をすることができます。

基本的なPHP IF文の条件式によるコンテンツの出し分けはこんな感じになります。基本的にはwordpressで決まっている条件分岐タグを使えば問題ないでしょう。もちろんPHPがわかれば自分で変数を作って条件に使ってもいいですね。
https://wpdocs.osdn.jp/条件分岐タグ

広告タグやアフィリエイトタグなどを出し分けてレイアウトに納まるようにコンテンツを出し分けたいときなどにとても便利です。どうしても管理画面や設定ではうまくできないときは自分で条件分岐を使って出し分けてみましょう。

WordPressやテンプレートのカスタマイズまとめ

[st-card id=1831 label=”” name=”” bgcolor=”” color=”” readmore=”on”]