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>';
?>
よくある質問(FAQ)
Q. カスタムフィールドに値があれば表示、なければ別のHTMLを表示するコードは?
A. $value = get_post_meta($post_id, ‘field_key’, true); if(!empty($value)){ echo ‘
‘ . esc_html($value) . ‘
‘; }else{ echo ‘
未設定
‘; }という基本的な条件分岐で実現できます。
Q. ACF(Advanced Custom Fields)で同様の条件分岐をするには?
A. if(get_field(‘field_name’)){ echo get_field(‘field_name’); }という形でACFのget_field()を使います。the_field()は直接出力するため条件分岐にはget_field()を使います。
Q. カスタムフィールドの値が0や偽の値でもempty()がtrueになる問題の対処法は?
A. 0やfalseを有効な値として扱いたい場合はempty()ではなくis_null()またはgetter !== ”(厳密比較)を使います。get_post_meta()は値がない場合に空文字を返すため、!== ”での確認が適切です。
まとめ
カスタムフィールドの入力有無に応じて表示を切り替えることで、無駄な空白やエラー表示を避け、ユーザーにとってわかりやすいコンテンツを提供できます。三項演算子や empty() の活用により、柔軟な出力が可能になりますので、サイトの見栄えや利便性向上にぜひ活用してみてください。
