2026年8月28日

WordPressのLottieアニメーションを埋め込む方法

メディア・画像

はじめに

Lottieアニメーションは、サイトの視覚的な魅力を高め、訪問者とのエンゲージメントを向上させるための人気のあるツールです。WordPressでLottieアニメーションを使用することで、ユーザーインターフェースをよりダイナミックかつインタラクティブにすることができます。

症状・背景

このテーマが必要になる主な場面:

サイトのロゴやアイコンに動きを追加する
ボタンクリック時のアニメーション効果を実装する
スライダーまたはギャラリーアイテム間でのスムーズな移行を提供する
ユーザーインターフェースのフィードバックを視覚的に表現する

手順・設定方法

ステップ1: Lottieファイルの準備とJavaScriptライブラリのインストール

# WordPressテーマディレクトリに移動します。
cd wp-content/themes/your-theme/

# Lottieアニメーションファイルを格納する新しいフォルダを作成します。
mkdir lottie-animations

# 必要なLottieアニメーションJSONファイルをダウンロードし、lottie-animationsフォルダに配置します。

# npmパッケージマネージャーを使用してlottie-webライブラリをインストールします（npmは事前にインストール済みであることを確認してください）。
npm install lottie-web

ステップ2: テーマのJavaScriptファイルにLottieライブラリを読み込む

# functions.phpファイルを開きます。

// ウェブサイトにlottie-webライブラリを読み込みます。
function enqueue_lottie_script() {
    wp_enqueue_script( 'lottie-js', get_template_directory_uri() . '/node_modules/lottie-web/build/player/lottie.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_lottie_script' );

// オプション: 独自のJavaScriptファイルを読み込んでLottieアニメーションを制御します。
function enqueue_custom_script() {
    wp_enqueue_script( 'custom-lottie-js', get_template_directory_uri() . '/js/custom-lottie.js', array('lottie-js'), null, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );

ステップ3: HTMLとJavaScriptを使用してLottieアニメーションを実装する

# テーマのHTMLファイル（例：header.php）に新しいセクションタグを追加します。
<div id="lottie-animation"></div>

// custom-lottie.jsファイルを作成し、以下のコードを挿入します。

document.addEventListener('DOMContentLoaded', function () {
    var animationElement = document.getElementById('lottie-animation');
    if (animationElement) {
        // LottieアニメーションJSONファイルのパスを指定します。
        var lottieConfig = { path: '/wp-content/themes/your-theme/lottie-animations/example.json' };

        // Lottieアニメーションを開始します。
        lottie.loadAnimation(lottieConfig);
    }
});

ステップ4: アニメーションのカスタマイズと実践的な応用

# custom-lottie.jsファイルに追加の設定や操作を行います。

document.addEventListener('DOMContentLoaded', function () {
    var animationElement = document.getElementById('lottie-animation');
    if (animationElement) {
        // LottieアニメーションJSONファイルのパスを指定します。
        var lottieConfig = { path: '/wp-content/themes/your-theme/lottie-animations/example.json' };

        // アニメーションを読み込みます。
        var animation = lottie.loadAnimation(lottieConfig);

        // オプション：ボタンクリック時にアニメーションを開始または停止します。
        document.getElementById('start-animation-button').addEventListener('click', function() {
            if (animation.isPaused()) {
                animation.play();
            } else {
                animation.pause();
            }
        });
    }
});

注意事項

Lottieアニメーションファイルは、適切なフォルダ構造に配置する必要があります。
JavaScriptの読み込み順序と依存関係を正確に指定することが重要です。
ユーザーフレンドリーで直感的なアニメーション効果を実現するために、アニメーションの速度や反復回数などを調整します。
セキュリティ上の注意点:

- 外部から直接アクセス可能なファイルパスには十分なセキュリティ対策を行うこと。

- JSONデータに含まれるコードは信頼できるソースからのものであることを確認すること。

まとめ

1. Lottieアニメーションの準備: Lottieアニメーション用のJSONファイルをダウンロードし、適切なディレクトリに配置します。

2. ライブラリのインストールと読み込み: lottie-webライブラリをnpmでインストールし、その読み込みをテーマのJavaScriptファイル内で実装します。

3. HTML構造の設定: 必要なアニメーション要素をHTMLに追加し、JavaScriptを使用してアニメーションを制御します。

4. カスタマイズと応用: アニメーションの動作や表示方法を調整することで、より効果的なユーザーインターフェースを作成できます。

Post Views: 16