コピペで簡単！WordPressの読み込み画面にロゴや画像を表示する方法【ページ指定可能&プラグイン不要】

function add_loading_screen() {
  // ローディング画面を表示するページや投稿のID・スラッグを配列で設定
	$target_pages = ['category', 'contact', 63]; // ページIDやスラッグを指定
	$target_posts = [628]; // 特定の投稿IDを指定

    // ホーム画面、または$target_pages内のID/スラッグと一致するページをチェック
    if (
        is_front_page() || 
        (is_page() && in_array(get_queried_object_id(), $target_pages)) || 
        (is_page() && in_array(get_post_field('post_name', get_queried_object_id()), $target_pages)) ||
        (is_category() && in_array('category', $target_pages)) ||
        (is_single() && in_array(get_the_ID(), $target_posts))
    ) {
        ?>
        <div class="my_loading">
            <img src="画像URLを指定" alt="Loading..." id="my_loading-logo">
        </div>
        <script>
            // ローディング画面の最小表示時間（ミリ秒）
            const minDisplayTime = 500; // 0.5秒

            window.addEventListener("load", function() {
                const loadingScreen = document.querySelector(".my_loading");
                setTimeout(() => {
                    loadingScreen.style.display = "none";
                }, minDisplayTime + 1850); // フェードアウト時間を考慮（0.7秒 + 0.5秒の最小表示時間）
            });
        </script>
        <?php
    }
}
add_action('wp_head', 'add_loading_screen');

/* ローディングスクリーンのスタイル */
.my_loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: my_fadeOutBackground 1.0s 1.5s forwards;
}

.my_loading img {
    opacity: 0;
    animation: my_logo_fade 1s 0.1s forwards;
    width: 250px; /* ロゴのサイズ（パソコン） */
}

@media screen and (max-width: 959px) {
    .my_loading img {
        width: 200px; /* ロゴのサイズ（スマホ） */
    }
}

/* 背景のフェードアウトアニメーション */
@keyframes my_fadeOutBackground {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* ロゴのフェードイン・フェードアウトアニメーション */
@keyframes my_logo_fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    60% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
    }
}