今回はWordPressでサクッとページのローディング画面を表示する方法を記載します。

プラグインをインストールする

「プラグイン」→「新規追加」から「Preloader」を検索します。
検索を行うと「Preloader」のプラグインが表示されますので「今すぐインストール」を押します。

インストールが完了すると「有効化」ボタンに変わりますので、有効化を押します。

これで、プラグインのインストールは完了になります。

プラグインの設定をする

プラグインメニューの「Preloader」の項目をクリックします。

各種設定項目は下記のようになっています。

Background Color

ローディング画面の背景色の設定

Preloader Image

ローディング画面に表示する画像

Preloader Image Width

（おそらく）ローディング画面に表示する画像の横幅設定

Preloader Image Height

（おそらく）ローディング画面に表示する画像の縦幅設定

Display Preloader

ローディング画面を表示する範囲

　

どうやら無料版と有料版があり、無料版は128*128の画像しかサポートしていないみたいです。
ですが、親切にgif画像をダウンロードできるリンクを紹介してくれているので、デフォルトの画像から変えたい場合は下記を参照して画像を取得しましょう。
https://icons8.com/preloaders/

ローディング画面の画像を変更したい場合は、gifファイルをWordpressのメディアにアップロードして、アップロードしたURLを「Preloader Image」の項目にコピペするだけでOKです。

bodyタグの直後にタグを仕込む

ローディング画像を表示するためには下記のコードをbodyタグの下に埋め込む必要があります。

タグを埋め込む場所は「外観」→「テーマの編集」のheader.phpのファイルになります。
header.phpにbodyタグがあると思いますので、その下に先程のコードを追加します。

これで、ページの読み込み前に下記のようなローディング画像が表示されるようになります。

　

javascriptで組んでもそんなに難しくないコードなのですが、Wordpressだとプラグインを入れて少しカスタマイズをするだけで良いので非常に楽ですね。

これで、閲覧者のストレスが少しでも軽減できれば、よりユーザーフレンドリーなサイトになるかもしれません。

ではまた！