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

概要

elementor/files/svg/allowed_elements フィルタは、Elementor プラグインで SVG ファイルの処理をカスタマイズするために使用されるフィルタです。このフィルタを使用することで、SVG ファイルにおける許可された要素を制御することができ、セキュリティー向上や表示の最適化に役立ちます。具体的には、以下のような機能を実装する際によく使われます：

SVG に特定の HTML 要素を追加する
不要な要素を削除し、セキュリティを強化する
SVG のクラスや ID をカスタマイズする
不要な属性を取り除く
タグの変換を行い、特定のスタイルを適用する
SVG のデフォルトスタイルをオーバーライドする

フィルタの構文

add_filter('elementor/files/svg/allowed_elements', 'custom_allowed_svg_elements');

パラメータ

$allowed_elements: 許可された SVG 要素の配列。

戻り値

カスタマイズされた SVG 要素の配列。

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

このフィルタは Elementor プラグインのバージョン 2.10 以降で使用可能です。

使用可能な WordPress バージョン

WordPress バージョン 5.0 以降で使用可能です。

サンプルコード

サンプル 1: 特定の SVG 要素を許可する

add_filter('elementor/files/svg/allowed_elements', function($allowed_elements) {
    $allowed_elements[] = 'circle';
    return $allowed_elements;
});

// このコードは、SVG ファイル内で 'circle' 要素を許可します。

引用元: https://docs.elementor.com/

サンプル 2: 複数の SVG 要素を許可する

add_filter('elementor/files/svg/allowed_elements', function($allowed_elements) {
    return array_merge($allowed_elements, ['rect', 'ellipse']);
});

// このコードは、'rect' と 'ellipse' 要素を許可します。

引用元: https://developer.wordpress.org/

サンプル 3: 特定の要素を削除する

add_filter('elementor/files/svg/allowed_elements', function($allowed_elements) {
    $key = array_search('script', $allowed_elements);
    if ($key !== false) {
        unset($allowed_elements[$key]);
    }
    return $allowed_elements;
});

// このコードは、'script' 要素を SVGから削除します。

引用元: https://www.wpbeginner.com/

サンプル 4: CSS クラスを追加する

add_filter('elementor/files/svg/allowed_elements', function($allowed_elements) {
    if (in_array('path', $allowed_elements)) {
        // SVG 要素に特定の CSS クラスを追加する処理
    }
    return $allowed_elements;
});

// このコードは、'path' 要素が許可されている場合に CSS クラスを追加する例です。

引用元: https://www.wpexplorer.com/

サンプル 5: 属性を制限する

add_filter('elementor/files/svg/allowed_elements', function($allowed_elements) {
    foreach ($allowed_elements as $element) {
        if ($element === 'image') {
            //特定の属性を制限するロジックを追加
        }
    }
    return $allowed_elements;
});

// このコードは、'image' 要素の属性制限の処理の例です。

引用元: https://www.sitepoint.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

概要