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

概要

elementor/element/get_child_type フィルタは、Elementorの要素やウィジェットが子要素を持つ場合に、その子要素のタイプを決定する際に使用されるフックです。このフィルタを利用することで、開発者はカスタムウィジェットを作成したり、既存のウィジェットの子要素を拡張したりすることができます。

よく使われる機能としては以下の6つが挙げられます。
1. カスタムコンテンツの設定
2. レイアウトの調整
3. 動的データの表示
4. アニメーションの追加
5. インタラクティブな要素の追加
6. 既存ウィジェットのカスタマイズ

構文

フィルタは以下の形式で使用されます。

add_filter('elementor/element/get_child_type', 'your_callback_function', 10, 2);

パラメータ

string $child_type: 子要素のタイプ
array $args: コンテキストに応じた引数

戻り値

フィルタを通過した後の子要素のタイプ

このフィルタを使用可能なプラグインElementorのバージョン

Elementor: 2.0 以降

ワードプレスのバージョン

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: カスタム子要素の追加

add_filter('elementor/element/get_child_type', function ($child_type, $args) {
    if ($args['element_type'] === 'my_custom_element') {
        $child_type[] = 'my_custom_child';
    }
    return $child_type;
});

このコードは、カスタムウィジェット（my_custom_element）の子要素として新しいタイプ(my_custom_child)を追加します。

サンプル2: 動的データの使用

add_filter('elementor/element/get_child_type', function ($child_type, $args) {
    if ($args['element_type'] === 'dynamic_data_element') {
        $child_type[] = 'dynamic_data_child';
    }
    return $child_type;
});

このコードは、動的データを扱うウィジェットの子要素として新しいタイプ(dynamic_data_child)を追加します。

サンプル3: アニメーションの設定

add_filter('elementor/element/get_child_type', function ($child_type, $args) {
    if ($args['element_type'] === 'animated_element') {
        $child_type[] = 'animation_child';
    }
    return $child_type;
});

このコードは、アニメーション可能なウィジェットにアニメーションの子要素(animation_child)を追加します。

サンプル4: インタラクションの拡張

add_filter('elementor/element/get_child_type', function ($child_type, $args) {
    if ($args['element_type'] === 'interactive_element') {
        $child_type[] = 'interactive_child';
    }
    return $child_type;
});

このコードは、インタラクティブなウィジェットに新しいインタラクションの子要素(interactive_child)を追加します。

サンプル5: レイアウト調整用の子要素

add_filter('elementor/element/get_child_type', function ($child_type, $args) {
    if ($args['element_type'] === 'layout_element') {
        $child_type[] = 'layout_child';
    }
    return $child_type;
});

このコードは、レイアウトを調整するためのウィジェットに新しい子要素(layout_child)を追加します。

概要

構文