【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

      2021/02/16   1711文字

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディングアニメ)をつけてみます。

実装しやすい、プラグイン形式のものを試してみました。さっそく確認してみましょう。

■(前提)なぜページ読み込み時のローディングアニメがあると良いのか?

すぐにページが表示できる場合はあまり問題はありません。しかし、特にページが重かったり、スマホの回線が混んでたり(MVNOの昼や夜19時ぐらいとかはよくある)する場合は、『ブラウザに何も表示されない時間が長いと、ユーザーが離脱する可能性がある』ということです。

『このページ表示できないんだ』と思われるより、『今読み込み中なんだ』とお知らせしたほうが良いでしょう。そのためのローディング画面です。

■wordpressで読み込み時画面(ローディングアニメ)プラグイン~WP Smart Preloader

■WP Smart Preloaderインストール


インストールは『WP Smart Preloader』とプラグイン新規追加の検索ウィンドウに入れます。インストール&有効化後は、いつものようにメニューの設定部分に、『WP Smart Preloader』と出るので、そこから設定画面に入ります。ちなみにつけたサイトのバージョンは『WordPress 4.9.4』となっていましたが、このバージョンでも動く模様です。

■WP Smart Preloaderの設定方法


基本はSelect Preloaderでアニメーション(6種類から)を選ぶだけ。Show only on Home Pageではトップページだけ使用という使い方もできます。下部の方には、Duration to show Loader(ローダーが出る時間)や、Loader to Fade Out(フェイドアウト時間)も、ミリセコンド単位で設定できます。

また、Customの部分にコードを入れて、アニメーションをカスタマイズすることができます。html5やCSS3で、時間軸で動くものをやったことある方向けです。

■アニメーションの種類


1が『円が回転』、2が『カラフルなタイルが大きさを変えながら回転』、3が『オーディオのミニコンポのディスプレイ』、4が『斜め下からタイルが消える』、5が『タイルが畳まれていく』、6が『濃い丸と薄い丸が拡大/縮小』といった感じ。色を変えたいときはカスタマイズになるでしょう。

■WP Smart Preloaderのしくみ

ファイル内にはCSS3やjavascriptが入っていました。仕組み的にはCSS3のkeyframes spinnerで回転。transform:rotate(0deg)からスタートして、100%のときrotate(360deg)。animation: spinner 700ms infinite linearで、アニメーションを0.7秒でひとまわし・infinite linearで読み込みが終わるまで、等速度で繰り返すという感じでした(回転するものの場合)。

その他には、ボックスを作って色を指定し、 transform: scale(0.5); transform: scale(1);を繰り返して、大きくなったり小さくなったりというものもあります。

■あとがき・まとめ

  • 設定は基本的にアニメーション選ぶだけ
  • 時間やトップページのみ設定も可能
  • 仕組み的にはCSS3のアニメーション
  • 色やサイズ・アニメーション時間などを変えたい場合はCSSカスタマイズ

といった感じでした。CSS3ができると、より好みのカスタマイズ(またはサイトの雰囲気に合ったカスタマイズ)ができると思います。そうでなくても、シンプルで非常に使いやすいので、気になった方は、ぜひチェックしてみてください。


【カテゴリ】 - WordPressプラグイン情報
【タグ】 -

  関連記事

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処
フロントの『aioseo-admin-bar-css』を出力しないようにしたい→ログイン時のみ出るようになっているので大丈夫です
【WPプラグイン無しでサイト構築&表示を速く】Really Simple SSLって無効化して大丈夫?→設定しとけば大丈夫、ただし混在に注意
【wpプラグイン】SiteGuard WP Pluginってどんな風にセキュリティに強くなるの?
【WordPress高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法
車・不動産・カタログなどに使えそう!WordPressコンタクトフォームにidやタイトルを渡して自動挿入させる方法
【WPプラグイン】WordPress5.0以降のブロックエディタ使いたくない場合→Classic Editorプラグインで旧エディタに戻して記事を書こう
【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定
WordPressで絵や動画・オーディオのダウンロード販売しよう~Easy Digital Downloads使い方
WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも
管理画面からFTP操作『WP File Manager』~過去の脆弱性ver・機能・使用例(テーマ消えないなど)の紹介
WordPressサイトの更新情報を、確実に伝えるping Optimizer