WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2018年5月31日 その他


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

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

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

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

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

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

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

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

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

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

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

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

この記事を参考にプラグインの導入をする際以下に留意ください

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

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

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

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

インストール方法

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

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

を参照ください

【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の教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです
参考価格:1,738
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

WordPressのカスタマイズ・不具合対応などご相談ください

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

【スポンサーリンク】