簡単なローディング画面作成（Cocoon) | OFFのパソコン日記

簡単なローディング画面作成（Cocoon)

Cocoonを使ったウエブサイトを運用していますが、簡単なローディング画面を作成しました。

■ ウィジェットを「コンテンツ上部」に配置

<div class="loader-bg">
/* ローディング画面 */
</div>

■ 以下のコードをfunctions.phpに追加
<body>のすぐ後にソースコードを挿入

add_action('wp_body_open', function() {
  echo <<<EOF
<div class="loader-bg">
/* ローディング画面 */
</div>
EOF;

});

■ 以下のコードをjavascript.jsに追加

//ローディング画面
document.addEventListener('DOMContentLoaded', function () {
  // セッションストレージに「loadingDisplayed」が存在するか確認
  if (sessionStorage.getItem('loadingDisplayed')) {
    // すでにローディング画面を表示済みの場合、即非表示
    document.querySelector('.loader-bg').style.display = 'none';
  } else {
    // 初回訪問時のみローディング画面を表示
    setTimeout(function () {
      document.querySelector('.loader-bg').classList.add('hidden'); // フェードアウト
      // 非表示完了後にセッションストレージを設定
      sessionStorage.setItem('loadingDisplayed', 'true');
    }, 10);
  }
});

■ 以下のコードをstyle.cssのトップに追加。

.loader-bg {
  background-color: #4e78aa;
  display: grid;
  height: 100vh;
  place-content: center;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 9999;
  transition: opacity 1s ease, visibility 1s ease;
  opacity: 1; /* 初期状態：表示 */
  visibility: visible;
}

.loader-bg.hidden {
  opacity: 0; /* フェードアウト */
  visibility: hidden; /* 完全非表示 */
}