【WordPress】「progressbar.js」で「ローディングサークル」を実装してみた!(プラグインなし!)

目次

「progressbar.js」を使ったローディング画面の実装

今回は、以下のようなトップページにアクセスした時の「ローディング(読み込み)画面」の実装を試してみます。
「progressbar.js」というライブラリを使ったものです。1から作るよりも簡単に導入できちゃいます。

https://kimmobrunfeldt.github.io/progressbar.js/

今回は、WordPressの環境で、テーマは「Arkhe」を使っています。
SWELLにも対応したローディング画面を実装したい方はぜひ参考にされてみてください。

ローディングデモ。

また、トップページでリロードする度に表示されるのは面倒なので、「ブラウザが開いている間は滞在を記録」して、2回目以降は、トップページが表示されてもローディング画面が表示されないように設定。

早速、やってみます。

Arkheの「子テーマ」をアップロード・有効化

今回はコードを上書きしたりするため、Arkheがバージョンアップした時にも対応できるよう、WordPressにArkheの「子テーマ」をアップロードしていきます。

事前に子テーマをダウンロードして、アップロードしておきます。
そして、テーマを有効化させます。

子テーマが有効化できれば、準備完了です。

「progressbar.js」ファイルの設定

「progressbar.min.js」をダウンロードする

「github」上で、ライブラリをダウンロードすることができます。

https://github.com/kimmobrunfeldt/progressbar.js

上記サイトより、ダウンロードし、「progressbar.js/dist/progressbar.min.js」を取得して下さい。

「progressbar.min.js」をアップロードする

ダウンロードができたら、Webサーバ上に「progressbar.min.js」ファイルをアップロードします。

「progressbar.min.js」ファイルの作成
アップロード先:「public_html/[サイト名]/wp-content/themes/arkhe_child/assets/js/progressbar.min.js」に

上記のパスでアップロードができれば、次のステップに進みます。

「header.php」ファイルの設定

親テーマから子テーマへ「header.php」を複製する

親テーマから「header.php」ファイルを子テーマに複製します。

「header.php」ファイルの複製
コピー元:「public_html/[サイト名]/wp-content/themes/arkhe/header.php」から、
コピー先:「public_html/[サイト名]/wp-content/themes/arkhe_child/header.php」に

複製が完了したら、次のステップに進みます。

複製した「header.php」を編集する

複製した「header.php」にローディング画面を表示させるための「HTML」のコードを書きます。
追加する内容は以下の2つです。

<!-- jquery 読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- ローディング画面 -->
<div id="loading_container">
	<div id="loading"></div>
</div>
<!-- ローディング画面 -->

実際に書き込むと以下のようになります。

<!DOCTYPE html>
<html <?php language_attributes(); ?> <?php Arkhe::root_attrs(); ?>>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<!-- jquery 読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<?php
	wp_head();
	$setting = Arkhe::get_setting(); // SETTING取得
?>
</head>
<body <?php body_class(); ?>>
<?php if ( function_exists( 'wp_body_open' ) ) wp_body_open(); ?>

<!-- ローディング画面 -->
<div id="loading_container">
	<div id="loading"></div>
</div>

<!-- Start: #wrapper -->
<div id="wrapper" class="l-wrapper">
<?php
	// ヘッダー
	do_action( 'arkhe_before_header' );
	Arkhe::get_part( 'header' );
	do_action( 'arkhe_after_header' );
?>
	<div id="content" class="l-content">
		<?php do_action( 'arkhe_start_content' ); // テーマ側でも使用 ?>
		<div class="l-content__body l-container">

「jQuery」は、<head></head>内に追記をして読み込ませます。
「ローディングのHTMLコード」は、<body></body>内の上の方に記述をしておきます。

反映が完了したらファイルを保存します。

「loading.css」ファイルの設定

「loading.css」を新しく作成する

「loading.css」を作成します。

「loading.css」ファイルの作成
作成先:「public_html/[サイト名]/wp-content/themes/arkhe_child/assets/css/loading.css」に

作成した「loading.css」を編集する

以下の内容を書き込みます。

@charset "utf-8";
/*========= LoadingのためのCSS ===============*/

#loading_container {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #fff;
}

#loading {
  font-size: 1rem;
  text-align:center;
  color: #4c6d70;
  width: 100px;
  height: 100px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

入力できたら、データを保存します。

「loading.js」ファイル(JavaScript)

「loading.js」を新しく作成する

「loading.js」を作成します。

「loading.js」ファイルの作成
作成先:「public_html/[サイト名]/wp-content/themes/arkhe_child/assets/js/loading.js」に

作成した「loading.js」を編集する

以下の内容を追加します。
前半の記述で1回目のアクセスか、2回目のアクセスか判別し、後半の記述で実際にアクセスチェックを行っています。

1回目のアクセスであれば、「progressbar.js」を使ったローディング画面を表示。
2回目のアクセスであれば、「jquery」でloaderをremoveさせています。

// 同じ日付で「2回目」以降のアクセスなら「ローディング画面非表示」にする設定
var flg = null;
var check_access = function () {
	// sessionStorageの値を判定
	if (sessionStorage.getItem('access_flg')) {
		// 2回目以降
		flg = 1;
	} else {
		// 1回目
		sessionStorage.setItem('access_flg', true);
		flg = 0
	}
	return flg;
}


// アクセスチェック
var $i = check_access();
const loader = document.getElementById("loading_container");
if ($i == 0) {

	// 1回目アクセスの処理
	var bar = new ProgressBar.Circle(loading, {
		color: '#4c6d70',
		strokeWidth: 4,
		trailWidth: 1,
		easing: 'easeInOut',
		duration: 2000,
		text: {
			autoStyleContainer: false
		},
		from: { color: '#aaa', width: 1 },
		to: { color: '#4c6d70', width: 4 },
		step: function (state, circle) {
			circle.path.setAttribute('stroke', state.color);
			circle.path.setAttribute('stroke-width', state.width);

			var value = Math.round(circle.value() * 100);
			if (value === 0) {
				circle.setText('');
			} else {
				circle.setText(value);
			}

		}
		
	});
  // フォント・フォントサイズを指定。
	bar.text.style.fontFamily = '"Noto Sans Japanese", sans-serif';
	bar.text.style.fontSize = '1.4rem';

	bar.animate(1.0, function () {
		//アニメーションが終わったらフェードアウト
		$("#loading_container").delay(500).fadeOut(800);
	});

} else {
	// 2回目アクセスの処理
	// 読み込ませないようにすぐ要素を取り除く
	loader.remove("loading_container");
}

こちらもファイルを保存しておきます。

「function.php」(PHP)

最後に、作成・追加してきた「loading.css」「progressbar.min.js」「loading.js」をそれぞれ「function.php」で読み込ませます。
子テーマにはもともと、「function.php」のファイルが存在しているので、そちらに追記をします。

add_action( ‘wp_enqueue_scripts’, function() { 〜 の部分があるので、以下のようにスタイルシート(CSS)とスクリプトファイル(JS)を読み込ませます。

add_action( 'wp_enqueue_scripts', function() {
	// 開発時にブラウザキャッシュされないように、最終変更日時をクエリとして付与
	$time_stamp = date( 'Ymdgis', filemtime( ARKHE_CHILD_PATH . '/style.css' ) );
	wp_enqueue_style( 'arkhe-child-style', ARKHE_CHILD_URI . '/style.css', [], $time_stamp );
	
	// スタイルシート読み込み
	wp_enqueue_style('loading_css', get_stylesheet_directory_uri(). '/assets/css/loading.css');
	
  // スクリプトファイル読み込み(ローディング)
	wp_enqueue_script('progressbar', get_stylesheet_directory_uri() . '/assets/js/progressbar.min.js', array('jquery'), '1.0.0', true);
	wp_enqueue_script('loading_js', get_stylesheet_directory_uri() . '/assets/js/loading.js', array('jquery'), '1.0.0', true);

} );

以上で作業は完了です!
円型のローディング以外にも、ラインや、セミサークル(半円)などなども実装できるのでぜひ活用してみてください!

https://kimmobrunfeldt.github.io/progressbar.js/

ローディングできました。

その他のローディング

そのほかにもローディングの実装もまとめているので、ぜひチェックしてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次