Cocoon|読み込み中にローディング画面を表示する

WordPress 無料テーマ『Cocoon』のページを読み込む際に、ローディングアニメーションを表示するカスタマイズ方法をご紹介します。

記事のポイント
  • ページ読み込み時にローディング画面を表示できる
  • ちょっぴりおしゃれ度が増す
  • コードをコピペするだけでカスタマイズ完了

CSS でローディング部分は作っていますが、ローディングの制御には jQuery を使っています。

思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。

ローディング画面を表示するカスタマイズ後のイメージ動画

GIF動画

ローディング画面を表示するカスタマイズの流れ

ざっくり手順
  1. WordPress 管理画面にアクセスする
  2. 外観】⇒【テーマエディター】をクリックする
  3. CSS コードスタイルシート(style.css)に貼り付ける
  4. jQuery コードjavascript.js に貼り付ける
  5. HTML コードbody-top-insert.php に貼り付ける

WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る(図解)】をクリックしてください。それぞれの手順を画像付きで解説しています。

詳しい手順
  • STEP 1
    WordPress 管理画面にアクセスする

    『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。

    ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。

  • STEP 2
    【外観】⇒【テーマエディター】をクリックする

    外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【テーマエディター】をクリックしてください。

  • STEP 3
    CSS コードをスタイルシート(style.css)に貼り付ける

    スタイルシート(style.css)の編集画面が表示されたら、まずは CSS コードをコピーしましょう。コードの右上に表示されている【コピーする】をクリックすればコピー可能です。

    コピーした CSS コードを「/*必要ならばここにコードを書く*/」と書かれている行の、すぐ下辺りに貼り付けてください。

    すでに何かしらのコードが記述してある方は、そのコードの下に貼り付けましょう。

    コードを貼り付けたら、左下の【ファイルを更新】をクリックして保存します。

  • STEP 4
    jQuery コードを javascript.js に貼り付ける

    引き続き、同じように jQuery コードをコピーしてください。

    コードがコピーできたら、右側の【javascript.js】をクリックしましょう。javascript.js は、独自の JavaScript コードを記述する際に利用するファイルになります。

    javascript.js ファイルの編集画面が表示されたら、jQueryコードを「//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。」と書かれている行の、すぐ下辺りに貼り付けてください。

    コードを貼り付けたら、左下の【ファイルを更新】をクリックして保存します。

  • STEP 5
    HTML コードを body-top-insert.php に貼り付ける

    これが最後の手順になります。同じように、HTML コードをコピーしてください。

    コードがコピーできたら右側の【tmp-user】をクリックし、その中の【body-top-insert.php】をさらにクリックしましょう。

    なお、body-top-insert.php は <body> タグの直後に表示させたいコンテンツがある場合に利用するファイルです。

    body-top-insert.php ファイルの編集画面が表示されたら、コピーした HTML コードを「//全ての訪問者をカウントする場合は以下に挿入」と書かれている行の、すぐ下辺りに貼り付けてください。

    コードを貼り付けたら、左下の【ファイルを更新】をクリックして保存します。

    以上で、ページの読み込み中にローディング画面を表示するカスタマイズは完了です。

    ご自身のサイトを確認してみてください。

ローディング画面を表示するカスタマイズ用コード

CSS コード

スタイルシートにコピペする
/************************************
** ローディング画面を表示する
************************************/
/*枠組み*/
.loader-wrap {
	z-index: 99999;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #fff;
}

/*本体*/
.loader,
.loader::after {
	border-radius: 50%;
	width: 5em;
	height: 5em;
}

.loader {
	position: relative;
	text-indent: -9999em;
	border-top: .8em solid rgba(0, 0, 0, 0.4);
	border-right: .8em solid rgba(0, 0, 0, 0.4);
	border-bottom: .8em solid rgba(0, 0, 0, 0.4);
	border-left: .8em solid rgba(0, 0, 0, 0.8);
	transform: translateZ(0);
	animation: loading 1s infinite linear;
}

/*アニメーション*/
@keyframes loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

ローディングアニメーションは『Single Element CSS Spinners』のコードをカスタマイズして使っています。他にもオーソドックスなアニメーションが揃っていますので、興味がある方はチェックしてみてください。

jQuery コード

javascript.js にコピペする
/************************************
** ローディング画面を制御する
************************************/
$(function() {
	var loader = $('.loader-wrap');

	//ページが読み込まれたらアニメーションを非表示にする
	$(window).on('load',function() {
		loader.fadeOut();
	});

	//5秒後にアニメーションを非表示にする
	setTimeout(function() {
		loader.fadeOut();
	}, 5000);
});

今回はページが読み込まれたら、アニメーションをフェードアウトする設定です。

ただし、これだけだとページを読み込みが終わるまで、延々とアニメーションが表示されてしまいます。なので読み込みに関係なく、5秒後にフェードアウトする設定も加えてあります。

なお、『5000』の数値を変更すればフェードアウトする時間を変えられます。例えば『3000』にすれば、3秒後にページが表示されますよ。

HTML コード

body-top-insert.php にコピペする
<!-- ローディング画面 開始 -->
<div class="loader-wrap">
	<div class="loader">Loading...</div>
</div>
<!-- ローディング画面 終了 -->

コメント

  1. すもも より:

    トモ様
    はじめまして。
    少しお門違いな質問になるかもしれませんが、ご相談させてください。

    私は以下URLにあるようなカスタマイズをしてみたいです。
    https://coco-factory.jp/ugokuweb/move02/5-4/

    特定の固定ページにだけ実装したかったため、ページ下部にあるカスタムcssとカスタムJavaScriptの欄に、それぞれの項目をコピペして、最後に本文の任意のブロックに、htmlコードを貼付しました。

    一応は表示されたのですが、画面が見切れているのと、背景がお手本にある通りのパープルになってしまいます。

    私としては、自分の好きな場所に幾何学模様だけをバランスよく配置させたいと思うのですが、いかんせん素人レベルのためコピペだけでは上手く使いこなせません。

    どうすれば上手く行くでしょうか?

    • トモ トモ より:

      すももさん

      はじめまして、トモです^^
      こういったご相談も大歓迎ですよ!(もちろん、私の知識で答えられる範囲の回答になってしまいますが……)

      一応は表示されたのですが、画面が見切れているのと、背景がお手本にある通りのパープルになってしまいます。

      ひとまず、幾何学模様は表示されていますか?
      幾何学模様が表示されない場合は、子テーマの tmp-user フォルダ内にある head-insert.php ファイルに、下記のリンク先のコードを追記してみてください。
      ↓↓↓
      https://notepad.pw/share/4dmejl3f1

      これで幾何学模様が表示されるかと思います。

      次は CSS を編集します。
      下記の position:fixed;/*描画固定*/ の行を削除してみてください。

      #particles-js{ 
        position:fixed;/*描画固定*/
        z-index:-1;/*描画を一番下に*/
        width: 100%;
        height: 100%;
        background-color:#35004D;/*背景色*/
      }

      これで設置した要素から、幾何学模様がはみ出なくなると思います。

      あと背景色を変えたい場合は、上記の background-color:#35004D;/*背景色*/ のカラーコード(#35004D)を編集すればいいですし、

      幾何学模様自体の色を変えたい場合は、JS の記述中にある #ffffff のカラーコード(2箇所)を編集してみてください。

      またわからないことがあれば、返信いただければと思います。

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