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

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

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

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

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

こんな場合におススメ

  • コンテンツの読み込み中に、ローディングアニメーションを表示したい
プラグインを使ってできること

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

インストール

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

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

WP Smart Preloader

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

関連記事

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

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

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

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

【WP Smart Preloader】の設定

  • STEP1
    WP Smart Preloaderを開く
    プラグインを有効化すると、管理画面 > 設定 内に【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プリローダーをフェードアウトする時間
  • STEP3
    保存
    項目を設定したら変更を保存します。
スポンサーリンク

動作確認環境

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

まとめ

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

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

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