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

概要

elementor/widgets/registerは、Elementorプラグインのフックであり、カスタムウィジェットを登録する際に使用されます。このフックは、特に以下の機能を実装する際に役立ちます。

カスタムデザインウィジェットを追加する
既存のエレメンターウィジェットの機能を拡張する
ウィジェットの設定やスタイルをカスタマイズする
ユーザーインターフェースの改善を行う
特定のコンテンツタイプに基づいたウィジェットを追加する
プラグイン固有の機能を組み込む

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

構文

add_action('elementor/widgets/register', function($widgets_manager) {
    // Your widget registration code here
});

パラメータ

$widgets_manager: Elementorウィジェットマネージャーのインスタンス。

戻り値

なし。ウィジェットが正常に登録されれば追加されたウィジェットがElementorで使用可能になります。

サンプルコード

サンプル1: シンプルなカスタムウィジェットの登録

このサンプルは、シンプルなテキストウィジェットを登録するコードです。

add_action('elementor/widgets/register', function($widgets_manager) {
    require_once(__DIR__ . '/widgets/my-text-widget.php');
    $widgets_manager->register(new My_Text_Widget());
});

説明: このコードは、my-text-widget.phpで定義されたカスタムウィジェットをElementorに登録します。

サンプル2: カスタムウィジェットにオプションを追加

こちらのサンプルは、カスタムウィジェットにオプションを追加する例です。

add_action('elementor/widgets/register', function($widgets_manager) {
    class My_Custom_Widget extends ElementorWidget_Base {
        public function get_name() {
            return 'my_custom_widget';
        }

        public function get_title() {
            return __('My Custom Widget', 'text-domain');
        }

        protected function _register_controls() {
            $this->start_controls_section('content_section', [
                'label' => __('Content', 'text-domain'),
                'tab' => ElementorControls_Manager::TAB_CONTENT,
            ]);
            $this->add_control('text_field', [
                'label' => __('Text', 'text-domain'),
                'type' => ElementorControls_Manager::TEXT,
                'default' => __('Default text', 'text-domain'),
            ]);
            $this->end_controls_section();
        }
    }
    $widgets_manager->register(new My_Custom_Widget());
});

説明: テキスト入力オプションを持つカスタムウィジェットを登録します。

サンプル3: ウィジェットのスタイルをエンキューする

この例では、ウィジェットに特定のスタイルシートをエンキューしています。

add_action('elementor/widgets/register', function($widgets_manager) {
    class My_Styled_Widget extends ElementorWidget_Base {
        public function get_name() {
            return 'my_styled_widget';
        }

        public function get_title() {
            return __('My Styled Widget', 'text-domain');
        }

        public function get_style_depends() {
            return ['my-styles'];
        }

        public function get_script_depends() {
            return ['my-scripts'];
        }
    }
    $widgets_manager->register(new My_Styled_Widget());
});

説明: スタイルシートとスクリプトをウィジェットに依存させる例です。

サンプル4: 設定に基づいて表示を制御する

このサンプルでは、ユーザーの設定に基づいてウィジェットの表示を制御しています。

add_action('elementor/widgets/register', function($widgets_manager) {
    class My_Conditional_Widget extends ElementorWidget_Base {
        public function get_name() {
            return 'my_conditional_widget';
        }

        public function get_title() {
            return __('My Conditional Widget', 'text-domain');
        }

        protected function render() {
            if (get_option('display_my_conditional_widget') === 'yes') {
                echo '<div>表示される内容</div>';
            }
        }
    }
    $widgets_manager->register(new My_Conditional_Widget());
});

説明: WordPressのオプションに基づいて、ウィジェットの表示を制御します。

サンプル5: 他のウィジェットと連携する

このサンプルでは、他のウィジェットと連携するカスタムウィジェットを作成します。

add_action('elementor/widgets/register', function($widgets_manager) {
    class My_Linked_Widget extends ElementorWidget_Base {
        public function get_name() {
            return 'my_linked_widget';
        }

        public function get_title() {
            return __('My Linked Widget', 'text-domain');
        }

        protected function render() {
            $linked_widget_data = !empty($this->get_settings_for_display('linked_widget')) 
                ? $this->get_settings_for_display('linked_widget') 
                : 'No data';
            echo '<div>' . esc_html($linked_widget_data) . '</div>';
        }
    }
    $widgets_manager->register(new My_Linked_Widget());
});

説明: 他のウィジェットからのデータを使ったカスタムウィジェットを登録します。

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

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

概要

構文