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

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

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

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

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

こんな場合におススメ

  • コンテンツの読み込み中に、ローディングアニメーションを表示したい

プラグインを使ってできること

  • ページの読み込み中、ローディングアニメーション(プリローダー)を表示する
スポンサーリンク

使用イメージ

インストール

WP Smart Preloader インストール

  1. 管理画面から プラグイン > 新規追加 とクリックする
  2. WP Smart Preloader“で検索する
  3. “今すぐインストール”をクリック。インストール後、有効化する

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

WP Smart Preloader – WordPress プラグイン | WordPress.org

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

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]

WordPressのプラグインをインストールする方法

設定

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

  • STEP1
    WP Smart Preloader】を開きます。

    WP Smart Preloader 設定

  • STEP2
    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プリローダーをフェードアウトする時間

    項目を設定したら変更を保存します。

スポンサーリンク

動作確認環境

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

まとめ

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

他にプリローダーを表示するプラグイン

ローディングアニメーション(プリローダー)を表示する【WP Smart Preloader】の使い方
最新情報をチェックしよう!
スポンサーリンク