>>初心者ブロガーこそやるべきドメインパワー対策はこちら

WordPressでローディング画面をかんたんにおしゃれにするプラグイン”Preloader”の導入方法。

Preloaderの設定方法

なべはぴ
なべはぴ

企業サイトのようにローディング画面をかっこよくしてみたいな

企業のウェブサイトなどを見ているときに、ローディング画面がくるくるしてたりすることありませんか?

イメージは下のようなやつです。

企業のウェブサイトはおしゃれなサイトも多いですが、サイトが重たくなりがちで、読み込み時間が長くなり離脱率が高くなる可能性があります。

ただし、読み込み中にアニメーションがあると、この離脱率が少し下がるのではないかと僕は感じました。

おしゃれで離脱率が下がる可能性があるならば導入するしかない!

調べてみるととてもかんたんだったので、情報共有しようと思います。

この記事はこんな方にオススメ

ローディング画面をおしゃれにしたい人

Preloaderの使い方を知りたい人

ローディング画面を作って離脱率を低下させたい人

注意

本プラグインはテーマヘッダー (header.php)を編集します。

誤って重要なコードを消してしまうと ブログが表示されなくなる可能性があります。

カスタマイズする前に必ずバックアップをとってください。
また、子テーマを導入して編集するようにしてください。

なべはぴ
なべはぴ

非常にかんたんなので、ぜひやってみてください

ローディング画面をかんたんにおしゃれにするプラグイン”Preloader”とは

Preloaderは、WordPressのプラグインです。

Google Chrome・FireFox ・ Opera ・ Safari ・ IE ・ iPad ・ iPhone ・ Androidなど、多くのブラウザに対応しています。

ローディング画面(アニメーション)は、サイトの読み込み時にユーザーにストレスを感じさせないために導入されており、企業サイトではよく見られます。

Preloaderというプラグインは、Preloaders公式サイトなどからフリー画像(アニメーション)をダウンロードし、プラグインを使って設定することでかんたんに導入できるすてきなプラグインです。

非常に多くのアニメーション画像があるため、自サイトに合ったアニメーションを選択しましょう。

Preloaders公式サイトはこのボタンから

ローディング画面をかんたんにおしゃれにするプラグイン”Preloader”の設定方法

注意

カスタマイズする前に必ずバックアップをとってください。
また、子テーマを導入して編集するようにしてください。

ダッシュボードのプラグインを追加からPreloaderを検索&インストールし有効化
プラグインを追加からPreloaderを検索
クリックで画像が拡大されます
外観→テーマエディタ→ テーマヘッダー (header.php)

<div id=”wptime-plugin-preloader”></div>のコードを<body>タグの真下に挿入。

下記にてもう少し詳しく説明します。

ダッシュボードのプラグインにPreloaderと出るのでクリックして設定
クリックで画像が拡大されます

下記にてもう少し詳しく説明します。

STEP2.header.phpにコード追記

注意

誤って重要なコードを消してしまうと ブログが表示されなくなる可能性があります。

カスタマイズする前に必ずバックアップをとってください。
また、子テーマを導入して編集するようにしてください。

外観→テーマエディタ→ テーマヘッダー (header.php)とクリック。

Ctrl+F(検索のショートカット)を押して、”<body <?php body_class(); ?>>”で検索してください。

その直下に下記のコードを挿入し、「ファイルを更新」を押せば終了です。

コード

<div id=”wptime-plugin-preloader”></div>
クリックで画像が拡大されます
なべはぴ
なべはぴ

上の図のようになればOKです

STEP3.Preloaderの設定

Preloaderの設定画面は、下記の写真のようになっています。

クリックで画像が拡大されます
項目説明
Background Colorローディング中の背景色を設定します。
基本的には#FFFFFFでいいかと思います。
Preloader ImageメディアライブラリにアップロードしたファイルのURLを入力してください。
Preloader Image Width有料版を購入すると、画像の横幅を変更できます。
Preloader Image Height 有料版を購入すると、画像の縦幅を変更できます。
Display Preloaderローディング画面を表示させるページを指定できます。
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」のインストール必須

「Save Changes」をクリックすると設定を保存できます。

ローディング画面をかんたんにおしゃれにするプラグイン”Preloader”:まとめ

まとめ

Preloaderを使えばかんたんにおしゃれなローディング画面が設定できます。

ローディング画面を導入すると、読者が感じる読み込み時間のストレスを抑える事ができます。

Preloaderを使えば、かんたんにおしゃれなローディング画面が設定できるため、とてもオススメです。

僕はこのPreloaderを、2ndブログに導入しています。
(特化ブログに挑戦中。記事はまだあまりありません…)

2nd ブログはこちらから

僕の2nd美容特化ブログ:Nutricosmはこちらから

なべはぴ
なべはぴ

SANGOでおしゃれなサイトを作りたいと試行錯誤しています

以上が、Preloaderの導入方法でした。

サイトを見る側の環境は様々なので、ローディング時間が長くなることもありえます。

少しでも読者にストレスを与えないよう、ローディング画面を導入してみませんか?

コピーしてシェア

記事タイトルとURLをコピー
  

 

にほんブログ村 にほんブログ村へ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA