プラグインElementorのelementor/widget/{$widget_name}/skins_initアクションの使用方法・解説

概要

elementor/widget/{$widget_name}/skins_initは、Elementorのカスタムウィジェットでスキンを初期化する際に使用されるフックです。このアクションは、特定のウィジェットのスキン設定を登録しカスタマイズするために役立ちます。通常、ウィジェットに関連するスキンの追加やカスタマイズを行うためによく使用されます。以下は、このアクションがよく使われるシーンの一例です。

特定のウィジェットに新しいスキンを追加する
スキンのデフォルト設定を変更する
スキンのレイアウトをカスタマイズする
UIのスタイルを調整する
スキンごとの設定オプションを追加する
プラグインの設定画面からスキンを管理する

構文

add_action( 'elementor/widget/{$widget_name}/skins_init', 'your_callback_function' );

パラメータ

このフックは特定のウィジェット名をパラメータとして受け取ります。このウィジェット名は$widget_nameとして表現されます。

戻り値

このアクション自体は何も値を返しません。カスタムスキンを登録するためのフックとして機能します。

使用可能なプラグインおよびワードプレスのバージョン

Elementor: バージョン3.0以上
WordPress: バージョン5.0以上

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

アクション	使用可能性
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/widget/my_custom_widget/skins_init', function( $widget ) {
    $widget->add_skin( 'my_new_skin', [
        'label' => __( 'My New Skin', 'text-domain' ),
        'title' => __( 'My New Skin Title', 'text-domain' ),
    ]);
});

このコードは、「my_custom_widget」という名前のウィジェットに「My New Skin」という新しいスキンを追加しています。

サンプルコード2

add_action( 'elementor/widget/my_styled_widget/skins_init', function( $widget ) {
    $widget->add_skin( 'stylish_skin', [
        'label' => __( 'Stylish Skin', 'text-domain' ),
        'settings' => [
            'color' => '#ff0000',
            'font_size' => '20px',
        ],
    ]);
});

こちらの例では、「my_styled_widget」ウィジェットに「Stylish Skin」というスキンを追加し、色とフォントサイズの設定を行っています。

サンプルコード3

add_action( 'elementor/widget/my_gallery_widget/skins_init', function( $widget ) {
    $widget->add_skin( 'gallery_skin', [
        'label' => __( 'Gallery Skin', 'text-domain' ),
        'title' => __( 'Gallery Title', 'text-domain' ),
        'icon' => 'fa fa-image',
    ]);
});

このサンプルコードは、ギャラリーウィジェットに「Gallery Skin」スキンを追加し、アイコンも設定しています。

サンプルコード4

add_action( 'elementor/widget/my_button_widget/skins_init', function( $widget ) {
    $widget->add_skin( 'button_skin', [
        'label' => __( 'Button Skin', 'text-domain' ),
        'settings' => [
            'background_color' => '#008000',
            'border_radius' => '5px',
        ],
    ]);
});

このコードは、「my_button_widget」に「Button Skin」というスキンを追加し、そのスキンの背景色とボーダー半径の設定をしています。

サンプルコード5

add_action( 'elementor/widget/my_text_widget/skins_init', function( $widget ) {
    $widget->add_skin( 'text_skin', [
        'label' => __( 'Text Skin', 'text-domain' ),
        'title' => __( 'Text Skin Title', 'text-domain' ),
        'settings' => [
            'font_color' => '#0000ff',
        ],
    ]);
});

こちらは、「my_text_widget」ウィジェットに「Text Skin」というスキンを追加し、フォントカラーの設定を行っています。

概要

構文