WordPressに初回アクセス1回のみ表示のローディング画面実装しました。

add_action(
	'wp_body_open',
	function() {
		if (is_front_page() || is_home()) { // フロントページまたはホームページの場合のみ
			?>
			<div id="loading-screen">
				<div class="loading-text">VIBES</div>
			</div>
			<?php
		}
	}
);

document.addEventListener("DOMContentLoaded", function () {
  const loadingScreen = document.getElementById("loading-screen");

  // ローカルストレージを確認
  const hasVisited = localStorage.getItem("hasVisited");

  if (!hasVisited) {
    // 初回訪問: ローディング画面を表示
    localStorage.setItem("hasVisited", "true");

    // フェードアウト後にローディング画面を削除
    setTimeout(() => {
      loadingScreen.classList.add("hidden");
      setTimeout(() => {
        loadingScreen.remove();
      }, 1000); // フェードアウト時間に合わせる
    }, 3000); // アニメーション時間に合わせる
  } else {
    // 2回目以降: ローディング画面をスキップ
    loadingScreen.remove();
  }
});

/* ローディング画面のスタイル */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
}


/* テキストのアニメーション */
.loading-text {
  color: #fff;
	font-size: 5rem;
  font-family: "Pathway Gothic One", sans-serif;
  animation: fadeInOut 3s ease forwards;
}

/* アニメーション定義 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1); 
  }
}