【WordPress】カスタムフィールドの入力有無に応じて表示を切り替える方法

WordPressでは、カスタムフィールドを使って投稿や固定ページに任意の情報を追加できます。例えば、商品情報やイベントの詳細など、カスタムフィールドに入力があるかどうかで表示内容を切り替えることで、柔軟なコンテンツ設計が可能になります。

この記事では、カスタムフィールドの入力有無に応じて表示を動的に切り替える方法を、実用例を交えながらわかりやすく解説します。

カスタムフィールドの値を取得する
値の有無で表示を切り替える
値が未入力の場合に代替テキストを表示する
実用例：価格が未入力なら「お問い合わせください」
実用例：イベント開催日が未定の場合の表示
まとめ

カスタムフィールドの値を取得する

まず、WordPressの関数 get_post_meta() を使用して、カスタムフィールドの値を取得します。

<?php
$custom_field_value = get_post_meta(get_the_ID(), 'custom_field_key', true);
?>

ここで 'custom_field_key' は実際に使用しているカスタムフィールドのキー名に置き換えてください。

値の有無で表示を切り替える

取得した値が空でない場合にだけ表示を行いたい場合は、以下のように記述します。

<?php
$custom_field_value = get_post_meta(get_the_ID(), 'custom_field_key', true);

if (!empty($custom_field_value)) {
    echo '<div class="custom-field">';
    echo '<h3>カスタムフィールドのタイトル</h3>';
    echo '<p>' . esc_html($custom_field_value) . '</p>';
    echo '</div>';
}
?>

empty() 関数を使うことで、値が空（null、空文字、0など）であるかを判定できます。esc_html() を用いて出力することで、HTMLの不正な挿入を防ぎ、セキュリティを確保できます。

値が未入力の場合に代替テキストを表示する

値が入力されていないときに「未入力」や「お問い合わせください」などのテキストを表示するには、三項演算子が便利です。

<?php
$custom_field_value = get_post_meta(get_the_ID(), 'custom_field_key', true);
$display_text = !empty($custom_field_value) ? esc_html($custom_field_value) : '未入力';
echo '<p>' . $display_text . '</p>';
?>

実用例：価格が未入力なら「お問い合わせください」

商品ページなどで価格が入力されていない場合に代替文を表示する例です。

<?php
$price = get_post_meta(get_the_ID(), 'price', true);
$display_price = !empty($price) ? esc_html($price) . '円' : 'お問い合わせください';
echo '<p>価格: ' . $display_price . '</p>';
?>

実用例：イベント開催日が未定の場合の表示

イベント情報の開催日時がまだ未確定のときに「未定」と表示する例です。

<?php
$event_date = get_post_meta(get_the_ID(), 'event_date', true);
$display_date = !empty($event_date) ? esc_html($event_date) : '未定';
echo '<p>開催日時: ' . $display_date . '</p>';
?>