今回はバズ部様が提供しているWordpressの無料テーマ「Xeory Extension」のカスタムです。画像やJavascript、jQueryなどを使用しているうちに、サイトの読み込みに時間がかかってしまいユーザー離れとなってしまうことを防ぐために、ローディング画面を作成してユーザービリティを上げようというものです。
ローディング画面とはサイトを読み込んでいるときに丸がクルクルと回っていたり、Now Loading…などとなっているあれです。
全体の流れとしては、
- 読み込んでいる間のdivタグをcssのアニメーションで用意する
- 隠す予定のサイト全体を囲むdivを用意する
- それぞれの行動をJavascriptで指定する
上記のような流れとして設置をします。
DEMO
設置をDEMOで作成したのでご覧ください
作成環境として、css、Javascriptは＄をjQueryにしてhead内に直接記入しています。
読込時間を長くするため、容量の大きい画像を設置してあります。スマホの方は再読み込みのしすぎに注意してください。
アニメーションをcss3で作成。
今回はPhotoshopVIPさんがまとめてくださっているCSSアニメーションを使用させていただきました。
こちらがhtmlとcss3でのアニメーションの確認となります。スマートフォンでは「Result」をタッチすると画面が確認できます。
See the Pen qPpEJw by soricity (@soricity) on CodePen.
行動Javascriptの設定
アニメーションの確認ができましたら、行動のJavascriptを設定します。
行動内容は
- サイトの全体をかこっているdivタグをJavascriptで隠す
- 位置を調整したアニメーションを表示
- 読込の完了、もしくは最大時間への到達を指定してアニメーションをフェイドアウト
- アニメーションの背景を非表示にすることでサイト全体が表示される
以上のような事が書いてあります。
下記のJavascriptはwordpressでloading1.jsとしてjqueryの後に読み込む設定とした場合のものです。「＄」をすべて「jQuery」に変換してあります
xeoryへの導入
xeoryに導入する為にはheader.phpとfooter.phpの編集が必要になります。ファイルが別になるのでわかりやすくする為の目印もつけておきましょう。
header.phpの編集
header.phpの上記の隙間にローディング用のタグを追加
footer.phpの編集
footer.phpの上記の隙間に〆のタグをコメント付きで追加
function.phpの編集
以下の編集環境の際にfunction.phpに挿入する呼び出し文です。実際はcssの呼び出す、呼び出さないなどもこのadd_actionで指示しています。
- 子テーマを使用している
- 子テーマの中に「js」フォルダをつくりその中に「loading1.js」ファイルを保存している。
function.phpに.jsの読み込み文を追加
失敗例、成功例
いつものように、jQueryのJavascript設置で動かない、動いたというのを体験したので成功例、失敗例も残しておきます。
- cssをstyle.cssで外部呼出し
→成功 - cssはheadにタグを使用して挿入
→成功 - Javascriptを＄のまま外部読込
→失敗 - ＄をjQueryに変更して外部読込
→成功 - JavascriptをjQueryに変更してタグでheaderに挿入
→成功
作成例
設置をDEMOで作成したのでご覧ください
作成環境として、css、Javascriptは＄をjQueryにしてhead内に直接記入しています。
読込時間を長くするため、容量の大きい画像を設置してあります。スマホの方は再読み込みのしすぎに注意してください。
