早くて簡単!WordPressでアニメーションを実装する方法(プラグイン+コードで自作の解説付き)

2024.02.12
2024.02.12

みなさんこんにちは!エンジニアの高澤です!
今回はWordPressでアニメーションを実装する方法を解説したいと思います。

当記事では、WordPressに実装するアニメーションの内容としては、ページ上の要素が横にスライドしたり大きくなったりする動きや、アコーディオンやタブなどのUIのことをいいます。

アニメーションを実装できることは、サイトのブランドを表現することに役立ったり、ユーザーに対して使いやすいUIを提供するひと助けになるので、よろしければぜひ当記事をご活用いただけましたら幸いです。

どんなアニメーションを実装するのか

当記事では以下のようなアニメーションが実装について解説したいと思います。

  • 要素のアニメーション(スライド、バウンド等)
  • アコーディオン
  • タブ切り替え

上記のずれもサイトによっては必要なアニメーションと言っても過言ではありません。

これらアニメーションについて、解説していきたいと思います。

アニメーションを実装する方法

アニメーションを実装するには、主に2つの方法があります。

それは「プログラムで自作する方法」と「プラグインを使う方法」の2つです。

どちらにもメリットとデメリットがありますが、状況によってはどちらかが最適な手段になるかと思います。

当記事では、非エンジニアのブロガーの方や会社のウェブ担当者の方などを対象としていることはもちろん、エンジニアの方にもプログラムを利用して柔軟に実装できる方法の両方のパターンを解説いたします。

プラグインを利用して実装する方法

「Shortcodes Ultimate」プラグインを利用して実装する方法を解説したいと思います。

Shortcodes Ultimateプラグインとは、ショートコードを使って要素をアニメーションさせたりタブやアコーディオンなどの要素を追加することができるプラグインのことをいいます。

このプラグインを使えば、エンジニア周りのことを一切行わずにボタンをクリックするだけで簡単にアニメーションを設定することができます。

有料プランが用意されておりますが、無料版でも内容的にかなり充実しております。

それでは、このShortcodes Ultimateプラグインについて、インストールから使い方まで解説していきたいと思います。

プラグインをインストールする

まずはプラグインをインストールしていきます。

WordPress管理画面左メニューの「プラグイン」をクリックしてプラグインの設定ページを開きます、「新規プラグインを追加」ボタンをクリックしてプラグイン検索ページを開いたら、画面右側の検索キーワード入力ボックスにプラグイン名である「Shortcodes Ultimate」を入力します。

すると、上記のようにShortcodes Ultimateプラグインが検索結果に表示されるため、「今すぐインストール」をクリックして「有効化」をします。

有効化した後、管理画面左メニューに「ショートコード」という項目が追加されます。
これでアニメーションの設定ができる準備は整いました。

「投稿」や「固定ページ」などの各投稿タイプにShortcodes Ultimateのショートコードを追加することができる「ショートコードを挿入」ボタンが追加されます。

アニメーションを設定する

インストールしてアニメーション設定の準備ができたら、管理画面左メニューの「投稿」から投稿編集画面を開いてください。

すると投稿編集画面のエディタの上に「ショートコードを挿入」ボタンが追加され、クリックするとショートコードが追加できます。

「ショートコードを挿入」ボタンをクリックすると、上図のようにポップアップが表示されてアニメーションのためのショートコードを選択できるようになります。

あとはボタンやポップアップの内容を操作してショートコードを追加し、アニメーションの設定をするだけです。

ライブラリで自作して実装する方法(エンジニア向け)

次は、エンジニアの方向けにソースコードのライブラリを利用してアニメーションを実装する方法を解説したいと思います。

当記事で扱うライブラリは「Animate.css」です。

このライブラリは、要素を上下左右の任意のアニメーションを実装するためのCSSライブラリのことを言います。

このライブラリを利用することによって、エンジニアによる実装が必要になることが基本になりますが、エンジニア的には非常に簡単に工数をかなり抑えて実装を行うことが可能になります。

このライブラリはアクティブな動きのあるサイトを実装する際に非常に重宝し、実際に筆者が実務でも使用したくらい重宝しているライブラリです。

このライブラリの公式ページは以下のURLになります。

https://animate.style/

ライブラリの本体ファイルを読み込む

まず初めに、ライブラリの本体ファイルを読み込みます。

以下のソースコードをheadタグ内などCSSを管理している箇所にコピー&ペーストしてください。

これでAnimate.cssを使用する準備は整いました。

基本的なコードを記述する

Animate.cssの準備が整ったら、次は早速動かす対象物をHTMLで記述していきましょう。

以下のHTMLソースコードをファイルにコピー&ペーストしてください。

完了したら、早速ブラウザで表示を確認してみてください。

すると、文字がバウンディングするような動きが確認できるかと思います。

アニメーションの種類を変更する

Animate.cssではclass属性にアニメーションごとに決められたクラス名を追加することでそのアニメーションを実装することができます。

上図の右側のメニューにある一覧がアニメーションの種類になっており、それぞれクリックするとそのアニメーションのクラス名がコピーできます。

コピーできたらclass属性に追加しましょう。
先ほどのHTMLコードを使って、以下のように「animate__bounce」を「animate__swing」に変更してください。

完了したら動きを確認してください。「swing」のアニメーションに切り替わっているかと思います。

このようにお好きなアニメーションのクラス名を使ってカスタマイズしてみてください。

クラス属性で動きを制御・調整する

次はアニメーションの動きを制御・調整する方法について解説いたします。

こちらについても同じで、決められたクラス名をプラスで追加する形でclass属性を設定いたします。

以下のテーブル表の内容は、アニメーション開始時間を遅延させるクラス名の表となっております。

クラス名 初期遅延時間 説明
animate__delay-2s 2s 2秒遅延させる
animate__delay-3s 3s 3秒遅延させる
animate__delay-4s 4s 4秒遅延させる
animate__delay-5s 5s 5秒遅延させる

上記のテーブル表の中にあるクラスを対象のHTMLのclass属性に追加します。

先ほどのHTMLのサンプルコードを例に出すと、以下のようにしていただければ問題なく機能します。

アニメーション開始後2秒経過したら文字が動きだすのがわかるかと思います。

設定したアニメーションを確認する

ここまで完了したらAnimate.cssの実装は完了です。

あとは説明した内容と同じようにHTMLのclass属性に任意の動きのためのクラス名を追加したりして、自由にカスタマイズしてみてください。

ここまででAnimate.cssの解説は以上になります。
お疲れ様でした!

まとめ

これでWordPressでアニメーションを実装する方法についての解説は以上になります。

WordPressでアニメーションを実装する方法は主に2つあり、「プログラムで自作する方法」と「プラグインを使う方法」があります。

それぞれ状況によってメリット・デメリットがあるかと思いますが、両面から対応できるようになれればさまざまなプロジェクトがある中で柔軟に対応することが可能です。

そのため、当記事ではその両方の面からそれぞれ解説して実務に役立つような構成で執筆しております。

また今回解説する「Shortcodes Ultimate」プラグインは、無料版でも十分高機能なプラグインであり、簡単にサイト上にアニメーションを設定することができてエンジニアでなくても簡単に扱うことが可能です。

このように当記事では優秀なプラグインやCSSライブラリを厳選しつつ実務で使えるような記事の構成にしておりますため、よろしければぜひ当記事を繰り返しお使えいただけましたら幸いです。

2024.02.12
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ