【コピペOK】ページ読み込み時にローディングアニメーションを表示する方法｜WordPress対応

2025年10月5日 最終更新日時 : 2025年12月9日 login_user
目次

ページが読み込まれるまでの間に「ローディングアニメーション」を表示することで、ユーザー体験（UX）を向上させることができます。
今回はシンプルなローディングアニメーションの実装方法をご紹介します。

1 ローディング画面の構造を追加

今回は基本スタイルです。これで中央にスピナーが表示され、ページロード完了後にフェードアウトします。

まず、サイト全体で共通表示させるため、header.php に次のコードを挿入します。
（<body> タグ直後に挿入するのがおすすめです）

（Lightningテーマ）ファイル名：header.php
保存先：wp-content/themes/child-theme/g2/header.php

（汎用テーマ、Cocoonテーマ）ファイル名：header.php
保存先：wp-content/themes/child-theme/header.php


<div id="loading">
  <div class="spinner"></div>
</div>

この構造が「ローディング表示エリア」です。

1.1 ディレクトリ構造

  • child-theme/
    • g2/
      • header.php←Lightningテーマ
    • archive.php
    • category.php
    • functions.php
    • footer.php
    • header.php←汎用テーマ、Cocoonテーマ
    • style.css
    • js/
      • loading.js

2 functions.php にコードを追加

コテーマのfunctions.phpに以下のコードを追加すると、全ページに自動でローディング画面を挿入できます。


//-------------------------------------------
// 全ページに読み込み
//-------------------------------------------
function add_loading_animation() {
  ?>
  <div id="loading"><div class="spinner"></div></div>
  <script>
  window.addEventListener('load', function() {
    const loader = document.getElementById('loading');
    loader.classList.add('hidden');
  });
  </script>
  <style>
  #loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  .spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #ccc;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  #loading.hidden {
    opacity: 0;
    visibility: hidden;
  }
  </style>
  <?php
}
add_action('wp_body_open', 'add_loading_animation');

3 javascript にコードを追加

以下をfunctions.php経由でフッターに読み込ませます。

ファイル名：loading.js
保存先：wp-content/themes/child-theme/js/loading.js


//-------------------------------------------
// ローディング・ロード完了時に非表示
//-------------------------------------------
window.addEventListener('load', function() {
  const loader = document.getElementById('loading');
  loader.classList.add('hidden');
});

これでページ読み込み完了後にフェードアウトします。

1.1 ディレクトリ構造

  • child-theme/
    • style.css
    • functions.php
    • footer.php
    • header.php
    • js/
      • loading.js
    • images/
      • logo.png

4 汎用CSS


/* -----------------------------
 * ローディング画面
----------------------------- */

/* ローディング全体 */
#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* スピナー */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ccc;
  border-top-color: #0073aa; /* WordPressブルー */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 回転アニメーション */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* フェードアウト */
#loading.hidden {
  opacity: 0;
  visibility: hidden;
}

5 テーマ別サンプルCSS

5.1 Lightning用CSS

Lightningテーマの場合、背景色やヘッダー固定の影響で白背景が浮くことがあります。
下記のようにテーマカラーに合わせて調整します。


/* -----------------------------
 * ローディング画面
----------------------------- */

/* Lightning用 ローディング全体 */
#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* スピナー */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ccc;
  border-top-color: #0073aa; /* WordPressブルー */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 回転アニメーション */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* フェードアウト */
#loading.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 微調整 */
#loading {
  background: #f8f9fa; /* Lightningの背景トーンに合わせる */
}

.spinner {
  border-top-color: #005bac; /* Lightningブルー */
}

5.2 Cocoon用CSS

Cocoonではデフォルトで白背景が多いので、透過黒を使って自然に見せます。



/* -----------------------------
 * ローディング画面
----------------------------- */

/* Cocoon用  ローディング全体 */
#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* スピナー */
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ccc;
  border-top-color: #0073aa; /* WordPressブルー */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 回転アニメーション */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* フェードアウト */
#loading.hidden {
  opacity: 0;
  visibility: hidden;
}

/* 微調整 */
#loading {
  background: rgba(0,0,0,0.6);
}

.spinner {
  border-top-color: #00a0d2; /* WordPressブルー系 */
}

6 動作確認

ブラウザでページを開くと、ロード中にスピナーが表示され、読み込み完了後に自然に消えます。
CSSや色を変えれば、独自デザインにも応用できます。

7 まとめ

  • HTML： <div id="loading">を<body>直後に設置
  • CSS： スピナーアニメーションとフェードアウト
  • JavaScript： ロード完了後に.hiddenクラスを追加

シンプルながら効果的な演出なので、ぜひサイトの印象アップに活用してみてください。

7.1 関連記事

この記事を読んだ人はこちらも読んでいます

カテゴリー
便利Tips、子テーマ・テーマカスタマイズ
タグ
前の記事
WordPressにPDFを表示する方法【PDF Embedder】
2025年10月4日
次の記事
WordPressが真っ白！White Screen of Death（WSOD）の原因と対処方法
2025年10月5日