WPプラグイン

WordPressのページを開いた時にローディング画面(プリローダー)を表示させるプラグイン「BH Custom Preloader」

投稿日:

このブログでも少し前まではこのプラグインでテトリスのローディング画面を表示していたでででーさん(@d3_dayo) です!

 
この記事では、ページを開いた時にまずはローディング画面を表示し、読み込むものを読み終わってからページコンテンツを表示してくれるWordPressプラグインを紹介したいと思います!
 
プラグインなので取扱は超簡単!管理画面で設定するだけでページ読み込み時に動きのついたローディング画面を表示してくれます。
 
 

スポンサーリンク

導入するとこんな感じになります

通常はページにアクセスすれば画像とかの読み込みが中途半端な状態だとしても、ページコンテンツがいきなり表示されると思いますが…。
 
このプラグインを導入するとページ読み込み時にこのようなローディング画面が表示されるようになります。
 
PCでの表示
 

 
スマホでの表示
 

 
上の画像は静止画になっていますが、実際にはアニメーションでテトリスのように動きます。
 
 

BH Custom Preloader

BH Custom Preloader
今回紹介するプラグインです。
 
しばらく更新が停まっているようですが、2017/12/23時点で最新のWordPressバージョンでも動作は問題ありません。
 
 

プラグインのインストール

ここでは手順紹介のサンプルとして「WP Maintenance Mode」という別のプラグイン導入時のスクリーンショットなどを例にしていますが、導入の手順に変わりはありません。
 
上記リンクのプラグイン紹介ページからプラグインのデータをダウンロードして…
 
f:id:d3dayo:20170916171458p:plain
 
自身のWordPress管理画面のサイドメニューからプラグイン→新規追加でダウンロードしたファイルをアップロードする方法でインストールが可能です
 
f:id:d3dayo:20170916171805p:plain
 
或いは、WordPress管理画面のサイドメニューからプラグイン→新規追加で表示したページにある検索欄に「BH Custom Preloader」と入力して検索して、そこからインストールをすることも可能です。
 
f:id:d3dayo:20170916172039p:plain
 
 


スポンサーリンク


プラグインの設定

プラグインをインストールして有効化したらBH Custom Preloaderの「設定」を開きます。
 

 
 
設定画面を開いたら、下の画像内の赤枠で囲っている部分からローディング画面に表示させるアニメーションを選択することができます。ご自身で用意したアニメーション画像をアップすることもできるようですが、この機能は今回紹介している無料版ではロックされています。
 

 
 
基本的にはプラグインを有効化した時点でローディング画面の表示がONになるので、細かい設定は不要で非常に簡単なのですが、あとは設定画面で設定できる項目としては「ローディング画面の背景色」や「ローディング画面の表示エフェクト」や「画面表示の速度」などを設定することができます。
 

 
設定項目も少なくシンプルなので細かい解説は割愛しますが、ちなみに私は速度の設定を以下のようにしています。
 
Preloader Delay time = 0
Body Delay time = 0
Preloader body Opacity = 1

 
 

まとめ

今回の記事では設定の手順や使い方などを細かく書く必要がないくらい簡単に導入できるプラグインです。
 
基本的にインストールして有効化するだけで、デフォルト設定のままではありますがページ読み込み時に動きのあるアニメーション画面が表示されるようになります。
 
ただ、気をつけておきたい点としては、このプラグインを導入することでページの読み込み時間自体が速くなるわけではなく、しかもページ内のコンテンツをひと通り読み込んでからローディング画面の表示が止むので…外部コンテンツも含めて読み込みが終わるまでは記事が表示されません。
 
最初のうちは動きのある画面による物珍しさで待ち時間も苦にならないと思いますが…でも慣れてくると逆に読み込み時間へのストレスを感じるようになるかもしれません。
 
 
以下の記事では、私が実際に使用してみて便利だと思ったもの・役立ちそうだと思ったものを中心に紹介しているWordPressプラグインに関する記事まとめです!新発見もあるかもしれないので、ぜひこちらも覗いてみてください!
 
【保存版】これまでに書いてきた便利なWordPressプラグインの「機能・使い方」紹介記事まとめ | カキタクナッタラ

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ