プラグインなし！WordPressテーマSWELLにローディング画面を実装する方法

WordPressテーマSWELLにウェブページを遷移するときに表示されるローディング画面を実装してみましたので、カスタマイズの備忘録として記載します。

参考としたのは、こちらのふたつのサイト様です。

Webクリエイターボックス

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法 ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて…

あわせて読みたい

SpinKit Simple CSS Spinners

SWELLにローディング画面を表示させる方法

１、ヘッダー内部ウィジットにHTMLを貼り付ける。

まず、SWELLの外観→ウィジットから、

ヘッダー内部を選択し、以下のコードをカスタムHTMLウィジットに貼り付けます。

↑サイトにコピーガードを入れておりますのでview rawのところを押してポップアップをコピーしてください。

２、追加CSSにローディング画面用のCSSを貼り付ける

HTMLをウィジットに貼り付けた後は、外観→カスタマイズ→追加CSSに以下のコードを貼り付けます。

３、外観→カスタマイズ→高度な設定にローディング画面を消すJavaScriptを貼り付ける

それから、ローディング画面を画面遷移が終わったら消さないといけませんので、以下のJavaScript

これを、外観→カスタマイズ→高度な設定→BODYタグ終了直前に出力するコードの場所に貼り付けます。

そうすれば、ローディング画面の実装の完了です。

まとめ

やってみたら意外に簡単でした、スピナーの色とか形状、位置は上記に記載したサイト様を参考にしてCSSでいじってみてくださいね。

今回は、SWELLにローディング画面をカスタマイズしました。

私の素人方法ですので、自分のメモで申し訳ありませんが、よろしくお願いいたします。