WordPressにLottieアニメーションを挿入するための詳細なチュートリアル

GIF は、WodPess を含むあらゆる Web サイト作成プラットフォームでアニメーション画像を挿入するための標準的な方法です。そして現在の最新トレンドは、ロッティーアニメーションを挿入して、魅力的なインタラクティブ要素を画像として表示することです。スケーラビリティのために SVG を使用することもできますが、Lottie を使用するとアニメーションをより細かく制御できます。この記事では、WodPess に Lottie アニメーションを挿入するための具体的なチュートリアルを紹介します。

ロッティーアニメーションとは何ですか?

Lottie は、iOS、Android、およびあらゆる Web プラットフォームにアニメーションを挿入するために使用できる JSON ベースのテキスト ファイル形式です。これは、Adobe After Effects アニメーション ファイルを JSON 形式にエクスポートし、ネイティブにレンダリングするために Aibnb のエンジニアによって開発されました。 Lottie アニメーションを使用する利点は次のとおりです。

• これはファイルサイズが非常に小さいオープンソース形式です。
• 実行時コントロールを備えたテキスト ファイル形式。
• 通常の GIF とは一線を画すインタラクティブなアニメーション。
• スケーラブルで高品質、静止画像のように機能します。

WodPessにLottieアニメーションを挿入する

ほとんどの無料ブロック プラグインは、WodPess にアニメーション ファイルを挿入するための Lottie アニメーション ブロックを提供します。たとえば、Ultimte Addons fo Gutenbeg (現在は Spect に名前が変更されています) または Kdence ブロック プラグインを使用できます。ここでは、WodPess ウェブサイトに Lottie アニメーションを挿入するための 2 つのプラグインについて説明します。

Kdenceブロックを使用してLottieアニメーションを挿入します

WoDPeSS リポジトリから「Kdence Blocks – Gutenbeg Blocks for Pge Builde Fetues」アドオンをインストールして有効化します。これは、Gutenbeg エディターにカスタム コントロールを備えた追加のブロックを追加するための無料プラグインです。

このプラグインは、サイトに挿入するアニメーションごとにカスタム投稿タイプとして再利用可能なブロックを作成するため、Lottie アニメーションよりもお勧めです。さらに、Kdence ブロックでは、WodPess ではデフォルトではサポートされていない Lottie アニメーション用の JSON ファイルのアップロードが可能になります。

• プラグインを有効にした後、新しい記事を作成するか、Lottie アニメーションを挿入する記事を編集します。
• 「/lottie」と入力して、「Lottie Animations」ブロックを検索して挿入します。

プラグインはサンプルのアニメーション ファイルを挿入し、ブロックのサイドバーに多数のコントロールが表示されます。

Kdence で Lottie アニメーションをカスタマイズする

ブロック設定は次のセクションで利用できます。

ソース ファイル – リモート ファイルから URL を貼り付けるか、カスタム JSON ファイルをアップロードするかの 2 つのオプションがあります。独自のファイルがない場合は、この記事の最後のセクションを参照して、無料の Lottie アニメーション ファイルを入手する方法を確認してください。ファイル ソースとしてローカル ファイルを選択すると、サイト内で以前に作成されたすべてのアニメーションを表示するドロップダウン リストが表示されます。これらのいずれかを選択するか、挿入する新しいアイテムをアップロードすることができます。ここで入力したタイトルは、再利用可能な Lottie アニメーション ブロックの名前として使用されます。

再生設定 – このセクションでは、アニメーションの動作を制御し、Web サイトでの再生方法を設定できます。再生/一時停止ボタンを表示したり、自動再生を有効にしたり、ホバー時またはページスクロール時にのみアニメーションを再生できるようにしたりできます。アニメーションをループするように設定し、ループ間の遅延を調整することも可能です。

サイズコントロール – この設定では、パディング、余白、幅を設定して全体のサイズを変更できます。これらのオプションを使用して、コンテンツ領域にアニメーションを合わせて配置することができます。

詳細 – これは、要素にカスタム CSS クラスを割り当てるための Gutenbeg のデフォルト オプションです。

完了したら、ページに他のコンテンツを追加し、「公開」ボタンを押して、Lottie アニメーションの動作を確認します。

ロティブロックの管理

[設定] > [コンセプト ブロック] メニューに移動し、[Lottie アニメーション] ボックスの下にある [Lottie アニメーションの管理] をクリックします。すると、すべての Lottie アニメーションを 1 か所で表示できるページに移動します。ご覧のとおり、Gutenbeg エディターに挿入したすべてのアニメーションは、実際には「kdence_lottie」という名前のカスタム記事タイプとして保存されます。ここから「新規追加」ボタンをクリックして新しいアニメーションを作成することもできます。これらは再利用可能なブロックであり、名前を検索することで Web サイトの任意の場所に挿入できます。

2. GutenbegのUltimte Addonを使用してLottieアニメーションを挿入する

Ast テーマを使用している場合、または何らかの理由で Kdence ブロックが正しく動作しない場合は、代替オプションとして Ultimte Addon fo Gutenbeg プラグイン (Spect と呼ばれます) を使用します。同様の Lottie Animation ブロックを提供しますが、機能は制限されています。プラグインを有効にした後、「設定∓>UAG」セクションに移動し、「Lottie」オプションを有効にします。変更を有効にするには、必ず「アセットの再生成」ボタンをクリックしてキャッシュをクリアしてください。

新しい投稿を作成するか、既存の投稿を編集して、Gutenberg エディターに移動します。エディターに /lottie と入力して、Lottie ブロックを挿入します。

Kdence ボックスとは異なり、UAG プラグインは JSON ファイルのアップロードをサポートしていません。したがって、「URL から挿入」オプションのみを使用して、サードパーティのサイトからの Lottie ファイル URL を使用できます。それ以外の場合は、追加のプラグインを使用して JSON アップロード サポートを有効にする必要があります。

UAG プラグインは、Lottie アニメーション ブロックの「コントロール」と「スタイル」設定を提供します。 [コントロール] セクションでは、ホバー時、クリック時、またはビューポートに基づいてアニメーションを再生するように設定できます。定義された速度でループしたり、アニメーションの順序を逆にしたりすることも可能です。

スタイル セクションでは、Lottie ブロックの幅、高さ、配置、背景色を調整できます。

Lottie アニメーション ファイルはどこで入手できますか?

これで、WodPess Web サイトに Lottie アニメーションを挿入する方法がわかりました。しかし、問題は無料の Lottie JSON ファイルを入手することにあります。デザイナーは Adob​​e After Effects を使用してアニメーションを作成し、それを Lottie ファイルに変換できます。

さらに、SVG ファイルを Lottie 形式に変換するオプションもあります。ただし、平均的な WodPess コンテンツ作成者やブロガーにとって簡単な選択肢は、Lottiefiles などのサイトで入手できる無料ファイルを再利用することです。

前述のように、Kdence は JSON ファイルのアップロードをサポートしていますが、UAG プラグインはサポートしていません。したがって、アップロードには Kdence ブロックを使用し、Lottiefiles サイトからの埋め込みには UAG プラグインを使用するようにしてください。

• Lottifiles の Web サイトにアクセスして、無料アカウントを作成します。
• 上部のナビゲーションを使用して「Discoe∓gt;Fee Animations」セクションに移動し、「Ctegoies」メニューを選択します。
• ここでは、さまざまなカテゴリの Lottie ファイルを表示し、お気に入りのアイテムを無料でダウンロードできます。

• プロジェクトを選択し、「ダウンロード」ボタンをクリックして、「Lottie JSON」を選択して JSON ファイルを取得します。 Kdence ブロック プラグインを使用するときにアップロードに使用できます。
• UAG などのプラグインの場合は、FTP を使用して JSON をアップロードし、サイトの URL を使用できます。または、HTML を取得してソース ファイルの URL を見つけ、それをサイトに埋め込みます。

Lottiefiles では、簡単に統合できるように WodPess プラグインと Elemento Po ウィジェットも提供されていることに注意してください。