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

概要

elementor/controls/register アクションは、Elementor プラグインのカスタムコントロールを登録するためのフックです。このアクションを使用することで、独自のウィジェットやレイアウトを作成する際にカスタムコントロールを追加し、ユーザーにより柔軟な設定オプションを提供できます。代表的な用途には、色選択用のカラーピッカー、画像アップローダー、スライダー、セクションのスタイルオプション、トグルボタン、チェックボックスなどが含まれます。

このアクションは、Elementor のバージョン 1.0 以降、WordPress のバージョン 4.0 以降で使用可能です。

サンプルコード一覧

サンプルコード 1: カラーピッカーの追加

add_action('elementor/controls/register', function($controls_manager) {
    $controls_manager->add_control(
        'my_color_picker',
        [
            'label' => __('Color Picker', 'plugin-text-domain'),
            'type' => ElementorControls_Manager::COLOR,
            'default' => '#ff0000',
        ]
    );
});

このサンプルコードは、Elementor のカスタムコントロールとしてカラーピッカーを追加するものです。ユーザーはこのコントロールを使用して、ウィジェットの色を選択できます。

サンプルコード 2: 画像アップローダーの追加

add_action('elementor/controls/register', function($controls_manager) {
    $controls_manager->add_control(
        'my_image_uploader',
        [
            'label' => __('Upload Image', 'plugin-text-domain'),
            'type' => ElementorControls_Manager::MEDIA,
            'default' => [
                'url' => 'https://example.com/default-image.jpg',
            ],
        ]
    );
});

このコードは、画像をアップロードするためのコントロールを追加します。ユーザーが画像を選択またはアップロードすることができます。

サンプルコード 3: セレクトボックスの追加

add_action('elementor/controls/register', function($controls_manager) {
    $controls_manager->add_control(
        'my_select_box',
        [
            'label' => __('Select Option', 'plugin-text-domain'),
            'type' => ElementorControls_Manager::SELECT,
            'options' => [
                'option1' => __('Option 1', 'plugin-text-domain'),
                'option2' => __('Option 2', 'plugin-text-domain'),
            ],
            'default' => 'option1',
        ]
    );
});

このサンプルコードは、ユーザーが選択肢からオプションを選べるようにするセレクトボックスを追加します。

サンプルコード 4: スライダーの追加

add_action('elementor/controls/register', function($controls_manager) {
    $controls_manager->add_control(
        'my_slider',
        [
            'label' => __('Slider Control', 'plugin-text-domain'),
            'type' => ElementorControls_Manager::SLIDER,
            'default' => [
                'size' => 50,
            ],
            'range' => [
                'min' => 0,
                'max' => 100,
                'step' => 1,
            ],
        ]
    );
});

このコードは、数値をスライダーで選択できるようにするコントロールを追加します。

サンプルコード 5: トグルボタンの追加

add_action('elementor/controls/register', function($controls_manager) {
    $controls_manager->add_control(
        'my_toggle',
        [
            'label' => __('Toggle Option', 'plugin-text-domain'),
            'type' => ElementorControls_Manager::SWITCHER,
            'label_on' => __('Yes', 'plugin-text-domain'),
            'label_off' => __('No', 'plugin-text-domain'),
            'default' => '',
        ]
    );
});

このサンプルは、オン・オフの状態を切り替えることができるトグルボタンを追加します。

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

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

概要