PACEでローディング画面を実装してみた【WordPressカスタマイズ】

WordPressにローディング画面を実装する tech

PACEで超かんたんに読み込み中画面を作成できる

このブログサイトを立ち上げてから間もないため、正直Google検索からこのサイトへたどり着く人はまだいません。

しかし、Google Analyticsを眺めるとどうやらTwitterやInstagramからの流入は多少あるようです。(やっぱりブログ運営にSNSは必須ですね。勉強しよう。)

SNSからの流入先はトップページURLになりますが、まぁ味気ないなと。

個人的にはシンプル、ミニマルなデザインが好きなので画像を差し込んだり、色を派手にしたりということはしたくない。

それでいて「おっ!」っと読者の目を引くしかけをつくりたいなーと考えていたところ、みつけました。参考にしたいサイト。

フリーランスエンジニアとして活躍されていて、Youtubeで動画も投稿されている Kota Morishitaさん のポートフォリオサイトのトップページがまさにイメージ通りでした。

もりしーのblog
ITエンジニアもりしーのBlogでは、ITニュース、Raspberry Pi, プログラミングなどの記事を執筆しています。
ITエンジニアもりしーの動画
岐阜県出身・カナダ在住のフリーランスITエンジニアです。フロントエンド、バックエンド、iPhoneアプリ、IT技術文章翻訳(英和)のお仕事をしています。 Raspberry Pi, Arduino, プログラミング、カメラやデジタルな面白そうなものなどをいじったり、レビューしたり、雑談をぶつぶつ言ったりの趣味チャンネル...

ソースを覗かせていただいたりWebで検索しているとどうやら PACE というJavaScriptライブラリで実装できるようだったので、さっそく自分のサイトにも実装してみることにしました。

PACEとは

JavaScriptとCSSを読み込むだけでかんたんにローディング画面をつくることができるライブラリです。

Page not found · GitHub Pages

利用者がやることは、お好みのデザインを10種類以上のテンプレートから選択して、ダウンロードしたファイルをWebサイトに読み込ませるだけ。

めっちゃかんたん。すばらしいです。

ちなみにPACEは、

  • Progress
  • Automatically.
  • Certain to
  • Entertain.

の略のようです。

以下、このWordPressで作成したサイトに実装するまでの手順を解説していきます。

環境前提

わたしの環境はこのような状態です。

  • WordPress 5.4.2
  • テーマはCocoonを使用(Cocoon子テーマを適用)

本記事の情報はCocoon以外のテーマでは作業対象となるファイル名などが異なるかもしれませんのでご注意ください。(別テーマでは未確認です)

JSとCSSをダウンロード

さきほどリンクを貼ったPACEのGithubページへアクセスして Download からJavaScriptファイルをダウンロードします。

JavaScriptをダウンロード

つづいて Themes セクションでお好みの色を設定します。サイトの色味にあわせるとよいですね。

色味をカスタマイズ

そして画面下部にあるデザインテンプレートから好みのデザインを選びます。わたしはLoading Barにしました。

COPY TO CLIPBOARD をクリックするとCSSがコピーできるので、テキストエディタに張りつけてファイルとして保存します。

ファイル名はなんでもいいですが、わたしは pace.css としました。

テンプレートから選択

JSとCSSファイルが用意できたら、FTPなどでサーバへアップロードして下準備は完了です。

JSとCSSをWordPressで読み込む

公式ドキュメントに案内があるように、さきほど準備したJSファイルとCSSファイルをHTMLの head 要素内で読み込みます。

わたしのサイトのWordPressテーマはCocoonを使用していますので、公式ページ情報にしたがって head-insert.php を編集します。

WordPress管理画面の [外観] – [テーマエディター] から [tmp-user] – [head-insert.php] を選択して、ファイル読み込みコードを挿入します。

ファイルPATHはみなさんの環境で読み替えてください。

<?php if ( is_home() ): ?>
  <link rel="stylesheet" href="./pace.css">
  <script src="./pace.min.js"></script>
<?php endif; ?>

phpファイルの編集前にはかならずファイルのバックアップを取得したり、可能であれば検証環境で動作確認をしてから実施しましょう。

ここでひとつポイントがあって、1行目の if ( is_home() ) の部分。

これはサイトのトップページでだけ実行される条件分岐になります。

ぜんぶのページでローディング画面が表示されたらうっとおしいのでこのような実装としました。

この条件分岐はほかにも

コード意味
is_page( ‘<URLスラッグ>’ ) 特定の固定ページでのみ実行
is_home()ホームページ(トップページ)でのみ実行
is_single(‘<URLスラッグ>’) 特定の投稿ページでのみ実行

などもあったりします。(もっといろいろあると思います)

JSとCSSの読み込みは以上です。

ローディング中はコンテンツを非表示にする

ここまでの作業でローディング画面を表示できるようになりました。

しかし。。。

デフォルト状態

見づらい。。。

地味な色味もあいまって、これじゃあ読者に気づいてもらえません。

このような場合は ローディング画面を表示している間、それ以外の要素を非表示にする という実装にするみたいです。

実現するには3つのファイルを編集する必要がありました。

1.body-top-insert.phpへ追記

<?php if ( is_home() ): ?>
   <div class="pace-wrap">
<?php endif; ?>

2.footer-insert.phpへ追記

<?php if ( is_home() ): ?>
   </div>
<?php endif; ?>

ここまででトップページ全体を pace-wrap というクラスでくるんでる状態です。

つぎに、くるんだpace-wrapを ローディング中は非表示にするCSSを追記します。

3.style.cssへ追記

.pace-running .pace-wrap {
  display:none;
}

これで、ローディング画面の背景がまっしろになってくれました。

display noneを実装

ローディング画面からトップページへふわっと切り替える

最後のカスタマイズです。

この状態でも最低限のやりたかったことは実現できているのですが、ローディング画面からトップページへの遷移がいきなりパッと切り替わってしまってダサいです。

トップページをいいかんじにフェードインさせることで理想の動作になりました。

コード追記対象は javascript.js です。

Pace.on('done', function(){
  $('.pace-wrap').fadeIn();
});

これでひととおり実装が完了しました。

どのような動作をするのかは、ぜひこちらからご覧ください。

塵積ぶろぐ

残課題:コンテンツが軽すぎて表示時間が短い

ご覧いただいたかたはお気づきかと思いますが、トップページが軽すぎてローディング画面の表示時間がとても短いです。。。

これは、記事数が増えると解決(?)するのか。

それともなんらかWaitをかけるようなJavaScriptカスタマイズをしたほうがいいのか。

Webの政界では 早い = 正義だと思うので、なんとも悩ましいです。笑

まぁひとまず、いろいろ勉強して記事作成に注力しましょうかね。

今回は以上です。

それじゃあまたね。

タイトルとURLをコピーしました