WordPressカスタムフィールド作り。 add_meta_boxで作れるフィールド紹介

リピーターが使えるプラグイン「Smart Custom Fields代替」が使えなくなったので、functionで自作する事に挑戦中ですが、前回の記事では、書き方だけだったので、今回はadd_meta_boxで作れるフィールドをいくつか紹介しようと思います。

最初と最後のフック

最初

add_action('add_meta_boxes', function() {
    add_meta_box('custom_text_field', 'カスタムテキストフィールド', 'render_text_field', 'post', 'normal', 'high');
});

最後

add_action('save_post', function($post_id) {
    if (isset($_POST['custom_text'])) {
        update_post_meta($post_id, '_custom_text_field', sanitize_text_field($_POST['custom_text']));
    }
});

保存

add_action('save_post', function($post_id) {
    // チェックする各フィールド
    if (isset($_POST['custom_text'])) {
        update_post_meta($post_id, '_custom_text_field', sanitize_text_field($_POST['custom_text']));
    }
    if (isset($_POST['custom_textarea'])) {
        update_post_meta($post_id, '_custom_textarea_field', sanitize_textarea_field($_POST['custom_textarea']));
    }
    if (isset($_POST['custom_checkbox'])) {
        update_post_meta($post_id, '_custom_checkbox_field', '1');
    } else {
        delete_post_meta($post_id, '_custom_checkbox_field');
    }
    if (isset($_POST['custom_radio'])) {
        update_post_meta($post_id, '_custom_radio_field', sanitize_text_field($_POST['custom_radio']));
    }
    if (isset($_POST['custom_select'])) {
        update_post_meta($post_id, '_custom_select_field', sanitize_text_field($_POST['custom_select']));
    }
});

1. テキストフィールド

function render_text_field($post) {
    $value = get_post_meta($post->ID, '_custom_text_field', true);
    ?>
    <label for="custom_text">テキストを入力してください:</label>
    <input type="text" id="custom_text" name="custom_text" value="<?php echo esc_attr($value); ?>" style="width:100%;" />
    <?php
}

出力

<?php
$value = get_post_meta(get_the_ID(), '_custom_text_field', true);
if ($value) {
    echo '<p>入力されたテキスト: ' . esc_html($value) . '</p>';
}
?>

2. テキストエリア

function render_textarea_field($post) {
    $value = get_post_meta($post->ID, '_custom_textarea_field', true);
    ?>
    <label for="custom_textarea">詳細を入力してください:</label>
    <textarea id="custom_textarea" name="custom_textarea" rows="5" style="width:100%;"><?php echo esc_textarea($value); ?></textarea>
    <?php
}

出力

<?php
$value = get_post_meta(get_the_ID(), '_custom_textarea_field', true);
if ($value) {
    echo '<div>詳細: ' . nl2br(esc_html($value)) . '</div>';
}
?>

3. チェックボックス

function render_checkbox_field($post) {
    $value = get_post_meta($post->ID, '_custom_checkbox_field', true);
    ?>
    <label for="custom_checkbox">
        <input type="checkbox" id="custom_checkbox" name="custom_checkbox" value="1" <?php checked($value, '1'); ?> />
        有効にする
    </label>
    <?php
}

出力

<?php
$value = get_post_meta(get_the_ID(), '_custom_checkbox_field', true);
if ($value === '1') {
    echo '<p>このオプションは有効です。</p>';
} else {
    echo '<p>このオプションは無効です。</p>';
}
?>

4. ラジオボタン

function render_radio_field($post) {
    $value = get_post_meta($post->ID, '_custom_radio_field', true);
    ?>
    <label>
        <input type="radio" name="custom_radio" value="option1" <?php checked($value, 'option1'); ?> />
        オプション1
    </label><br>
    <label>
        <input type="radio" name="custom_radio" value="option2" <?php checked($value, 'option2'); ?> />
        オプション2
    </label>
    <?php
}

出力

<?php
$value = get_post_meta(get_the_ID(), '_custom_radio_field', true);
if ($value) {
    echo '<p>選択されたオプション: ' . esc_html($value) . '</p>';
}
?>

5. セレクトボックス（ドロップダウン）

function render_select_field($post) {
    $value = get_post_meta($post->ID, '_custom_select_field', true);
    ?>
    <label for="custom_select">選択してください:</label>
    <select id="custom_select" name="custom_select">
        <option value="option1" <?php selected($value, 'option1'); ?>>オプション1</option>
        <option value="option2" <?php selected($value, 'option2'); ?>>オプション2</option>
        <option value="option3" <?php selected($value, 'option3'); ?>>オプション3</option>
    </select>
    <?php
}

出力

<?php
$value = get_post_meta(get_the_ID(), '_custom_select_field', true);
if ($value) {
    echo '<p>選択された値: ' . esc_html($value) . '</p>';
}
?>