ローディングアニメーション(プリローダー)を表示する【WP Smart Preloader】

コンテンツの読み込みに時間がかかってしまうサイトは、どうしてもユーザーの離脱率が高くなってしまいます。

データの読み込み中であることが分かれば、離脱率を少し抑えることができるかもしれません。

WP Smart Preloader】は、ページの読み込み中にローディングアニメーション(プリローダー)を表示するプラグイン。

ローディングアニメーションを表示することで、ユーザーの離脱率を抑える可能性が高くなります。

こんな場合におススメ
  • コンテンツの読み込み中に、ローディングアニメーションを表示したい
プラグインを使ってできること
  • ページの読み込み中、ローディングアニメーション(プリローダー)を表示する
目次

インストール

WP Smart Preloader インストール
WP Smart Preloader インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. WP Smart Preloaderで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

ローディングアニメーションの表示方法

プラグインを有効化すると、自動的にページ読み込み時にローディングアニメーションが表示されるようになります。

【WP Smart Preloader】の設定

STEP
WP Smart Preloaderを開く

プラグインを有効化すると、管理画面 > 設定 内に【WP Smart Preloader】が表示されるので、そこから設定を行います。

WP Smart Preloader 設定
STEP
項目の設定
WP Smart Preloader 設定
WP Smart Preloader 設定
Select Preloaderプリローダーを選択 自前のプリローダーを使用する場合は『Custom Animation』を選択
Show only on Home Pageホームページ(トップぺージ)のみプリローダーを表示するかの選択
Custom Animation自前のプリローダーを使用する場合、HTMLコードを記述する
Custom CSS自前のプリローダーを使用する場合、CSSを記述する
Duration to show Loaderプリローダーを表示する時間
Loader to Fade Outプリローダーをフェードアウトする時間
STEP
保存
項目を設定したら変更を保存します。

動作確認環境

  • バージョン 1.11.5
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【WP Smart Preloader】は、ローディングアニメーション(プリローダー)を表示するプラグイン。
  • プリローダーを表示することで、ユーザーの離脱率が抑えられる可能性が高くなります。。
他にプリローダーを表示するプラグイン
目次
閉じる