プラグインElementorのelementor/shapes/additional_shapesフィルタの使用方法・解説

概要

elementor/shapes/additional_shapes フィルタは、Elementor プラグインにおける追加のシェイプ（形状）を定義するために使用されます。このフィルタを利用することで、ユーザーは独自のシェイプを追加し、Elementor のデザイン機能を拡張することができます。以下は、このフィルタがよく使用されるシナリオの例です。

カスタムデザイン要素の作成
新しいシェイプの追加
テンプレートのビジュアルカスタマイズ
特定のテーマやスタイルに合わせたシェイプの提供
ユーザーによるインタラクティブなデザイン要素の追加
Elementor のデフォルト機能の拡張

構文

add_filter( 'elementor/shapes/additional_shapes', 'my_custom_shapes' );

function my_custom_shapes( $shapes ) {
    // シェイプの追加処理
    return $shapes;
}

パラメータ

$shapes: 現在のシェイプの配列（この配列に新しいシェイプを追加することで利用可能になる）

戻り値

追加したシェイプを含む配列

使用可能なプラグインバージョン

Elementor 3.0.0 以降

使用可能な WordPress バージョン

WordPress 5.0 以降

サンプルコード

サンプルコード 1: カスタムシェイプの追加

このコードは、円形のシェイプを追加するサンプルです。

add_filter( 'elementor/shapes/additional_shapes', function( $shapes ) {
    $shapes['my_circle'] = 'カスタム円';
    return $shapes;
});

このコードは、新しいオプションとして「カスタム円」を追加します。引用元: https://elementor.com

サンプルコード 2: 四角形のカスタマイズ

四角形のシェイプにカスタムスタイルを追加するサンプルです。

add_filter( 'elementor/shapes/additional_shapes', function( $shapes ) {
    $shapes['my_square'] = array(
        'name' => 'カスタム四角形',
        'styles' => array(
            'border' => '2px solid #000',
            'background' => '#f00',
        )
    );
    return $shapes;
});

このコードは、カスタムスタイルを設定した四角形を作成します。引用元: https://elementor.com

サンプルコード 3: 星型シェイプの追加

独自の星型シェイプを追加する例です。

add_filter( 'elementor/shapes/additional_shapes', function( $shapes ) {
    $shapes['my_star'] = 'カスタム星型';
    return $shapes;
});

このコードでは、ユーザーが使用できる星型のシェイプを定義します。引用元: https://elementor.com

サンプルコード 4: 飛行機型シェイプの作成

飛行機の形を模したカスタムシェイプを追加するサンプルです。

add_filter( 'elementor/shapes/additional_shapes', function( $shapes ) {
    $shapes['my_airplane'] = 'カスタム飛行機型';
    return $shapes;
});

このコードにより、飛行機のシェイプとして「カスタム飛行機型」を追加します。引用元: https://elementor.com

サンプルコード 5: ハート型シェイプの追加

ハート型のシェイプを追加する例です。

add_filter( 'elementor/shapes/additional_shapes', function( $shapes ) {
    $shapes['my_heart'] = 'カスタムハート型';
    return $shapes;
});

このコードは、シェイプの選択肢としてハート型を提供します。引用元: https://elementor.com

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

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

概要

構文