WordPress

WordPressのローディング画面をおしゃれにするプラグイン「Preloader」の使い方

更新日 :

WordPressのローディング画面をおしゃれにするプラグイン「Preloader」の使い方
WordPressブログでロード中に丸いグルグルのアニメーションを表示させたい!
WordPressサイトのローディング画面をおしゃれにカスタマイズしたい!

今回はこういった悩みを解決していきます。

みなさんはデザイナーさんやアーティストの方のウェブサイトで、おしゃれなローディング画面を見たことはありませんか?

ローディング画面がおしゃれだと、多少ロード時間が長くてもイライラせずに待機できちゃいますよね。

そこで今回はおしゃれなローディング画面のアニメーションを簡単に実装できるWordPressプラグイン「Preloader」の使い方について詳しく解説していきます。

運営サイトの直帰率が高くて困っている方、ユーザービリティを向上させたい方は必見です。

この記事でわかること

  • Preloaderってどんなプラグイン?
  • Preloaderのプラグイン導入
  • Preloaderの設定前にheader.phpを編集
  • Preloaderの設定方法
  • まとめ:WordPressでのローディング画面をおしゃれにするプラグイン「Preloader」の使い方

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせてご覧ください。

Preloaderってどんなプラグイン?

Preloaderってどんなプラグイン?

まずはPreloaderについて簡単にご説明致します。

冒頭でも軽く触れましたように、Preloaderはローディング画面をおしゃれにカスタマイズするWordPressプラグインです。

具体的にはPreloaders.netというフリー画像サイトからローディング中に表示させたいものをダウンロードし、プラグイン設定することで実装できるという仕組みです。

Preloaders.netでは、数え切れないほどのアニメーションタイプが用意されており、それぞれの色やサイズ、回転のスピードまでオリジナルでカスタマイズできます。

おしゃれなローディング画面を実装できれば、より直帰率が低くてユーザービリティの高い優れたWordPressサイトを作成できるでしょう。

>> Preloader公式ページ

Preloaderのプラグイン導入

Preloaderのプラグイン導入

まずはPreloaderの導入手順からご紹介していきます。

基本的にWordPressプラグインのインストール手順はとってもカンタンです。

手順は以下の通りです。

Preloaderの導入手順

  1. WordPress管理画面からプラグインページへ
  2. プラグイン名「Preloader」を検索
  3. プラグインをインストール&有効化

それでは詳しく見ていきましょう。

1. WordPress管理画面からプラグインページへ

まずはWordPress管理画面からプラグイン専用ページに移動します。

プラグインページ

左側のメニューから「プラグイン」→「新規追加」を選択しましょう。

2. プラグインを検索

プラグインの新規追加画面に移動したら、インストールしたいプラグイン名を検索します。

入力欄から「Preloader」と検索しましょう。

プラグインを検索

すると黒いローディング画像が特徴の「Preloader」というプラグインが見つかるはずです。

3. プラグインをインストール&有効化

プラグインが見つかったら、「今すぐインストール」を押してインストールを開始しましょう。

プラグインをインストール&有効化

インストールが終わると「有効化」と書かれたボタンに切り替わります。

プラグインをインストール&有効化

同様に有効化ボタンもクリックしましょう。

これでPreloaderの導入は完了です!

こうしてみると超カンタンですね!

Preloaderの設定前にheader.phpを編集

Preloaderの設定前にheader.phpを編集

早速Preloaderの設定に取り掛かりたいところではありますが、その前にheader.phpというファイルを編集しなくてはなりません

一瞬で終わる簡単な作業ですのでパパっと終わらせましょう!

まずはWordPress管理画面から「外観」→「テーマエディター」に移動します。

「外観」→「テーマエディター」

するとテーマ編集画面が表示されますので、以下の番号の手順で進めましょう。

header.phpの編集

header.phpの編集

  1. 親テーマを選択
  2. テーマヘッダー(header.php)を選択
  3. <body>タグの真下に<div id=”wptime-plugin-preloader”></div>を記入

bodyタグの真下で

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

を記入することで、ページが読み込まれた一番最初に、Preloaderで設定したローディング画面が表示されるようになります。

記入が終わったら「ファイルを更新」をクリックしてプログラムの変更を反映させましょう。

Preloaderの設定方法

Preloaderの設定方法

header.phpの編集が終わったら、いよいよPreloaderの設定に取り掛かります。

具体的な手順は以下の通りです。

Preloaderの設定方法

  1. Preloader設定画面へ
  2. Preloaders.netからローディング画面に使いたいアニメーションをダウンロード
  3. ダウンロードしたアニメーションを設定
  4. Preloaderのその他の設定

それでは順番に見ていきましょう。

1. Preloader設定画面へ

Preloader設定画面

まずはWordPress管理画面から「プラグイン」→「Preloader」を選択してPreloaderの設定画面に移動します。

2. Preloaders.netからローディング画面に使いたいアニメーションをダウンロード

2. Preloaders.netからローディング画面に使いたい画像をダウンロード

設定画面に移動できたら、「Preloader Image」という項目にある「Get FREE Preloader Image」と書かれたリンクをクリックしましょう。

ちなみにリンクの移動先はhttps://icons8.com/preloaders/です。

このPreloaders.netというサイトは、ローディング画面に設定できるぐるぐる回転するアイコンを配布しているサイトです。

Preloaderの画像一覧

ご覧のようにアイコンのタイプごとにたくさんのアニメーションが用意されていることが分かります。

Circular

とりあえずここでは参考例として、一番メジャーな「Circular(Spinners)」を選択します。

他にもたくさん種類がありますのでよく探してお好みのものを選択しましょう

Circular一覧

すると「Circular(Spinners)」の中にもたくさんのアニメーションが用意されています。

この中からローディング画面に設置したいと思ったアニメーションをクリックしましょう。

選択画像の詳細画面

すると選択画像の詳細画面が表示されます。

ここでは左側のメニューから拡張子やカラー、縦横の長さやアニメーションのスピードなどを自由にカスタマイズできます。ちなみにアニメーションの拡張子はGIFファイルがオススメです。

デフォルト状態でも構いませんが、カスタマイズが終わったら、右下のダウンロードボタンをクリックしましょう。

3. ダウンロードしたアニメーションを設定

アニメーションのダウンロードが終わったら、このアニメーションファイルをWordPressのメディアライブラリにアップロードしましょう。

ファイルのURLをコピー

アップロードが完了したらファイルのURLをコピーします。

続いて先程のPreloader設定画面にもう一度戻ります。

Preloader設定画面

設定画面に移動したら「Preloader Image」の入力欄に、先程コピーしたアニメーションファイルのURLを貼り付けましょう。

コピーした画像ファイルのURLを貼り付け

これでPreloaderの基本的な設定は完了です。

画面下部の「Save Changes」をクリックして設定を保存しましょう。

4. Preloaderのその他の設定

Preloaderのその他の設定

Preloaderの基本的な設定はこれで完了ですが、Preloaderでは他にもいくつか設定項目が用意されています。

細かいカスタマイズをしたいという方は適宜設定していきましょう。

それぞれの設定項目は以下の通りです。

Background Color

ローディング画面でアニメーションを表示する際の背景色を色コードで設定できます。

デフォルトは#ffffffの白色です。

Preloader Image

ローディング画面で表示するアニメーションファイルの保存先URLを設定します。

デフォルトで入力されているURLは意味がありませんので必ず変更するようにしましょう。

Preloader Image Width

ローディング画面で表示するアニメーションの横幅を設定します。(有料版のみ可能)

Preloader Image Height

ローディング画面で表示するアニメーションの高さを設定します。(有料版のみ可能)

Display Preloader

どのページでローディングアニメーションを表示させるか設定できます。

  • In 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.
    404エラーページのみ表示
  • In WooCommerce only (shop page, product page, checkout page, etc).
    ショップページ、製品ページ、チェックアウトページなどのみ表示(ただし専用プラグイン「WooCommerce」のインストールが必要)

Preloader Element

header.phpのbodyタグの直前に挿入するコードが記載されています。

それぞれお好みの設定をしていきましょう!

まとめ:WordPressのローディング画面をおしゃれにするプラグイン「Preloader」の使い方

まとめ:WordPressのローディング画面をおしゃれにするプラグイン「Preloader」の使い方

まとめ:WordPressのローディング画面をおしゃれにするプラグイン「Preloader」の使い方

  • WordPressのローディング画面をおしゃれにしたいなら「Preloader」というプラグインがおすすめ!
  • Preloaderを使う時はheader.phpの編集も忘れずに!

今回はWordPressのローディング画面をおしゃれにするプラグイン「Preloader」の設定方法や使い方をご紹介しました。

運営しているWordPressサイトの読み込みスピードがあまり早くない方は、Preloaderでおしゃれなローディング画面を実装することで、ユーザーの直帰率を抑えることができます。

またサイトの見た目・ビジュアルがおしゃれになるので、ユーザーの居心地の良いサイトを作成できるというメリットもありますね。

みなさんも今回紹介したPreloaderを導入してより良いWordPressブログを作っていきましょう!

もしも分からない部分があればお問い合わせフォームで質問して頂ければすぐに返信致します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきますので応援よろしくお願いします!

ウェブサイトのユーザービリティを上げるための施策としてサイトスピード改善は非常に重要です。詳しくはこちらの記事をご覧ください。

サイトスピードを改善・高速化する7つの方法をご紹介!
サイトスピードを改善・高速化する7つの方法を徹底解説

ウェブサイト運営やSEO対策の関係者の皆さん、サイトスピードの高速化は出来ていますか? サイトスピードはサイトのユーザービリティを大きく左右する重要な項目です。 私はインターン先のウェブ広告会社で、1 ...

更新日:2023年12月16日

関連記事

まとめ:Compress JPEG & PNG imagesの使い方【画像圧縮のWordPressプラグイン】
画像を圧縮・最適化するEWWW Image Optimizerの設定方法・使い方

WordPressブログの画像を圧縮したい!なにか良いプラグインは無いかな? EWWW Image Optimizerというプラグインの設定方法や使い方を教えて欲しい! 今回はこういった悩みを解決して ...

更新日:2023年12月16日

オフスクリーン画像の遅延読み込みの改善方法【PageSpeed Insights】
オフスクリーン画像の遅延読み込みの改善方法【PageSpeed Insights】

PageSpeed Insightsのオフスクリーン画像の遅延読み込みってなに? オフスクリーン画像の遅延読み込みの改善方法を知りたい! そんな方に向けて、今回は「オフスクリーン画像の遅延読み込み」の ...

更新日:2022年11月28日

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-WordPress

Copyright © wagtechblog All Rights Reserved.