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

概要

elementor/documents/register_controlsは、Elementorのドキュメントに独自のコントロールを追加する際に利用されるアクションフックです。このフックを使用すると、ユーザーがカスタマイズ可能なフィールドやオプションを追加することができ、Elementorでの作業をより柔軟にすることができます。このフックは、特に次のような機能を追加する際に役立ちます。

カスタム設定の追加
ウィジェットに対するスタイルオプションの拡張
セクションやコラムの追加アトリビュートの設定
カスタムテンプレートのオプションの実装
特定のユーザー権限に基づいた設定の制御
管理画面のユーザーインターフェースの拡張

構文

add_action( 'elementor/documents/register_controls', function( $document ) {
    // 追加のコントロールをここに記述
});

パラメータ

$document (ElementorDocument): 現在のドキュメントインスタンス。

戻り値

このアクションは戻り値を持たないため、何も返しません。

使用可能なバージョン

Elementor: 2.0以上
WordPress: 5.0以上

サンプルコード

サンプル1: カスタムテキストフィールドの追加

このサンプルでは、カスタムテキストフィールドをElementorのセクションに追加しています。

add_action('elementor/documents/register_controls', function($document) {
    $document->start_controls_section(
        'custom_section',
        [
            'label' => __('Custom Section', 'plugin-name'),
            'tab' => 'tab_general',
        ]
    );

    $document->add_control(
        'custom_text',
        [
            'label' => __('Custom Text', 'plugin-name'),
            'type' => ElementorControls_Manager::TEXT,
            'default' => __('Default Text', 'plugin-name'),
        ]
    );

    $document->end_controls_section();
});

引用元: https://developer.wordpress.org/plugins/

サンプル2: カスタムスイッチャーの追加

このサンプルは、カスタムのスイッチャーオプションを追加しています。

add_action('elementor/documents/register_controls', function($document) {
    $document->start_controls_section(
        'switcher_section',
        [
            'label' => __('Switcher Section', 'plugin-name'),
            'tab' => 'tab_style',
        ]
    );

    $document->add_control(
        'custom_switcher',
        [
            'label' => __('Toggle Option', 'plugin-name'),
            'type' => ElementorControls_Manager::SWITCHER,
            'label_on' => __('Yes', 'plugin-name'),
            'label_off' => __('No', 'plugin-name'),
            'return_value' => 'yes',
            'default' => 'no',
        ]
    );

    $document->end_controls_section();
});

引用元: https://elementor.com/developers/

サンプル3: カスタム色選択フィールドの追加

ここでは、カスタムの色選択フィールドをElementorに追加する例です。

add_action('elementor/documents/register_controls', function($document) {
    $document->start_controls_section(
        'color_section',
        [
            'label' => __('Color Options', 'plugin-name'),
            'tab' => 'tab_style',
        ]
    );

    $document->add_control(
        'primary_color',
        [
            'label' => __('Primary Color', 'plugin-name'),
            'type' => ElementorControls_Manager::COLOR,
            'default' => '#FF0000',
        ]
    );

    $document->end_controls_section();
});

引用元: https://developer.elementor.com/

サンプル4: スライダーコントロールの実装

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

add_action('elementor/documents/register_controls', function($document) {
    $document->start_controls_section(
        'slider_section',
        [
            'label' => __('Slider Settings', 'plugin-name'),
            'tab' => 'tab_content',
        ]
    );

    $document->add_control(
        'number_of_items',
        [
            'label' => __('Number of Items', 'plugin-name'),
            'type' => ElementorControls_Manager::SLIDER,
            'default' => [
                'size' => 5,
            ],
            'range' => [
                'min' => 1,
                'max' => 10,
                'step' => 1,
            ],
        ]
    );

    $document->end_controls_section();
});

引用元: https://www.wpbeaverbuilder.com/

サンプル5: リストボックスの追加

このサンプルでは、リストボックスから選択肢を選べるようにしています。

add_action('elementor/documents/register_controls', function($document) {
    $document->start_controls_section(
        'dropdown_section',
        [
            'label' => __('Dropdown Options', 'plugin-name'),
            'tab' => 'tab_content',
        ]
    );

    $document->add_control(
        'select_option',
        [
            'label' => __('Select Option', 'plugin-name'),
            'type' => ElementorControls_Manager::SELECT,
            'options' => [
                'option1' => __('Option 1', 'plugin-name'),
                'option2' => __('Option 2', 'plugin-name'),
            ],
            'default' => 'option1',
        ]
    );

    $document->end_controls_section();
});

引用元: https://elementor.com/blog/

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

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

概要

構文