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

概要

elementor/template-library/create_new_dialog_types アクションは、Elementor プラグインにて新しいテンプレートダイアログを追加するためのフックです。このアクションを利用することで、カスタムテンプレートや機能をユーザーインターフェースに統合することができます。具体的には、以下のような機能を実装する際に頻繁に利用されます。

ユーザー定義のテンプレートタイプの作成
タグ付けやカテゴリ分けに基づくテンプレートフィルタの追加
特定のユーザーグループに対するカスタムテンプレートの表示
新しいテンプレートプレビュータイプの実装
テンプレートライブラリの拡張
カスタマイズされたダイアログの表示

構文

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

パラメータ

your_custom_function は新しいダイアログを作成するためのコールバック関数です。

戻り値

このアクション自体は値を返しませんが、指定されたコールバック内で処理を行うことによって、新しいダイアログの動作をカスタマイズできます。

対応バージョン

Elementor バージョン：2.0以降
WordPress バージョン：4.9以降

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

アクション	使用可能性
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_action( 'elementor/template-library/create_new_dialog_types', function( $library ) {
    $library->add_dialog_type( 'my_custom_template', 'My Custom Template' );
} );

このサンプルでは、Elementorのライブラリに「My Custom Template」というカスタムテンプレートタイプを追加しています。

出典: Stack Overflow

サンプル2: フィルタリング機能の追加

add_action( 'elementor/template-library/create_new_dialog_types', function( $library ) {
    $library->add_filter( 'my_custom_filter', 'My Custom Filter' );
} );

このコードは、Elementorのテンプレートライブラリに「My Custom Filter」というフィルタを追加し、ユーザーが特定のテンプレートをフィルタリングできるようにします。

出典: Codex

サンプル3: ユーザーグループ限定のテンプレート表示

add_action( 'elementor/template-library/create_new_dialog_types', function( $library ) {
    if ( current_user_can( 'editor' ) ) {
        $library->add_dialog_type( 'editor_template', 'Editor Template' );
    }
} );

このサンプルは、エディターレベルのユーザーにのみ表示される「Editor Template」というテンプレートを追加しています。

出典: WordPress Developer Handbook

サンプル4: テンプレートプレビューの追加

add_action( 'elementor/template-library/create_new_dialog_types', function( $library ) {
    $library->add_preview_modal( 'custom_preview', 'Custom Preview' );
} );

このコードは、カスタムプレビュー用のモーダルを追加し、テンプレートの視覚的な確認を容易にします。

出典: Elementor Documentation

サンプル5: ダイアログの拡張

add_action( 'elementor/template-library/create_new_dialog_types', function( $library ) {
    $library->extend_dialog_with( 'my_extension', 'My Extension' );
} );

このサンプルは、新しい拡張機能をダイアログに追加し、Elementorの機能を拡張する例です。

出典: Elementor Community

概要

構文