ブログ記事を書く時に画像を使うと思いますが、ネットワークの問題や画像の容量によって読み込みに時間がかかると画像が正しく表示されなかったり、ローディングに時間がかかると離脱につながります。
その離脱を少しでも軽減するための1つの方法として、ローディングアイコンを表示させる手段があります。目視的に読み込み中だと認識できますので、記事データ読み込みのストレスを緩和する効果に期待できます。
そのようなときに有効なのが、wordpressのプラグインの「Preloader」です。
「Preloader」を適用させるためには、header.phpの編集が必要になりますので、編集方法を含めて「Preloader」のインストール方法と設定方法について紹介します。
header.phpの編集方法
WordPressメニューの「外観」⇒「テーマの編集（テーマエディター）」から編集可能
Preloaderのインストール・有効化
１．WordPressのプラグインから新規追加を選択します。
２．プラグインを追加の画面からキーワードのところに「Preloader」と入力して検索し「今すぐインストール」をクリックします。
３．インストールが出来たら有効化します。
４．有効化が完了すると以下のようにプラグイン一覧に表示されます。
header.phpの編集
「Preloader」はプラグインをインストール・有効化しただけでは使えません。
header.phpの編集が必要です。
header.phpの編集や本記事に記載しているコードの利用は自己責任でお願いします。
１．WordPressメニューの「外観」⇒「テーマの編集（テーマエディター）」から「header.php」を選択します。
２．「header.php」の中にある<body>の開始タグの直下に以下コードを書き込みます。
<div id=”wptime-plugin-preloader”></div>
３．「ファイルを更新」をクリックして情報を反映させます。
更新ボタンを押さないと情報が反映されないので注意が必要です。
Preloaderの設定
１．WordPressメニューの「プラグイン」からPreloaderを選択します。
２．以下の赤枠のリンク部分をクリックします。
リンク先はPreloaderの提供元のプラグインのサイトにつながります。ここから好きなアニメーションのダウンロードをすることができます。
赤枠のリンク先のURLは以下になっています。
https://icons8.com/preloaders/
３．サイトのTOP画面です。
いろいろなアイコンが用意されています。
ローディングのアイコンとして使えそうなは以下の2つのカテゴリでした。
- CIRCULAR (SPINNERS)
- RECTANGULAR
４．自分の好みのアイコンを選択して「DOWNLOAD」ボタンからアニメーションをダウンロードします。
５．WordPressメニューの「メディア」からGIFファイルをアップロードします。
Preloaderの詳細設定で、アップロードしたアニメーションのパス（絶対パス）が必要になりますのでURLをコピーしておきます。
Preloaderの詳細設定
１．WordPressメニューの「プラグイン」からPreloaderを選択します。
２．ダウンロードした時のアニメーションを指定するため、さきほどコピーしたアニメーションの保存パスを赤枠のところの貼り付けます。
他の設定はデフォルト設定ままで問題ありません。
３．「Save Changes」をクリックして保存します。
補足：各項目の設定内容について
Background Color
アニメーション表示時の背景色
Preloader Image
アニメーション画像の保存パスを設定
※デフォルトの値は削除し、表示させたいアニメーションを保存している絶対パスを入力します。
Preloader Image Width
【有料機能】アニメーション画像の横幅を設定
Preloader Image Height
【有料機能】アニメーション画像の縦幅を設定
Display Preloader
アニメーション画像表示するタイミングを選択
・In The Entire Website：すべてのページ読み込み時に表示
・In Home Page only：トップページのみ表示
・In Front Page only：こちらもトップページのみ表示（違いがよく分からず）
・In Posts only.：投稿ページのみ表示
・In Pages only：固定ページのみ表示
・In Categories only：カテゴリートップページのみ表示
・In Tags only：タグ検索後のトップページのみ表示
・In Attachment only：ファイルダウンロード時のみ表示
・In 404 Error Page only：ページが見つからない場合のみ表示
Preloader Element
ここに書かれているコードをheader.php内へ追記することで動作することの説明
まとめ
設定が完了すると、このようなローディングのアニメーションを画像などの読み込み中に表示させることができます。
header.phpの編集が必要ですが、気になる方は導入してみてはどうでしょうか。
関連の書籍