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

概要

elementor/element/before_section_endは、Elementorでカスタムセクションを追加するためのフックであり、セクションの終了前に特定の処理を実行できます。これは、特に以下の機能を実装する際に役立ちます。

カスタムウィジェットの設定
独自のスタイルやスクリプトのエンキュー
レイアウトの変更やカスタマイズ
動的コンテンツの追加
特定の条件に基づく要素の表示・非表示
カスタムフィールドやデータの表示

このアクションは、Elementorのバージョン3.0以上、およびWordPressのバージョン5.0以上で使用可能です。

構文

add_action( 'elementor/element/before_section_end', 'your_function_name', 10, 2 );

パラメータ

$element: Elementorの要素オブジェクト。
$section_id: セクションのID。

戻り値

このアクションには戻り値はありません。

サンプルコード

サンプル1：カスタムスタイルの追加

add_action( 'elementor/element/before_section_end', function( $element, $section_id ) {
    if ( 'section_id' === $section_id ) {
        // カスタムスタイルを追加
        $element->add_render_attribute( '_wrapper', 'class', 'custom-class' );
    }
}, 10, 2 );

このサンプルでは、特定のセクションにカスタムクラスを追加しています。

サンプル2：カスタムフィールドの表示

add_action( 'elementor/element/before_section_end', function( $element, $section_id ) {
    if ( 'your_section_id' === $section_id ) {
        $custom_field_value = get_field( 'custom_field' ); // ACF から値を取得
        echo '<div class="custom-field">' . esc_html( $custom_field_value ) . '</div>';
    }
}, 10, 2 );

このサンプルでは、Advanced Custom Fields (ACF)から取得したカスタムフィールドの値を表示しています。

サンプル3：動的コンテンツの追加

add_action( 'elementor/element/before_section_end', function( $element, $section_id ) {
    if ( 'content_section' === $section_id ) {
        $element->add_control( 'dynamic_content', [
            'label' => __( 'Dynamic Content', 'plugin-name' ),
            'type' => ElementorControls_Manager::TEXT,
            'default' => __( 'Default text', 'plugin-name' ),
        ]);
    }
}, 10, 2 );

このサンプルでは、特定のセクションに動的コンテンツのコントロールを追加しています。

サンプル4：JavaScriptのエンキュー

add_action( 'elementor/element/before_section_end', function( $element, $section_id ) {
    if ( 'script_section' === $section_id ) {
        wp_enqueue_script( 'custom-script', plugins_url( 'assets/js/custom-script.js', __FILE__ ), [ 'jquery' ], null, true );
    }
}, 10, 2 );

このサンプルでは、特定のセクションでJavaScriptファイルをエンキューしています。

サンプル5：条件付き処理の追加

add_action( 'elementor/element/before_section_end', function( $element, $section_id ) {
    if ( 'conditional_section' === $section_id && is_user_logged_in() ) {
        // ログインしているユーザーにだけ表示する要素
        echo '<p>Logged in user content!</p>';
    }
}, 10, 2 );

このサンプルでは、特定のセクションにログインしているユーザーだけに表示されるコンテンツを追加しています。

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

アクション	使用例
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

概要

構文