【WordPress】カスタムフィールドの入力有無で表示を動的に変更する方法

WordPressを使用していると、カスタムフィールドを活用する場面が多々あります。カスタムフィールドに入力がある場合のみ表示したり、入力がない場合に特定のテキストを表示したりする方法について解説します。この記事では、2つの異なる方法を紹介します。

カスタムフィールドとは

カスタムフィールドとは、WordPressの投稿やページに追加の情報を付加するための機能です。メタデータとも呼ばれ、投稿のタイトルや本文以外の情報を保存するのに使用します。例えば、特定の商品情報やイベントの日時などをカスタムフィールドに格納することができます。

カスタムフィールドに入力があれば表示、入力がなければ項目ごと非表示

まずは、カスタムフィールドに値がある場合のみその項目を表示し、値がない場合は項目ごと非表示にする方法です。

<?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>';
}
?>

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

if (!empty($custom_field_value)) でカスタムフィールドに値が存在するかを確認します。

値が存在する場合のみ、カスタムフィールドの内容を表示します。

カスタムフィールドに入力があれば表示、入力がなければ「−」と表示

次に、カスタムフィールドに値がある場合はその値を表示し、値がない場合は「−」と表示する方法です。

<?php
// カスタムフィールドの値を取得
$custom_field_value = get_post_meta(get_the_ID(), 'custom_field_key', true);

// カスタムフィールドの値を表示。空の場合は「−」を表示
if (!empty($custom_field_value)) {
    $display_value = esc_html($custom_field_value);
} else {
    $display_value = '−';
}

echo '<div class="custom-field">';
echo '<h3>カスタムフィールドのタイトル</h3>';
echo '<p>' . $display_value . '</p>';
echo '</div>';
?>

get_post_meta関数でカスタムフィールドの値を取得します。

カスタムフィールドに値があるかを確認し、表示する値を決定します。値がない場合は「−」を設定します。

取得した値または「−」を表示します。

まとめ

この記事では、カスタムフィールドの入力有無によって表示を動的に変更する2つの方法を紹介しました。方法1では入力がある場合のみ項目を表示し、方法2では入力がない場合に「−」と表示することで、ユーザーにわかりやすい情報を提供できます。カスタムフィールドを活用して、より柔軟で使いやすいウェブサイトを構築しましょう。