こんにちは！コーダーのゆうしです。
WordPressで商品一覧に「NEW」バッジを付けたり、特定の投稿だけ目立たせたいときに便利なのがACF（Advanced Custom Fields）のチェックボックスを使った条件分岐です。チェックが入っているかどうかでテンプレートの表示を切り替えられるので、運用側がコードを触らずに表示を管理できる仕組みが作れます。この記事では2つの実装パターンを解説します。
ACFのインストール
まだACFを導入していない場合はWP管理画面の「プラグイン」→「新規プラグインを追加」で「ACF」と検索してインストール・有効化してください。
↑ こちらです。
プラグイン公式ページからのダウンロードはこちら → Advanced Custom Fields
※ 2024年末ごろからACFは「Secure Custom Fields（SCF）」に名称が変更されています。機能は同じなので、SCFと表示されていても同じように使えます。
フィールドグループの設定
ACFの管理画面でフィールドグループを作成し、フィールドタイプに「真/偽」を選択します。今回は商品紹介ページに「NEW」バッジを付ける・付けないの切り替えを想定してフィールド名を new として設定します。
設定を保存すると投稿編集画面にチェックボックスが表示されます。
’フィールドグループが表示されない場合は「このフィールドグループを表示する条件」の設定を確認してください。
実装コード
チェックボックスの値を使った条件分岐は2つのパターンで書けます。用途に応じて使い分けてください。
パターン①：シンプルな表示切り替え
コンテンツが短い場合やシンプルな表示切り替えに向いています。
<?php
$checked = get_field('new'); // フィールド名 'new' の値を取得
if ( $checked ) {
// チェックが入っている場合の処理
echo '<img src="/img/new.png" alt="NEW">';
}
if ( ! $checked ) {
// チェックが入っていない場合の処理
}
?>get_field('new') でチェックボックスの値を取得します。チェックが入っている場合は true、入っていない場合は false が返ります。
パターン②：コンテンツが長い場合の書き方
表示切り替えするHTMLが長い場合はこちらのほうが管理しやすいです。
<?php $value = get_post_meta( $post->ID, 'new', true ); ?>
<?php if ( ! empty( $value ) ) : ?>
<!-- チェックが入っている場合に表示するエリア -->
<div class="new-badge">
<img src="/img/new.png" alt="NEW">
</div>
<?php else : ?>
<!-- チェックが入っていない場合に表示するエリア -->
<?php endif; ?>get_post_meta() でカスタムフィールドの値を取得して empty() で判定する書き方です。HTMLが長くなる場合でもPHPとHTMLを分けて書けるので可読性が上がります。'new' の部分はACFで設定したフィールド名に変更してください。
パターン①とパターン②の使い分け
| パターン① | パターン② | |
|---|---|---|
| 向いているケース | 短い出力・画像1枚など | HTMLが長い・複数要素の切り替え |
| 値の取得方法 | get_field() | get_post_meta() |
| 記述量 | 少ない | 多いが見通しがよい |
どちらを使っても動作は同じです。コンテンツの量に応じて使い分けてください。
get_field()とget_post_meta()の違い
パターン①で使っている get_field() はACF専用の関数、パターン②の get_post_meta() はWordPress標準の関数です。
// ACF専用関数
$checked = get_field('new');
// WordPress標準関数
$checked = get_post_meta( $post->ID, 'new', true );どちらも同じ値を取得できますが、ACFを使っている場合は get_field() のほうがシンプルに書けます。
アーカイブページでの絞り込みも可能
チェックボックスの値を使ってアーカイブページでNEWが付いている投稿だけを表示することもできます。WP_Queryの meta_query と組み合わせてください。詳しくはこちらの記事を参考にしてください。
→ ACFの真/偽フィールドでチェックした投稿だけ表示する方法
躓きやすいポイント
チェックを入れても表示が切り替わらない
フィールド名が間違っている可能性があります。get_field() や get_post_meta() に渡しているフィールド名がACFで設定したフィールド名と完全に一致しているか確認してください。
フィールドグループが投稿ページに表示されない
ACFのフィールドグループ設定の「表示条件」が正しく設定されているか確認してください。対象の投稿タイプに表示する条件になっているかチェックしてみてください。
get_post_meta()でempty()の判定がおかしい
チェックが入っている場合 get_post_meta() は '1' を返し、入っていない場合は ''（空文字）または '0' を返します。empty('0') は true を返すので判定がおかしくなることがあります。その場合は get_field() を使うほうが直感的に書けます。
まとめ
ACFのチェックボックス（真/偽フィールド）を使うと投稿ごとに表示の切り替えをコードを触らずに管理できます。シンプルな表示切り替えはパターン①の get_field()・HTMLが長い場合はパターン②の get_post_meta() と使い分けてみてください。「NEW」バッジのほかにも「おすすめ」「売り切れ」「非表示」など応用の幅が広いので積極的に活用してみてください。
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
