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

概要

elementor/controls/hover_animations/additional_animations フィルタは、Elementorにおけるホバーアニメーション機能を拡張するために使用されるフックです。このフィルタを利用すると、テーマやプラグイン開発者は、Elementor のアニメーション設定にカスタムアニメーションを追加できるようになります。これにより、ユーザーはより多くのカスタマイズオプションを持つことができ、ウェブサイトのデザインに独自のトーンを加えることが可能になります。

elementor/controls/hover_animations/additional_animations フィルタが実装されるシナリオは以下の通りです：

カスタムアニメーションの追加
ショートコードやウィジェットでのアニメーション設定のカスタマイズ
テーマ固有のホバー効果の設定
アニメーションの遅延時間の指定
ユーザーインターフェースの動的更新
特定のページやセクションに対するホバーアニメーションの適用

構文

add_filter('elementor/controls/hover_animations/additional_animations', 'custom_hover_animations');

function custom_hover_animations($animations) {
    // ここにアニメーションを追加するコードを書く
    return $animations;
}

パラメータ

$animations: 既存のアニメーションリストを保持する配列。この配列にカスタムアニメーションを追加することができます。

戻り値

修正されたアニメーションの配列。

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

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

サンプルコード

サンプル 1: シンプルなアニメーションを追加

add_filter('elementor/controls/hover_animations/additional_animations', 'add_simple_hover_animation');

function add_simple_hover_animation($animations) {
    $animations['fade-in'] = 'フェードイン';
    return $animations;
}

このコードは、Elementorのホバーアニメーションの選択肢に「フェードイン」アニメーションを追加します。

サンプル 2: 回転アニメーションを追加

add_filter('elementor/controls/hover_animations/additional_animations', 'add_rotate_hover_animation');

function add_rotate_hover_animation($animations) {
    $animations['rotate'] = '回転';
    return $animations;
}

このサンプルは、ホバー時に要素が回転するアニメーションを追加します。

サンプル 3: スケールアニメーションを追加

add_filter('elementor/controls/hover_animations/additional_animations', 'add_scale_hover_animation');

function add_scale_hover_animation($animations) {
    $animations['scale-up'] = '拡大';
    return $animations;
}

ホバー時に要素が拡大する効果を持つアニメーションを追加します。

サンプル 4: スライドイングアニメーションを追加

add_filter('elementor/controls/hover_animations/additional_animations', 'add_slide_hover_animation');

function add_slide_hover_animation($animations) {
    $animations['slide-in'] = 'スライドイン';
    return $animations;
}

このコードは、ホバー時に要素がスライドインするアニメーションを追加します。

サンプル 5: ジャンプアニメーションを追加

add_filter('elementor/controls/hover_animations/additional_animations', 'add_jump_hover_animation');

function add_jump_hover_animation($animations) {
    $animations['jump'] = 'ジャンプ';
    return $animations;
}

ホバー時に要素がジャンプするアニメーションを追加します。

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

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

ここでは、elementor/controls/hover_animations/additional_animations フィルタを使用する可能性のある特定のアクションは示されておらず、利用シナリオは他のフィルタやアクションと同様になります。

概要

構文