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

どうも、くまだです。

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

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

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

  • 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で空でなかったら、になります。

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

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

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

この記事を書いた人