WordPress

【WordPress】画像の読み込み中にローディングアイコンを表示できる「Preloader」

ブログ記事を書く時に画像を使うと思いますが、ネットワークの問題や画像の容量によって読み込みに時間がかかると画像が正しく表示されなかったり、ローディングに時間がかかると離脱につながります。

 

その離脱を少しでも軽減するための1つの方法として、ローディングアイコンを表示させる手段があります。目視的に読み込み中だと認識できますので、記事データ読み込みのストレスを緩和する効果に期待できます。

 

そのようなときに有効なのが、wordpressのプラグインの「Preloader」です。

 

「Preloader」を適用させるためには、header.phpの編集が必要になりますので、編集方法を含めて「Preloader」のインストール方法と設定方法について紹介します。

header.phpの編集方法

WordPressメニューの「外観」⇒「テーマの編集(テーマエディター)」から編集可能

 

Preloaderのインストール・有効化

1.WordPressのプラグインから新規追加を選択します。

プラグインインストール

 

 

 

 

 

2.プラグインを追加の画面からキーワードのところに「Preloader」と入力して検索し「今すぐインストール」をクリックします。

wordpress_preloader01

 

3.インストールが出来たら有効化します。

wordpress_preloader02

 

4.有効化が完了すると以下のようにプラグイン一覧に表示されます。

wordpress_preloader03

 

 

header.phpの編集

「Preloader」はプラグインをインストール・有効化しただけでは使えません。

header.phpの編集が必要です。

header.phpの編集や本記事に記載しているコードの利用は自己責任でお願いします。

 

1.WordPressメニューの「外観」⇒「テーマの編集(テーマエディター)」から「header.php」を選択します。

「CTrl + F」で header.php を探すとすぐに見つかるからおすすめニャ

wordpress_preloader04

 

2.「header.php」の中にある<body>の開始タグ直下に以下コードを書き込みます。

 

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

 

ここも「CTrl + F」で <body を探すとすぐに見つかるからおすすめニャ

wordpress_preloader05

 

3.「ファイルを更新」をクリックして情報を反映させます。

更新ボタンを押さないと情報が反映されないので注意が必要です。

wordpress_preloader07

 

Preloaderの設定

1.WordPressメニューの「プラグイン」からPreloaderを選択します。

wordpress_preloader08

 

2.以下の赤枠のリンク部分をクリックします。

wordpress_preloader09

リンク先はPreloaderの提供元のプラグインのサイトにつながります。ここから好きなアニメーションのダウンロードをすることができます。

赤枠のリンク先のURLは以下になっています。
https://icons8.com/preloaders/

 

3.サイトのTOP画面です。

wordpress_preloader10

いろいろなアイコンが用意されています。

ローディングのアイコンとして使えそうなは以下の2つのカテゴリでした。

  • CIRCULAR (SPINNERS)
  • RECTANGULAR

 

wordpress_preloader11

 

4.自分の好みのアイコンを選択して「DOWNLOAD」ボタンからアニメーションをダウンロードします。

wordpress_preloader12

 

5.WordPressメニューの「メディア」からGIFファイルをアップロードします。

Preloaderの詳細設定で、アップロードしたアニメーションのパス(絶対パス)が必要になりますのでURLをコピーしておきます。

wordpress_preloader13

 

Preloaderの詳細設定

1.WordPressメニューの「プラグイン」からPreloaderを選択します。

wordpress_preloader08

 

2.ダウンロードした時のアニメーションを指定するため、さきほどコピーしたアニメーションの保存パスを赤枠のところの貼り付けます。

他の設定はデフォルト設定ままで問題ありません。

wordpress_preloader16

 

3.「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の編集が必要ですが、気になる方は導入してみてはどうでしょうか。

 

関連の書籍

 

-WordPress

Copyright© クキブロ -お得な情報みいつけた- , 2020 All Rights Reserved Powered by AFFINGER5.