ワードプレスにGIFでローディングアニメーションを追加する方法【コピペで簡単！】

				
					function custom_load_scripts() {
    wp_enqueue_script('custom-loader', get_template_directory_uri() . '/js/custom-loader.js', array('jquery'), '', true);
    wp_localize_script('custom-loader', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'custom_load_scripts');

function custom_page_loading_animation() {
    ?>
    <div id="custom-page-loader">
        <img decoding="async" src="ここにGIF画像のURLを入力" alt="Loading">
    </div>
    <style>
        #custom-page-loader {
            display: none; /* 最初は非表示 */
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #custom-page-loader img {
            max-width: 100px;
            height: auto;
        }
    </style>
    <script>
        jQuery(document).ajaxStart(function() {
            $('#custom-page-loader').show(); // Ajaxリクエスト開始時に表示
        });
        jQuery(document).ajaxStop(function() {
            $('#custom-page-loader').hide(); // Ajaxリクエスト終了時に非表示
        });
        jQuery(document).ready(function($) {
            $(window).on('load', function() {
                $('#custom-page-loader').fadeOut('slow'); // ページの読み込みが終わったら非表示
            });
            $('#custom-page-loader').show(); // ページの読み込みが完了するまで表示
            
            // ページ遷移時の処理
            $(document).on('click', 'a', function(e) {
                var href = $(this).attr('href');
                if (href && href.indexOf('#') !== 0 && !$(this).hasClass('no-loader')) {
                    e.preventDefault();
                    $('#custom-page-loader').fadeIn('fast', function() {
                        window.location.href = href;
                    });
                }
            });

            // 戻るボタンを使って戻った際の処理
            $(window).on('popstate', function() {
                $('#custom-page-loader').fadeOut('slow'); // 戻るボタンを使って戻った際にも非表示にする
            });

            if ($('body').hasClass('elementor-editor-active')) {
                $('#custom-page-loader').hide();
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_page_loading_animation');