ちょっとディープな生物の世界

【WordPress】ローディング画像をプラグイン「Preloader」を使って実装してみた【3分でできる】

「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。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です