2026年7月27日

WordPressのBlock Editor Data（Redux like）を使う方法

カスタマイズ

はじめに

WordPressのブロックエディタは、ユーザーインターフェースと機能性において大幅な進化を遂げました。しかし、カスタムデータや設定値を効率的に管理するためには、「Redux」のような既存の解決策が必要となります。本記事では、そのようなニーズに応えるための「Redux-like」とも呼べるアプローチについて解説します。

症状・背景

このテーマが必要になる主な場面:

テーマやプラグインのカスタマイズで、ユーザー設定値を効率的に管理したい場合
設定値と関連するデータを一元化して管理したい場合
フロントエンドとバックエンド間でのデータ同期が必要な場合

手順・設定方法

ステップ1: WordPressのブロックエディタ用ライブラリのインストール

# WordPressプロジェクトのルートに移動します。
cd /path/to/wordpress/project

# ブロックエディタデータ管理ライブラリをComposerでインストールします。
composer require wp-cli/wp-block-editor-data-manager

ステップ2: カスタム設定値の登録と初期化

# functions.phpまたはカスタムプラグインファイルに以下のようにコードを追加します。
add_action( 'init', function() {
    $settings = [
        // データのキー名
        'my_custom_setting' => [
            'default' => 'default_value',
            'type'    => 'string',
            'label'   => 'My Custom Setting',
        ],
    ];

    new WP_Block_Editor_Data_Manager( $settings );
} );

ステップ3: 設定値のフロントエンド表示と編集

# テーマテンプレートファイルで設定値を取得します。
function get_custom_setting_value() {
    return WP_Block_Editor_Data_Manager::get( 'my_custom_setting' );
}

// フロントページにカスタム設定値を使用する例:
echo '<p>My Custom Setting Value: ' . esc_html( get_custom_setting_value() ) . '</p>';

# エディタで設定値を編集可能にするために登録します。
add_action( 'enqueue_block_editor_assets', function() {
    // 編集可能なブロックを追加
    wp_enqueue_script(
        'my-custom-setting-block',
        get_template_directory_uri() . '/js/custom-setting-editor.js',
        [ 'wp-blocks', 'wp-element' ],
        filemtime( get_theme_file_path( '/js/custom-setting-editor.js' ) ),
        true
    );

    // テンプレートパーソナライゼーションを有効にします。
    wp_localize_script(
        'my-custom-setting-block',
        'customSettingData',
        WP_Block_Editor_Data_Manager::get_all()
    );
} );

ステップ4: 設定値のセキュリティとパフォーマンス最適化

# アクションフックを使用して設定値をセキュアに保存します。
add_action( 'admin_init', function() {
    $settings = WP_Block_Editor_Data_Manager::get_all();
    
    // 安全なデータ保存のため、ここで適切なエスケープ処理を行います。
    update_option( 'secure_block_editor_data', wp_json_encode( $settings ) );
} );

# データアクセスを最適化するため、キャッシュメカニズムを導入します。
add_action( 'init', function() {
    WP_Block_Editor_Data_Manager::register_cache_group();
});

注意事項

カスタム設定値の管理にはデータの一貫性と整合性が重要です。適切なエスケープとバリデーションを実装してください。
フロントエンドでの表示は、ユーザーインターフェースを考慮したHTML/CSS/JSの最適化が必要です。
セキュリティ上の注意: アクセス制御やデータ暗号化を含む全般的なセキュリティ対策を必ず実装してください。
パフォーマンス/運用上の注意: 複数の設定値がある場合は、キャッシュの利用などでパフォーマンスを最適化することを検討してください。

まとめ

1. データ管理: WordPressのブロックエディタで効率的なカスタムデータ管理が可能になりました。

2. フロントエンド表示: 管理者設定から取得した値をフロントページで自由に使用できます。

3. セキュリティ対策: データ保存時に適切なエスケープとバリデーションを行います。

4. パフォーマンス最適化: キャッシュメカニズムの導入でデータアクセスを高速化します。

Post Views: 14