ローディング画面を実装するプラグイン【WordPress】




悩み人

よくサイトで見かけるローディング画面を実装したいのですが、方法が分かりません。

このようなお悩みに回答します。

本記事の内容

・ローディング画面の実装方法【4ステップ】

本記事の信頼性

hiroki6(@hiroki6__)

本記事を書いている僕は、コーポレートサイトでローディング画面を実装していました。

その①:Preloaderをダウンロード

WordPressでPreloaderというプラグインをインストールし、有効化します。

その②:header.php にコードを追記

<body>の下に下記コードを追記します。

<div id="wptime-plugin-preloader"></div><div id=”wptime-plugin-preloader”></div>

その③:Preloaders.netでローディングGIFをダウンロード

https://icons8.com/preloaders/にアクセスし、好きなローディング中の画面(.gif)をダウンロード(基本無料)します。

※ダウンロードサイズは128×128にしましょう。

例えば、「coffee」と検索すると、以下のページになります。

好きなデザインをクリックし、GIFデータをダウンロードします。今回は右側のCOFFEE CUPにします。

ダウンロードが終わったら、GIFデータを、WordPressのメディア(ライブラリ)にアップロードします。

その④:PreloaderでGIFデータを設定

WordPressのメディアライブラリにアップロードした画像のリンクURLをコピーし、プラグイン設定画面の「Preloader Image」にURLを記載し、保存して完了です。

実装できているか、サイトにアクセスして確認してみてください。

今回は以上です。

シェアしてくれると喜びます。

ABOUT US

hiroki6
ブログ×本せどり / hiroki6運営(月4500PV)/ 本せどり(月33万)【経歴】大学 / イギリス留学 ▶ 大学院 / NPO法人チーム創設 ▶ 学生起業失敗 ▶ IT企業でWebマーケ担当(月45万 + せどり月15万)▶ 2年で退職 ▶ 会社経営(物販・Webマーケ)● 複業と独立を応援します ● 20代