プラグインElementorのelementor/template-library/create_new_dialog_fieldsアクションの使用方法・解説

概要

elementor/template-library/create_new_dialog_fieldsアクションは、Elementorのテンプレートライブラリで新しいダイアログフィールドを追加するために使用されます。このフックを使用することで、ユーザーインターフェースにカスタムフィールドを追加して、ユーザーに新しい選択肢を提供したり、特定の機能を拡張したりすることが可能です。

このアクションは、以下のような機能を実装する際によく使われます：

カスタムテンプレートの設定を追加する
テンプレートのデータを収集するためのフィールドを追加する
ユーザーのフィードバックを得るための選択肢を提供する
特定の条件によって表示内容を変えるオプションを追加する
インタラクティブな要素をフィールドに組み込む
プラグインとの連携機能を強化する

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

構文

add_action('elementor/template-library/create_new_dialog_fields', 'your_custom_function');

function your_custom_function($fields) {
    // フィールドを追加するコード
}

パラメータ

$fields: ダイアログで使用するフィールドの設定を含む配列。

戻り値

このアクションは戻り値を返しませんが、フィールドの設定が引数として渡されます。

サンプルコード

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

add_action('elementor/template-library/create_new_dialog_fields', function($fields) {
    $fields['custom_text'] = [
        'label' => __('Custom Text', 'text-domain'),
        'type' => 'text',
    ];
});

このコードは、Elementorのテンプレートダイアログにカスタムテキストフィールドを追加します。

サンプル2: セレクトボックスの追加

add_action('elementor/template-library/create_new_dialog_fields', function($fields) {
    $fields['custom_select'] = [
        'label' => __('Select Option', 'text-domain'),
        'type' => 'select',
        'options' => [
            'option1' => __('Option 1', 'text-domain'),
            'option2' => __('Option 2', 'text-domain'),
        ],
    ];
});

このコードは、ユーザーが選択肢からオプションを選ぶことができるセレクトボックスを追加します。

サンプル3: チェックボックスの追加

add_action('elementor/template-library/create_new_dialog_fields', function($fields) {
    $fields['custom_checkbox'] = [
        'label' => __('Enable Feature', 'text-domain'),
        'type' => 'checkbox',
        'default' => 'no',
    ];
});

このコードは、機能を有効にするためのチェックボックスを追加します。

サンプル4: カラーピッカーの追加

add_action('elementor/template-library/create_new_dialog_fields', function($fields) {
    $fields['custom_color'] = [
        'label' => __('Choose Color', 'text-domain'),
        'type' => 'color',
    ];
});

このコードは、ユーザーが色を選ぶためのカラーピッカーを追加します。

サンプル5: URLフィールドの追加

add_action('elementor/template-library/create_new_dialog_fields', function($fields) {
    $fields['custom_url'] = [
        'label' => __('Custom URL', 'text-domain'),
        'type' => 'url',
    ];
});

このコードは、ユーザーがリンクを入力できるURLフィールドを追加します。

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

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

概要

構文