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

役に立つ情報でしたら是非拡散(シェア)をお願いします

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のプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

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

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【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>

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

一番簡単なのは入手した画像をメディアアップローダーでアップロードし、画像の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’);
    変更は単純にこの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
できるWordPress WordPress Ver.4.x対応 [ 星野邦敏 ]

できるWordPress WordPress Ver.4.x対応 [ 星野邦敏 ]

1,512 円 (税込) 送料込
WordPress Ver.4.x対応 星野邦敏 相澤奏恵 インプレスデキル ワード プレス ホシノ,クニトシ アイザワ,カナエ 発行年月:2017年08月 ページ数:254p サイズ:単行本 ISBN:9784295002017 星野邦敏(ホシノクニトシ) WordPressのテーマやプラグインを開発している株式会..
いちばんやさしいWordPressの教本第3版 [ 石川栄和 ]

いちばんやさしいWordPressの教本第3版 [ 石川栄和 ]

1,706 円 (税込) 送料込
評価 4
石川栄和 大串肇 インプレスBKSCPN_【bookーfestivalーthr】 イチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月:2017年02月 ページ数:256p サイズ:単行本 ISBN:9784295000792 石川栄和(イシカワヒデカズ) 株式会社ベクトルの..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る