<!-- ローディング画面（<head> 内に配置）
     JavaScript が動かない環境では、ローディング画面を表示しない（表示したまま消えなくなるのを防ぐ） -->
<noscript><style>#page-loader { display: none !important; }</style></noscript>
<style>
/* ===== ここから CSS（ローディング画面） ===== */

/* ローディング画面：画面いっぱいに重ねて、ローディングアニメーションを中央に表示する */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;                      /* ★ ローディング画面の色 */
  opacity: 1;
  transition: opacity .5s ease;             /* ★ 消える速さ */
}

/* 読み込みが終わったら、JavaScript が is-hide を追加してフェードアウトさせる */
#page-loader.is-hide {
  opacity: 0;
  pointer-events: none;
}

/* ===== ここまで CSS（ローディング画面） ===== */

/* ===== ローディングアニメーションの CSS は、ここから下に追加 ===== */
</style>

<!-- ローディング画面（<body> の直後に配置） -->
<div id="page-loader" role="status" aria-label="読み込み中">

    <!-- ▼ ここにローディングアニメーションの HTML を追加
    （CSS は <head> 内のコードの「CSS は、ここから下に追加」の下、JavaScript はこのコードの一番下に追加） -->
    <!-- ▲ ここまで -->

</div>

<script>
/* ===== JavaScript（ローディング画面） =====
   ・ページの読み込みが終わったら（load）、ローディング画面をフェードアウトして削除する
   ・読み込みが速くても、MIN_SHOW のあいだは表示する（一瞬だけ表示されてチラつくのを防ぐ）
   ・読み込みが終わらなくても、MAX_WAIT を過ぎたら消す（表示したまま消えなくなるのを防ぐ）
   ・ローディング画面の HTML より後ろに配置する（HTML より前だと #page-loader が見つからないため） */
(function () {
  var MIN_SHOW = 800;     /* ★ 最低の表示時間（ミリ秒） */
  var MAX_WAIT = 10000;   /* ★ 最大の待ち時間（ミリ秒） */

  var loader = document.getElementById('page-loader');
  if (!loader) { return; }

  var startedAt = Date.now();
  var done = false;

  /* ローディング画面を削除する */
  function remove() {
    if (loader.parentNode) { loader.parentNode.removeChild(loader); }
  }

  /* ローディング画面を消す（1回だけ） */
  function hide() {
    if (done) { return; }
    done = true;
    var wait = Math.max(0, MIN_SHOW - (Date.now() - startedAt));   /* MIN_SHOW に足りない分だけ待つ */
    setTimeout(function () {
      loader.classList.add('is-hide');                                       /* フェードアウト開始 */
      var d = parseFloat(getComputedStyle(loader).transitionDuration) || 0;  /* CSS の transition の時間（秒） */
      if (d === 0) { remove(); return; }                                     /* フェードなし：すぐ削除 */
      loader.addEventListener('transitionend', function (e) {                /* フェードあり：終わったら削除 */
        if (e.target === loader) { remove(); }                               /* ローディングアニメーションの transition の終わりでは削除しない */
      });
      setTimeout(remove, d * 1000 + 200);                                    /* transitionend が来なかったときの予備 */
    }, wait);
  }

  /* 読み込み完了で消す（すでに終わっていればすぐ） */
  if (document.readyState === 'complete') {
    hide();
  } else {
    window.addEventListener('load', hide);
  }
  setTimeout(hide, MAX_WAIT);
})();
</script>

<!-- ===== ローディングアニメーションの JavaScript は、ここから下に追加 ===== -->

if (!el.isConnected) { return; }   /* el はローディングアニメーションの要素。ローディング画面ごと削除されたら止める */

/**
 * ローディング画面
 * ・wp_head      ：<head> 内のコード（CSS と noscript）を出力
 * ・wp_body_open ：<body> の直後のコード（HTML と JavaScript）を出力
 */
function page_loader_head() {
	?>
	<!-- 「CSS と noscript」のコードを、この行と入れ替えて追記 -->
	<?php
}
add_action( 'wp_head', 'page_loader_head' );

function page_loader_body() {
	?>
	<!-- 「HTML と JavaScript」のコードを、この行と入れ替えて追記 -->
	<?php
}
add_action( 'wp_body_open', 'page_loader_body' );