ローディングアニメーションをWebサイトに導入しようとした時のプラグインメモ。
ローディングアニメーション用プラグインの導入方法
- ダッシュボードメニュ → プラグイン → 新規追加
- プラグインの検索で【WP Smart Preloader】を検索
- WP Smart Preloaderをインストール後、有効化
WP Smart Preloaderの設定
ダッシュボードメニュー → 設定 → 【WP Smart Preloader】
WP Smart Preloaderの設定項目
Select Preloader：6パターンのローディングアニメーションが選べる。自作のCSSアニメーションを使いたい場合は、Custom Animationを選択
Show only on Home Page：ここをチェックするとホームページだけにローディングアニメーションが適用される。
Custom Animation：Custom Animationを選択した場合に使用。自前のローディングアニメーションに使用するHTMLコードを入力する。
Custom CSS：同じくCustom Animationを選択した場合に使用。自前のローディングアニメーションに使用するCSSコードを入力する。
Duration to show Loader：ローディングアニメーションを表示する時間。
このプラグインは、自作のアニメーションを設定できるところが素敵だと思います。
設定も複雑なものがなく簡単なものばかりなので、初心者にも簡単にローディングアニメーションの導入が可能です。
今回は、ローディングアニメーションを使うとサイトの直帰率が下がるという話を読んでこのプラグインを使ってみました。
使ってみた感想としては、ローディングアニメーションは上手く使わないと、逆に直帰率が上がりそうな印象を受けました。
私自身のスキルなどがもう少し上がってから、Webサイトに導入してみようかと思います。