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

概要

elementor/frontend/get_builder_content フィルタは、Elementorによって生成されたビルダーコンテンツをフィルタリングするために使用されます。このフックは、カスタムHTMLやCSSの追加、特定の条件に基づくコンテンツの変更、既存のElementorウィジェットの出力の調整など、さまざまな機能を実装するのに役立ちます。具体的には、以下のような機能でよく使われます。

Elementorウィジェットの出力を変更する
特定の条件に基づいて特別なスタイルやスクリプトを追加する
ページ作成時にデフォルトのテキストを挿入する
条件付きコンテンツや広告をビルダーに挿入する
ウェブサイト全体のパフォーマンスを向上させるためのコードの最適化
SEOの最適化のために特定のメタデータを挿入する

構文

add_filter( 'elementor/frontend/get_builder_content', 'your_function', 10, 2 );

パラメータ

content (string): Elementorのビルダーによって生成されたコンテンツのHTML。
element_id (string): コンテンツが関連付けられているElementorエレメントのID。

戻り値

フィルタが適用されたコンテンツのHTML（変更された場合）。

使用可能なプラグイン

このフィルタは、Elementorのバージョン3.0以降で使用可能です。

使用可能なWordPressのバージョン

WordPressのバージョン5.0以降で使用可能です。

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

アクション	使用可能性
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/get_builder_content', 'add_custom_message', 10, 2 );

function add_custom_message( $content, $element_id ) {
    $custom_message = '<div class="custom-message">Welcome to our site!</div>';
    return $custom_message . $content;
}

サンプル2: 特定のウィジェットスタイルの変更

特定のElementorウィジェットにCSSクラスを追加します。

add_filter( 'elementor/frontend/get_builder_content', 'add_custom_class_to_widget', 10, 2 );

function add_custom_class_to_widget( $content, $element_id ) {
    if ( 'your_widget_id' === $element_id ) {
        $content = str_replace( 'class="elementor-widget', 'class="elementor-widget custom-class', $content );
    }
    return $content;
}

サンプル3: デフォルトテキストの挿入

特定の条件の元でデフォルトのテキストを追加します。

add_filter( 'elementor/frontend/get_builder_content', 'insert_default_text', 10, 2 );

function insert_default_text( $content, $element_id ) {
    if ( empty( $content ) ) {
        $content = '<p>This is the default text.</p>';
    }
    return $content;
}

サンプル4: 条件付き広告の追加

ビルダーコンテンツに条件付き広告を挿入します。

add_filter( 'elementor/frontend/get_builder_content', 'add_conditional_ad', 10, 2 );

function add_conditional_ad( $content, $element_id ) {
    if ( is_single() && is_product() ) {
        $ad_code = '<div class="ad">Ad Placeholder</div>';
        $content .= $ad_code;
    }
    return $content;
}

サンプル5: SEOメタデータの追加

SEOのために特定のメタデータを追加します。

add_filter( 'elementor/frontend/get_builder_content', 'add_seo_meta', 10, 2 );

function add_seo_meta( $content, $element_id ) {
    if ( is_page() ) {
        $meta_data = '<meta name="description" content="This is a description for SEO purposes.">';
        $content = $meta_data . $content;
    }
    return $content;
}

これらのサンプルコードは、elementor/frontend/get_builder_content フィルタを利用した様々な用途に対応しています。詳細な情報や他の実装例については、Elementorの公式ドキュメントやコミュニティフォーラムを参照すると良いでしょう。

概要

構文