WordPressを使ってWEBサイトを作っている時に、かっこいいローディング画面が欲しいと思ったことはありませんか？

ローディング画面を実装する一番簡単な方法をお教えします。

それは、そもそもローディング画面がついているテーマを使うこと！！（爆）

元も子もないですが、これが一番簡単にロード画面がついたWEBサイトを手に入れる方法です。

ただテーマデフォルトのローディング画面だと誰かと同じになる可能性もあるので出来るならオリジナルで設定したいですよね。

テーマのローディング画面を変更することも可能ですが、テーマの機能設定に変更できる機能がない限り知識がないと変更ができません。

今回は、そんなローディング画面を簡単に自分好みにカスタムできるWordPressプラグインを３つご紹介いたします。

１．Preloader

インストール方法

WordPressダッシュボードのプラグインページで新規追加から「Preloader」を検索もしくは、こちらからダウンロードしたファイルをアップロードしして有効化します。

設定方法

ダッシュボードから「プラグイン」→「Preloder」の順にクリック

設定画面

Background color：ローディング画面の背景色の設定
Preloader image：ローディング画面で使いたい画像（JPG、PNG、GIF）などを指定します。
Preloader Image Width：ローディング画面に表示する画像の横幅設定（有料版機能？）
Preloader Image Height：ローディング画面に表示する画像の縦幅設定（有料版機能？）
Display Preloder：表示する範囲の設定です。

header.phpにコードを記載する。

ダッシュボードメニューから「外観」→「テーマエディター」→「header.php」へアクセスし
bodyタグの直下に下記コードを追記する。

<div id="wptime-plugin-preloader"></div>

これでPreloaderの設定は完了です。

２．Loading Page with Loading Screen

インストール方法

WordPressダッシュボードのプラグインページで新規追加から「Loading Page」を検索もしくは、こちらからダウンロードしたファイルをアップロードして有効化します。

設定方法

ダッシュボードメニューから「設定」→「Loading Page」へアクセスし設定を行う。

ぱっと見の設定項目は、多いですがほぼ設定する必要はありません。
設定する項目は画像下にまとめておきます。

Enable loading screen：ロード画面の有効化
Display the loading screen once per session：セッションごとに1回ロード画面を表示
Display loading screen in：ロード画面表示の指定ができる（ホームのみかすべてのページか特定ページ）
Exclude loading screen from：ロード画面を除外する
Select the loading screen：ロード画面を選択できる
Selet background color：背景色を選択できる
Select image as background：背景として画像を選択できる
Display image in fullscreen；フルスクリーンの表示イメージ
Select foreground color：ロードバーの色を選択できる
Apply the effect on page：エフェクトを適用する
Display loading percent：パーセント表示

上記のところでほぼ設定が完結しますが、他にも設定できる項目がありますので色々試してみてください。

LazyLoadingを設定したい場合は有料プラグインの購入が必要となります。

全ての設定が終わればページ下部の「Update Settings」のボタンで保存を行います。
これで、ページの読み込み前に下記のようなローディング画像が表示されるようになります。

３．LoftLoader

インストール方法

WordPressダッシュボードのプラグインページで新規追加から「LoftLoader」を検索もしくは、こちらからダウンロードしたファイルをアップロードして有効化します。

設定方法

下の画像の設定画面が出てきますので各設定を行っていきます。

Display on

プリローダーをサイト全体に設定するのか、ホームページのみに設定するかの設定です。

Background

「バックグランドの色」「透過度」「アニメーションの終了」を設定します。

「アニメーションの終了」はフェード、左右、上、上下へのスライドを設定します。

Loader

ここでローダーアニメーションとカラーを設定します。

ローダーのアニメーションは７個あります。

「コの字」の様な設定を選択した場合は８個の星型が選択されますが、ここにご自分の好きな画像を入れることが出来ます。

More

この項目は特に設定しなくて良いでしょう。

Maximum Load Timeは最大ロード時間を設定する場合です。するのであれば0以上の数字を入力してください。

Close Buttonはロード時間が完了するまで待ちたくない場合に閉じるボタンを設定することができます。

Advanced

外部のJavaScriptを使用するか、内部のJavaScriptを使用するかということですが、外部のままで問題ありません。

Proバージョンは特に不要です

ローダーのこちらでオリジナルの画像などを設定していただければ下記画像のようローディング画面の真ん中に画像が表示されます。

まとめ

簡単にローディング画面を表示するプラグインを３つご紹介いたしました。
今回紹介させていただいたプラグイン以外にも様々なものがありますが、私は上記の３つが使いやすかったです。１でご紹介させていただいたプラグインは、PHPファイルを触らないといけないので自信のない方は２か３をおすすめいたします。
下部にパーセンテージ表記が欲しければ２、設定の簡単さは３と各々特徴がございますので、ご自身の環境に合わせてご使用ください！