記事の詳細
WordPressのプラグイン「Preloader」でローディング画面を簡単に実装する方法
今回はWordPressでサクッとページのローディング画面を表示する方法を記載します。
今回のブログの見出しはコチラです!
プラグインをインストールする
「プラグイン」→「新規追加」から「Preloader」を検索します。
検索を行うと「Preloader」のプラグインが表示されますので「今すぐインストール」を押します。
インストールが完了すると「有効化」ボタンに変わりますので、有効化を押します。
これで、プラグインのインストールは完了になります。
プラグインの設定をする
プラグインメニューの「Preloader」の項目をクリックします。
各種設定項目は下記のようになっています。
Background Color
ローディング画面の背景色の設定
Preloader Image
ローディング画面に表示する画像
Preloader Image Width
(おそらく)ローディング画面に表示する画像の横幅設定
Preloader Image Height
(おそらく)ローディング画面に表示する画像の縦幅設定
Display Preloader
ローディング画面を表示する範囲
どうやら無料版と有料版があり、無料版は128*128の画像しかサポートしていないみたいです。
ですが、親切にgif画像をダウンロードできるリンクを紹介してくれているので、デフォルトの画像から変えたい場合は下記を参照して画像を取得しましょう。
https://icons8.com/preloaders/
ローディング画面の画像を変更したい場合は、gifファイルをWordpressのメディアにアップロードして、アップロードしたURLを「Preloader Image」の項目にコピペするだけでOKです。
bodyタグの直後にタグを仕込む
ローディング画像を表示するためには下記のコードをbodyタグの下に埋め込む必要があります。
1 |
<div id="wptime-plugin-preloader"></div> |
タグを埋め込む場所は「外観」→「テーマの編集」のheader.phpのファイルになります。
header.phpにbodyタグがあると思いますので、その下に先程のコードを追加します。
これで、ページの読み込み前に下記のようなローディング画像が表示されるようになります。
javascriptで組んでもそんなに難しくないコードなのですが、Wordpressだとプラグインを入れて少しカスタマイズをするだけで良いので非常に楽ですね。
これで、閲覧者のストレスが少しでも軽減できれば、よりユーザーフレンドリーなサイトになるかもしれません。
ではまた!
コメント
この記事へのトラックバックはありません。
「bodyタグの直前にタグを仕込む」とありますが、実際には
「bodyタグの直後にタグを仕込む」ということになりますでしょうか。
ご指摘ありがとうございます!
「bodyタグの直後にタグを仕込む」で大丈夫です。
記事の内容も修正させていただきました。