「Preloader」を追加し有効化する
「プライグイン」→「新規追加」でキーワードでPreloaderと打って検索し、インストールしましょう。
ローディング画像を選ぶ
ローディング画像はPreloaderのサイトのCircularから選びダウンロードしましょう。
参考 Circular (Spinners)Preloader今回はこちらの画像を選びました。カラフルでかわいいです。wordpressの「メディア」に画像をアップロードします。
Preloaderの設定画面で画像を指定する
プラグイン一覧から、Preloaderを探し、settingをクリックしましょう。「Preloader image」の欄に先ほどアップロードした画像のURLを張り付けましょう。
https://manabu-biology.com/wp-content/uploads/2020/11/810.svg
header.phpにタグを加える
外観→テーマエディターから親テーマを選択し、header.phpに次のdivタグを加えましょう。
<body <?php body_class(); ?>>
//bodyタグのすぐ下に書きましょう。
<!-- プラグイン:preloader -->
<div id=”wptime-plugin-preloader”></div>
これで準備完了です。webサイトを開くとローディング画面が表示されます。
Preloaderを使ってみての感想
カラフルなおしゃれな画像が回っているのは見ていて楽しいのでとても良かったです。画像も選べるので、自分的には星★★★★★という感じです。
しかし、バイオハックchでは画像がカクカク止まってしまったりして、謎の現象が起きていました。バイオハックchはスマホで見ると、途中で止まったりと、非常に不愉快極まりないサイトとなってしまっています。それを緩和できるかと思いましたが…、解決ならず。
どなかた理由をご存じの方がいましたら、ぜひご教授ください。お願いいたしますorz。