シュウ

今回は【WordPress】ACFの条件分岐で入力がある場合のみ表示する方法についての解説になります！

こんな方に読んでほしい

• 期間限定キャンペーンページを作るWeb担当者へ
• 入力が空のときにレイアウト崩れで困っている方へ
• WordPressで柔軟な表示制御をしたい方へ

ACFの条件分岐について

ACF（Advanced Custom Fields）を使うと、投稿や固定ページに自由に項目を追加できます。
しかし、入力がない場合にも表示されてしまうと、見た目やユーザー体験に影響が出てしまいます。
そこで活用したいのが「条件分岐」です。

入力されていない項目をそのまま表示すると、空白や不自然なレイアウトが発生します。
条件分岐を使うことで、必要な情報だけをきれいに表示することができます。

コードの仕組みについて

入力がある場合のみ表示する基本的なコードを見ていきましょう。
コードはシンプルです。

<?php if(get_field('cat')): ?>
<div class="data-cat"><?php the_field('cat'); ?></div>
<div class="data-day"><?php the_field('day'); ?></div>
<?php endif; ?>

今回は、catの入力がある場合、ない場合の表示、非表示のコードになります。

2つのフィールドの場合の条件分岐について

先ほど、コードに少し足すことで、2つのフィールドに入力がない場合に、表示、非表示にする方法になります。
全体のコードは以下になります。

<?php if(get_field('cat') && get_field('day')): ?>
<div class="data-cat"><?php the_field('cat'); ?></div>
<div class="data-day"><?php the_field('day'); ?></div>
<?php endif; ?>

今回は、cat、dayの入力がある場合に表示します。それ以外は、非表示のコードになります。

片方だけ入力されている場合に対応する方法

場合によっては、どちらか一方が入力されていれば表示したいケースもあります。
その場合は条件を変更します。

<?php if(get_field('cat') || get_field('day')): ?>
<div class="data-cat"><?php the_field('cat'); ?></div>
<div class="data-day"><?php the_field('day'); ?></div>
<?php endif; ?>

|| を使うことで「どちらかが入力されていれば表示」になります。

オススメの記事

Advanced Custom Fieldsの始め方

WordPressのカスタムフィールドについて

まとめ

今回はこれで以上です。
ACFの条件分岐を使うことで、入力状況に応じた柔軟な表示制御が可能になります。
特に「空の場合は表示しない」という処理は、見た目の品質を保つ上で非常に重要です。

今回紹介したコードをベースに、用途に応じて「AND（&&）」と「OR（||）」を使い分けてみてください。
少しの工夫で、より使いやすく、きれいなサイトを実現できます。

< 前の記事

【WordPress】指定日時を過ぎたらページを自動で404にする方法