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

公開日:2018年5月31日 その他
Knowledge Base Wordpress プラグイン
Wordpressはアクセスされてからいろいろな情報をデータベースから読み込み、外部の画像や動画を埋め込んでいたり、広告を表示したりしていればそれらを読み込んで1つのページを表示するという作業をアクセスがあるたびに繰り返しています。

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

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

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

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

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

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

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

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

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

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

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

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressのテキストエディタでライブプレビュー表示ができるプラグイン「Inline Preview」

WordPressで閲覧画面最上部へページ内の位置を色のついた帯で水平表示するプラグイン「Reading Position Indicator」

WordPressで長いコンテンツを自動的にページ分割するプラグイン「Automatically Paginate Posts」


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

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

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

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

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

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

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

画面イメージはこんな感じです
ページの読み込みが終わるまで「読み込み中」アニメーションを表示するプラグイン「Preloader」

設定項目は上から

  1. Background Color
  2. プリロード表示時の背景色です(基本は白になっています)

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

  3. Preloader Image
  4. プリロード画像を選択します(オリジナルの画像を使う場合には絶対URLを指定します)

  5. Display Preloader
  6. プリローダーを機能させるシーンを選択します

    1. Display PreloaderIn The Entire Website.
    2. すべてのシーンで表示させます

    3. In Home Page only.
    4. トップページのみ表示させます

    5. In Front Page only.
    6. フロントページのみ表示させます

    7. In Posts only.
    8. 投稿のみ表示させます

    9. In Pages only.
    10. 固定ページのみ表示させます

    11. In Categories only.
    12. カテゴリーページのみ表示させます

    13. In Tags only.
    14. タグページのみ表示させます

    15. In Attachment only.
    16. 画像などの表示時のみに機能させます

    17. In 404 Error Page only.
    18. エラーページのみ機能させます

  7. Preloader Element
  8. ここに書かれているコードをheader.php内へ追記することで動作します

※プリローダーを機能させるためにはテーマのheader.phpへ以下のコードを追記する必要があります

<div id=”wptime-plugin-preloader”></div>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

表示サイズの変更

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

  1. 「プラグイン」→「プラグイン編集」を開き、「preloader」を選択します
  2. 177行目付近にある記述を変更します
  3. 書かれているソースは以下のようになっています

    $image_width = apply_filters('wpt_thepreloader_image_size_get_width', '64');
    $image_height = apply_filters('wpt_thepreloader_image_size_get_height', '64');
    【注意】コードをコピーして使用する前に必ずお読みください

    この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

    使用については自己責任でお願いします

    コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

    万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

    コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

    コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

    その場合には以下の方法で修正を行ってみてください

    1. コードの中に全角の記号が入っていませんか?
    2. 半角にすることで解消できます
    3. コードの中に全角の空白(スペース)がありませんか?
    4. 半角にすることで解決できます
    5. コードは合っているはずなのに更新できないときは
    6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
    7. 「何かが間違っています...」と表示され、更新できないときは
    8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
      ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
    これらのエラー対処については以下のページが参考になるかも知れません

    コードを転載する場合には

    ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

プラグインのテスト環境&個人的評価

最後に【Preloader】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

  1. WordPressのバージョン:4.9.6
  2. PHPのバージョン:7.0
  3. テーマ:Simplicity バージョン2.3.0g
  4. プラグインのバージョン:1.0.9
  5. このプラグインの最新バージョンは1.0.9です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

  1. 設定のしやすさ:★★★★★
  2. 使いやすさ:★★★★★
  3. おすすめ度:★★★★★

設定で参照するファイルを変えるだけで独自のプリローダー画像が使えますので、ネット上で「読み込み中 画像」などで検索したフリーのgifファイルなどを使ってオリジナルな読み込み中アニメーションを使うことができるのが最大の特徴でしょう。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方【電子書籍】[ 石川栄和 ]

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方【電子書籍】[ 石川栄和 ]

1,738 円 (税込) 送料込
<p>[この電子書籍は固定型レイアウトです。リフロー型と異なりビューア機能が制限されます]固定型レイアウトはページを画像化した構造であるため、ページの拡大縮小を除く機能は利用できません。また、モノクロ表示の端末ではカラーページ部分で一部見づらい場合があり..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報