WordPressサイトにロード画面を実装できるプラグインをご紹介いたします。シンプルなロード画面なら簡単に実装可能です。重たいページを表示する際など、中途半端に読み込まれている状態を隠すために役立ちますので、チェックしてみてください。
有料版（Pro）にアップデートもできるようですが、当記事では無料版でできることをご紹介いたします。
Webページを閲覧する際に、ページの読み込みに時間がかかると、ユーザーは待ち時間にイライラしたり、ページが正常に表示されないのではないかと不安になったりすることがあります。ロード画面は、このようなユーザーの不安や不満を軽減するために、Webページによく用いられる仕組みです。 ロード画面の役...
「LoftLoader」の機能概要
ロード画面（読み込み中の画面）を簡単に実装できるプラグインです。無料版で設定できるロード画面の機能は以下の通りです。
- リアルタイムプレビュー
- 表示設定（サイト全体 or トップページのみ）
- 背景色とその透明度
- ロード完了後のアニメーション（4種類）
- ロードアイコンの変更（5種類＋オリジナル画像）
- 最大表示時間の設定
- ロード画面を閉じるボタンの設定
表示されるロード画面のサンプルはこんな感じです。
↓はgif形式なので動きも粗いですが、実際は綺麗にアニメーションしてくれます。
フェードのタイミングも美しいので、アイコンさえ気に入るものがあれば使えるプラグインかと思います。
「LoftLoader」のインストール
管理画面から「LoftLoader」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルをwp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
「LoftLoader」の基本的な使い方
有効化したらプラグイン画面の下記箇所よりロード画面の設定を行えます。
以下の画面が開いたら、それぞれを設定して上部の「Enable LoftLoader」にチェックを入れて公開すれば、設定したロード画面を有効化できます。
詳細設定については上から順に解説いたします。下2項目は設定不要です。
Display on（ロード画面の表示箇所）
表示箇所は「Enable LoftLoader」（ロード画面を有効化する）の下部にある「Display on」で設定します。それぞれ任意の表示を選択してください。
- Sitewide（サイト全体）
- Homepage only（トップページのみ）
サイト全体に表示してもページが読み込み次第ロード画面が閉じるので、煩わしさは感じませんでした。
Background（ロード画面の背景）
背景に関する項目は「Background」にて設定します。下記の3項目があり、それぞれリアルタイムプレビューされるのでイメージが湧きやすいです。
- Pick Color（背景色）
- Opacity（透明度）
- Ending Animation（ロード完了時のアニメーション4種類）
ロード完了時のアニメーションは、プレビューエリアにカーソルを合わせることで確認できます。
色によっては透明度を調整しても綺麗に見えるかもしれません。ロードアニメーションは以下の4種類から選択できます。
fade
Slide Left & Right
Slide Up
Slide Up & Down
トップページのみに表示する場合に、フェード以外のアニメーションを活用できそうですね。
Loader（ロードアイコン）
ロードアイコンは、「Loader」にて変更できます。用意されている5種類のアイコンもしくは、オリジナル画像を設定可能です。
シンプルなアイコンもあるので、サイトに最適なものをチョイスしてみてください。
More（ロード画面の表示時間）
ロード画面の表示時間は「More」で設定可能です。用意されているのは下記の2つの項目です。
- Maximum Load Time（ロード画面の最大表示時間）
- Close Button（ロード画面を閉じるボタン）
基本的にはページを読み込み次第、ロード画面は非表示になりますが、何らかのエラーで読み込みが終わらない時に活躍する機能です。指定した時間で強制的にロード画面を閉じますので、10秒ぐらいを目処に設定しておくといいでしょう。
「ロード画面を閉じるボタン」も同じで、そういったエラー対策の機能です。どちらかを設定しておけば問題無いはずです。指定した秒数後に画面右上に表示され、任意でテキストも設定可能です。
まとめ
ロード画面を簡単に実装できるプラグインをご紹介いたしました。
サイト内に複数の画像や動画を設置すると、ページの読み込みに時間がかかる場合があります。ページをロード中であることをユーザーに伝えると同時に、中途半端に読み込まれたページを見せないためにも当プラグインを使ってサクッとロード画面を実装してみてはいかがでしょうか。
TCDテーマには、サイトの世界観を表現できる高機能なロード画面が搭載されているテーマもあります。よろしければチェックしてみてください。
基本的なロード画面オプションは、多くのTCDテーマでご活用いただけます。
多くのTCDテーマには、ロード画面を表示&カスタマイズできる機能が備わっています。 サイト訪問時やページ読み込み時に表示されるロード画面を、お好みに合わせて設定可能です。 当記事では、TCDテーマオプション「ロード画面」の設定方法を解説いたします。 Word...
コメント