ページの読み込みが終わるまで「読み込み中」アニメーションを表示するプラグイン「Preloader」|Knowledge Base

公開日：2018(平成30)年5月31日／最終更新日： 2018(平成30)年6月1日

WordPressはアクセスされてからいろいろな情報をデータベースから読み込み、外部の画像や動画を埋め込んでいたり、広告を表示したりしていればそれらを読み込んで１つのページを表示するという作業をアクセスがあるたびに繰り返しています。

そのためHTMLで作成するサイトと比べると、管理はしやすいものの表示速度については劣るという欠点があります。最近ではWordPressがよく使われることからサーバーの性能が各段に向上してストレスなく表示されるようになったものの、

サイトの規模（投稿などのコンテンツの数）が大きくなるにつれて表示に時間がかかるようになる
使用しているテーマが読み込むソースによっては表示に時間がかかる
外部のソースを読み込むのに時間がかかることがある
アクセス集中などにより読み込み時間がかかる

と使用していけば仕方ない要件も含めてサイトはどんどん重くなっていきます（プラグインを使いすぎると遅くなるという記事をよく見かけますが、私自身としてはそれほど影響がないと考えていますので、この項目からは外しています）。

こうした速度低下の対策として知られているのがページをキャッシュ（一時的に作ったページを保存）して、一定時間内同一ページにアクセスされたものは１からページを作るのではなくキャッシュされたページを表示するというのが一般的ですが、それでも時間がかかってしまう場合があります。

私が一人の閲覧者としてどこかのサイトを見たときに一番ストレスを感じるのは、ページが完全に表示されるのに時間がかかる・・・ということではなく、表示されているように見えても動かないことです。要するに表示されているのにスクロールして続きが見れないという時なんです（皆さんはどうですか？）。

それじゃあ完全に読み込むまでに別のものを表示してみてはどうか？ということで見つけたのが今回紹介する【Preloader】です。

【Preloader】は、ページの表示が完了するまでは回転する矢印マークなどを表示するプラグインです。

逆にサイト管理側からすれば、広告などが完全に表示される前にページをどんどんスクロールされてしまう、いわゆる斜め読みを防ぐことができるので、アフィリエイト広告を張り付けているサイト（ほとんどだと思いますが）では収益にプラス効果があるかもしれません。

【Preloader】プラグインの基本的な機能・できること

ページが読み込まれるまで「読み込み中」アニメーションを表示する
表示するアニメーションは自由に変更可能
トップページのみ／すべての投稿など表示するシーンの選択ができる

※他にも同じ機能のプラグインをいくつか試しましたが、２のアニメーションが自由に変更できるのはこのプラグインだけでした。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【Preloader】プラグインの設定画面や表示の日本語化と翻訳

【Preloader】プラグインは言語の変更に未対応ですので表示のまま設定することになります

【Preloader】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

【Preloader】プラグインの基本的な使い方

日本語化して設定できないので設定で必要な部分のみ紹介します（一度設定すれば特に修正の必要がありませんから英語のままでも大丈夫でしょう）。

設定は「プラグイン」→「Preloader」から行います。

画面イメージはこんな感じです

ページの読み込みが終わるまで「読み込み中」アニメーションを表示するプラグイン「Preloader」|Knowledge Base

設定項目は上から

Background Color

プリロード表示時の背景色です（基本は白になっています）

16進トリプレット（#で始まる６桁）の他、RGB（rgb(255,255,255,0)）でも設定できるので当サイトのように透明度のある背景にすることも可能です。

Preloader Image

プリロード画像を選択します（オリジナルの画像を使う場合には絶対URLを指定します）

Display Preloader

プリローダーを機能させるシーンを選択します

Display PreloaderIn 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へ以下のコードを追記する必要があります

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

オリジナル画像を使うときは

一番簡単なのは入手した画像をメディアアップローダーでアップロードし、画像のURLをそのまま「Preloader Image」欄へ張り付けることです。プラグインフォルダの「images」フォルダ内へアップロードしてもいいのですが、プラグインをアップロードしたら消えてしまうことがありますから、どこがいいのかは各自判断いただければと思います。

【Preloader】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

表示サイズの変更

このプラグインは有料版を購入するとプリローダー画像のサイズが変更できるとされていますが、プラグインのphpファイルをちょっとカスタマイズするだけで自由に変更できます。手順は以下の通り

「プラグイン」→「プラグイン編集」を開き、「preloader」を選択します
１７７行目付近にある記述を変更します

書かれているソースは以下のようになっています

$image_width = apply_filters('wpt_thepreloader_image_size_get_width', '64');
$image_height = apply_filters('wpt_thepreloader_image_size_get_height', '64');

変更は単純にこの２行の中にある「64」という数字を変更するだけです。

ちなみに当サイトでは130に設定しています（閲覧された際既に使用していない場合はご容赦ください）