プラグインElementorのelementor/frontend/before_get_builder_contentアクションの使用方法・解説

概要

elementor/frontend/before_get_builder_content アクションは、WordPressのElementorプラグインにおいて、ビルダーのコンテンツが取得される直前にフックします。このアクションは、以下のような機能を実装する際によく使われます。

ビルダーコンテンツのカスタマイズ
特定の条件に基づくスタイルの適用
サードパーティのサービスからのデータ取得
トラッキングコードやカスタムスクリプトの追加
プラグイン互換性のための処理
カスタムフィールドに基づく動的なコンテンツ表示

構文

do_action( 'elementor/frontend/before_get_builder_content', $content, $element );

パラメータ

$content: 現在のコンテンツ。
$element: 現在のElementor要素の情報。

戻り値

このアクションには戻り値はありませんが、他のフックまたは関数を通じて変更を加えることができます。

バージョン

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: コンテンツにカスタムCSSを追加

add_action( 'elementor/frontend/before_get_builder_content', function( $content ) {
    $custom_css = '<style>.custom-class { color: red; }</style>';
    echo $custom_css;
} );

このサンプルコードは、Elementorビルダーコンテンツの前にカスタムCSSを追加します。これにより、すべてのElementorコンテンツに対して特定のスタイルが適用されます。

サンプル2: 特定の条件でカスタムHTMLを追加

add_action( 'elementor/frontend/before_get_builder_content', function( $content ) {
    if ( is_page( '特定のページスラッグ' ) ) {
        echo '<div class="my-custom-message">これは特定のページです。</div>';
    }
} );

このサンプルコードは、特定のページにのみカスタムHTMLメッセージを表示します。条件分岐を利用して特定のスラッグのページに対して動的に内容を追加します。

サンプル3: フィルターを使ったコンテンツの変更

add_action( 'elementor/frontend/before_get_builder_content', function( $content ) {
    return str_replace( '旧テキスト', '新テキスト', $content );
} );

このサンプルコードは、ビルダーコンテンツ内の特定のテキストを置き換えます。この方法で、コンテンツの詳細を動的に編集できます。

サンプル4: データベースからの動的データ取得

add_action( 'elementor/frontend/before_get_builder_content', function( $content ) {
    global $wpdb;
    $results = $wpdb->get_results( "SELECT * FROM wp_my_custom_table" );
    foreach ( $results as $row ) {
        echo '<div>' . esc_html( $row->column_name ) . '</div>';
    }
} );

このサンプルコードは、カスタムデータベーステーブルからデータを取得し、ビルダーコンテンツに動的に表示します。

サンプル5: トラッキングスクリプトの追加

add_action( 'elementor/frontend/before_get_builder_content', function( $content ) {
    echo '<script>console.log("Elementorコンテンツが表示される");</script>';
} );

このサンプルコードは、ビルダーコンテンツがレンダリングされる前にコンソールメッセージを追加します。これにより、デバッグやトラッキング作業が容易になります。

概要

構文