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

公開日: 更新日: その他 使用中のプラグイン
Wordpressプラグインのアイキャッチ




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」から行います。

画面イメージはこんな感じです
ページの読み込みが終わるまで「読み込み中」アニメーションを表示するプラグイン「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. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

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

一番簡単なのは入手した画像をメディアアップローダーでアップロードし、画像の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. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

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

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

    変更は単純にこの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の人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

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

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

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


【スポンサーリンク】