記事の詳細

今回はWordPressでサクッとページのローディング画面を表示する方法を記載します。

プラグインをインストールする

「プラグイン」→「新規追加」から「Preloader」を検索します。
検索を行うと「Preloader」のプラグインが表示されますので「今すぐインストール」を押します。
preloaderインストール

インストールが完了すると「有効化」ボタンに変わりますので、有効化を押します。
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タグの下に埋め込む必要があります。

タグを埋め込む場所は「外観」→「テーマの編集」のheader.phpのファイルになります。
header.phpにbodyタグがあると思いますので、その下に先程のコードを追加します。
コードの埋め込み

これで、ページの読み込み前に下記のようなローディング画像が表示されるようになります。

 

javascriptで組んでもそんなに難しくないコードなのですが、Wordpressだとプラグインを入れて少しカスタマイズをするだけで良いので非常に楽ですね。

これで、閲覧者のストレスが少しでも軽減できれば、よりユーザーフレンドリーなサイトになるかもしれません。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る