2026年7月24日

WordPressでメタボックスを追加する方法

カスタマイズ

はじめに

カスタムメタボックスはWordPressの柔軟性を最大限に引き出すための重要な要素です。コンテンツ作成者に対して追加情報を入力させるために、独自のフィールドやオプションを投稿ページや固定ページに提供します。この記事では、簡単な手順でカスタムメタボックスを作成し、それをWordPressサイトに統合する方法を説明します。

症状・背景

ユーザーが特定の情報（例えば、アイキャッチ画像、関連ページ、SEO用のメタデータなど）を投稿時に追加したい場合
既存のカスタムフィールドは不十分で、より洗練されたインターフェースが必要な場合
カスタムポストタイプに独自の入力フィールドを追加したい場合
テーマやプラグインが提供する機能を超えたカスタマイズが必要な場合

手順・設定方法

ステップ1: カスタムメタボックスの基本構造を作成

# functions.phpに次のコードを追加します。
function mytheme_custom_metabox() {
    add_meta_box(
        'mytheme_mybox', // ID
        __( 'カスタムメタボックス', 'mytheme' ), // タイトル
        'mytheme_mybox_callback', // コールバック関数
        array( 'post', 'page' ), // ポストタイプ
        'normal', // パネル
        'high' // 位置
    );
}
add_action( 'add_meta_boxes', 'mytheme_custom_metabox' );

# カスタムメタボックスの表示用コールバック関数を定義します。
function mytheme_mybox_callback($post) {
    $values = get_post_custom($post->ID);
    $sample_text = isset($values['sample_text']) ? esc_attr(stripslashes($values['sample_text'][0])) : '';
    wp_nonce_field('mytheme_save_data', 'mytheme_sample_data_nonce');
    ?>
    <p>
        <label for="mytheme_sample_text">サンプルテキスト:</label><br />
        <textarea rows="5" cols="50" name="sample_text" id="mytheme_sample_text"><?php echo $sample_text; ?></textarea>
    </p><?php
}

ステップ2: データを保存する関数を作成

# メタボックスの情報を保存するための保存処理を実装します。
function mytheme_save_data($post_id) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;

    if (!current_user_can('edit_post', $post_id))
        return;

    if (!isset($_POST['mytheme_sample_data_nonce']) || !wp_verify_nonce($_POST['mytheme_sample_data_nonce'], 'mytheme_save_data'))
        return;

    if (array_key_exists('sample_text', $_POST)) {
        update_post_meta($post_id, 'sample_text', sanitize_text_field($_POST['sample_text']));
    }
}
add_action( 'save_post', 'mytheme_save_data' );

ステップ3: データを表示する関数を作成

# 投稿や固定ページでカスタムメタボックスの情報を表示します。
function mytheme_show_meta() {
    global $post;
    if (have_rows('sample_text', $post->ID)) :
        while (have_rows('sample_text', $post->ID)) : the_row();
            echo '<p>' . get_sub_field('sample_text') . '</p>';
        endwhile;
    endif;
}

ステップ4: デバッグとトラブルシューティング

# 保存されたメタデータを確認するために、次のコードを追加します。
function mytheme_debug() {
    global $post;
    echo '<pre>';
    print_r(get_post_custom($post->ID));
    echo '</pre>';
}
add_action('admin_footer', 'mytheme_debug');

注意事項

カスタムメタボックスの作成や保存処理は、functions.phpファイルに直接追加するか、カスタマイズプラグインとして別途設置してください。
メタデータを保存する際には、必ずセキュリティチェック（nonce）を使用して不正な要求を防ぐようにします。
保存したメタデータは、後から簡単に取り出せるよう適切に管理することを忘れないでください。

まとめ

1. カスタムメタボックスの作成: WordPressではadd_meta_box()関数を使用してカスタムメタボックスを作成します。

2. 保存処理の設定: カスタムメタボックスから入力されたデータを安全に保存するため、適切なセキュリティチェックとデータ保存の実装が必要です。

3. 表示処理: 保存したカスタムデータは、必要に応じてテンプレートファイルや他の関数内で簡単に呼び出すことができます。

4. デバッグとトラブルシューティング: メタボックスを追加後に動作確認を行うことで、問題の早期発見と解決が可能です。

Post Views: 15