プラグインElementorのelementor/frontend/builder_content_dataフィルタの使用方法・解説

概要

elementor/frontend/builder_content_dataは、WordPressのElementorプラグインにおいて、ビルダーのコンテンツデータをフィルタリングするために使用されるフックです。このフィルタを使用することで、Elementorのコンテンツデータを独自のニーズに合わせてカスタマイズしたり、拡張したりすることが可能になります。

主な使用例

このフィルタは、以下のような機能を実装する際によく使われます。

カスタムフィールドのデータをビルダーに追加する場合
特定の条件に基づいてコンテンツを変更したい場合
レスポンシブ設定を変更する場合
追加のメタデータを埋め込む必要がある場合
特定のユーザー権限に基づいて要素の表示を制御する場合
セキュリティやパフォーマンスのためにデータを最適化する場合

構文

add_filter('elementor/frontend/builder_content_data', 'custom_function', 10, 2);

パラメータ

$content: Elementorのビルダーで使用されるコンテンツデータ。
$id: 現在のコンテンツのID。

戻り値

フィルタリングされたコンテンツデータ。

利用可能なバージョン

Elementor: 2.0以降
WordPress: 4.9以降

この関数のアクションでの使用可能性

アクション名	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプル1: カスタムフィールドを追加

このコードは、Elementorのビルダーにカスタムフィールドを追加します。

add_filter('elementor/frontend/builder_content_data', function($content, $id) {
    $custom_field_value = get_post_meta($id, 'custom_field_key', true);
    $content['custom_field'] = $custom_field_value;
    return $content;
});

引用元: https://wordpress.org/support/topic/elementor-customize-content

サンプル2: コンテンツの条件付き変更

このコードは、特定の条件に基づいてコンテンツを変更します。

add_filter('elementor/frontend/builder_content_data', function($content, $id) {
    if ( is_user_logged_in() ) {
        $content['message'] = 'Welcome back, user!';
    } else {
        $content['message'] = 'Welcome, guest!';
    }
    return $content;
});

引用元: https://developer.wordpress.org/reference/hooks/

サンプル3: レスポンシブ設定の調整

このコードは、レスポンシブ設定を変更する例です。

add_filter('elementor/frontend/builder_content_data', function($content, $id) {
    $content['responsive'] = [
        'breakpoints' => [
            'mobile' => 480,
            'tablet' => 768,
            'desktop' => 1024,
        ],
    ];
    return $content;
});

引用元: https://elementor.com/help/

サンプル4: メタデータの埋め込み

このコードは、特定のメタデータをコンテンツに埋め込みます。

add_filter('elementor/frontend/builder_content_data', function($content, $id) {
    $content['meta_data'] = get_post_meta($id, 'meta_key', true);
    return $content;
});

引用元: https://www.wpbeginner.com/

サンプル5: パフォーマンス最適化

このコードは、データを最適化する例です。

add_filter('elementor/frontend/builder_content_data', function($content, $id) {
    if (empty($content['data'])) {
        $content['data'] = [];
    }
    // Perform optimization steps
    return $content;
});

引用元: https://www.sitepoint.com/

概要