Advanced Custom Fields で値が設定された時だけ表示する

Advanced Custom Fields(ACF)を使うと投稿に対してカスタムフィールドを追加し、様々な値を設定できるようになります。

どの投稿にも同じ情報を入力できれば良いのですが、そうもいかない場合もあるので、入力されていない項目は非表示にする必要があります。

たとえば、書籍(books)という投稿タイプを作り、カスタムフィールドとしてページ数(page)大きさ(size)重さ(weight)を設定した場合、書籍によっては重さが不明だったりするので未入力にします。

下記のように値をdiv要素で囲んでいる場合、未入力だった場合でも、div要素は表示されてしまうのでスタイルが組みづらかったりなど問題が出てきます。

<div class="weight"><?php the_field('weight'); ?></div>

そういう場合は下記のように条件分岐をして設定をすると良いです。

<?php if( get_field('page') ): ?>
<div class="page"><?php the_field('page'); ?></div>
<?php endif; ?>

<?php if( get_field('size') ): ?>
<div class="size"><?php the_field('size'); ?></div>
<?php endif; ?>

<?php if( get_field('weight') ): ?>
<div class="weight"><?php the_field('weight'); ?></div>
<?php endif; ?>