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

今回は、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でアニメーション（６種類から）を選ぶだけ。Show only on Home Pageではトップページだけ使用という使い方もできます。下部の方には、Duration to show Loader（ローダーが出る時間）や、Loader to Fade Out（フェイドアウト時間）も、ミリセコンド単位で設定できます。

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

■アニメーションの種類

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

■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ができると、より好みのカスタマイズ（またはサイトの雰囲気に合ったカスタマイズ）ができると思います。そうでなくても、シンプルで非常に使いやすいので、気になった方は、ぜひチェックしてみてください。