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

概要

elementor/files/svg/allowed_attributes フィルタは、Elementorで使用されるSVGファイルの許可属性を変更するためのフックです。このフィルタを利用することで、Elementor内でSVGファイルに指定できる属性をカスタマイズし、セキュリティやデザインの必要に応じて調整することが可能です。

このフィルタは以下のような機能を実装する際によく使われます：

SVGファイルに新しいカスタム属性を追加する。
既存のSVG属性を削除または制限する。
特定の条件に基づいて属性の許可リストを動的に変更する。
プラグインやテーマの要件に合わせてSVGの使用を最適化する。
SVGの再利用性を高めるために属性管理を行う。
セキュリティ強化のために不要な属性を削除する。

構文

add_filter( 'elementor/files/svg/allowed_attributes', 'custom_allowed_svg_attributes' );
function custom_allowed_svg_attributes( $allowed_attributes ) {
    // カスタムロジックを追加
    return $allowed_attributes;
}

パラメータ

$allowed_attributes: Elementorで許可されているSVG属性の配列。

戻り値

許可されたSVG属性の配列を返します。

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

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

サンプルコード

サンプルコード 1

add_filter( 'elementor/files/svg/allowed_attributes', 'allow_custom_svg_attributes' );
function allow_custom_svg_attributes( $allowed_attributes ) {
    // 新しいカスタム属性を追加
    $allowed_attributes[] = 'data-custom';
    return $allowed_attributes;
}

このコードは、SVGファイルに data-custom 属性を追加できるようにするサンプルです。

サンプルコード 2

add_filter( 'elementor/files/svg/allowed_attributes', 'remove_svg_title_attribute' );
function remove_svg_title_attribute( $allowed_attributes ) {
    // title属性を削除
    if ( ( $key = array_search( 'title', $allowed_attributes ) ) !== false ) {
        unset( $allowed_attributes[ $key ] );
    }
    return $allowed_attributes;
}

このコードは、SVGファイルから title 属性を削除するする例です。

サンプルコード 3

add_filter( 'elementor/files/svg/allowed_attributes', 'conditionally_allow_svg_attributes' );
function conditionally_allow_svg_attributes( $allowed_attributes ) {
    // 特定の条件に基づいて属性を追加
    if ( current_user_can( 'administrator' ) ) {
        $allowed_attributes[] = 'data-admin';
    }
    return $allowed_attributes;
}

このコードは、管理者ユーザーのみが data-admin 属性をSVGに追加できるようにする例です。

サンプルコード 4

add_filter( 'elementor/files/svg/allowed_attributes', 'customize_svg_attributes' );
function customize_svg_attributes( $allowed_attributes ) {
    // 属性のリストをカスタマイズ
    return array('fill', 'stroke', 'class', 'style');
}

このコードは、SVGファイルに許可される属性を特定の属性だけに制限する例です。

サンプルコード 5

add_filter( 'elementor/files/svg/allowed_attributes', 'add_svg_accessibility_attributes' );
function add_svg_accessibility_attributes( $allowed_attributes ) {
    // アクセシビリティ用の属性を追加
    $allowed_attributes[] = 'role';
    $allowed_attributes[] = 'aria-label';
    return $allowed_attributes;
}

このコードは、SVGにアクセシビリティ関連の属性 (role, aria-label) を追加できるようにする例です。

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

アクション	使用可能性
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

概要

構文