【WordPress】カスタムフィールドが空だった場合コンテンツごと表示させない処理

どうも、くまだです。

WordPress制作案件で、カスタムフィールドを簡単に作成できるプラグイン「Custom Post Type UI」を利用することが多いです。場合によってはカスタムフィールドの値が空のときコンテンツごと出力させたくない場合があります。そのときに使えるネタです。

下はif文系の過去記事です。

【WordPress】アイキャッチ画像がない場合ダミー画像を出力させる

WordPressでブログ記事一覧ページや記事詳細ページでよく見かけるアイキャッチ画像が登録されていない場合、ダミー画像を出力させるネタです

weblife.ppmp556.com

【WordPress】トップヘッダーと下層ヘッダーをif文で出しわける

WordPressのオリジナルテーマを使ったサイト制作をやっていると、トップヘッダーと下層ヘッダーのデザインや色が違うことがあります。そのあたりの対処は「if文」を使って…

weblife.ppmp556.com

カスタムフィールドが空のとき、表示させない処理

通常、カスタムフィールドを使う場合は以下のように書きます。

• get_field(‘カスタムフィールドの値’)

カスタムフィールドの値のところは、Custom Post Type UIプラグインで任意に設定できます。

実際にコードに当てはめると、次のとおりです。

<div class="imgbox">
  <img src="<?php echo get_field('カスタムフィールドの値'); ?>" alt="">
</div>

画像が設定されていれば、そのまま画像が出力されます。画像が出力されていない場合は、

• empty()：変数が空かどうかを調べる関数

を使用します。

<?php $img = get_post_meta($post->ID, 'test_img', true); ?>

<?php if (empty($img)) : ?>
　// カスタムフィールドが空だったら空で表示
　// なにも記述しない

<?php else : ?>
 // カスタムフィールドが空でなかったら表示
　<div class="imgbox">
  　<img src="<?php echo get_field('カスタムフィールドの値'); ?>" alt="">
  </div>
<?php endif; ?>

上記の場合、画像があれば出力し、画像がなかったらコンテンツごと表示させない処理です。

ifとelseを逆にしたいのであれば、「!」を使ってもいいです。

<?php $img = get_post_meta($post->ID, 'test_img', true); ?>

<?php if (!empty($img)) : ?>
　 // カスタムフィールドが空でなかったら表示
　<div class="imgbox">
  　<img src="<?php echo get_field('カスタムフィールドの値'); ?>" alt="">
  </div>
<?php else : ?>
  // カスタムフィールドが空だったら空で表示
　// なにも記述しない
<?php endif; ?>

!emptyで空でなかったら、になります。

画像が表示されていないとき、そこの部分だけ空白になってレイアウト的に不格好になります。なので、画像がなかったらコンテンツごと非表示にします。（その場合隣のコンテンツがつまってくるはず）

たまに案件で使うのでメモ。

ここまで読んでくださりありがとうございました。