【Lightning】プラグインなしでローディングアニメーションを実装する方法｜子テーマで完結

2026年8月6日

あなたのサイト、こんなことになっていませんか？

まめすけ

ページを開いた瞬間、画像がバラバラっと表示されて、なんだか安っぽく見える……

私はフリーランスでWordPressサイトの制作と保守を請け負っており、Lightningテーマの案件も継続的に対応しています。

Lightningには、SWELLのような「JavaScriptを追加する機能」が標準では用意されていません。そのため、ローディングアニメーションを入れようとするとプラグインに頼りがちです。

ただ、子テーマを使えばプラグインなしで実装できます。この記事では、その手順をコードごと解説します。

CSSとJavaScriptを追加する作業になります。必ず事前にバックアップを取得してから進めてください。

まずは完成形をご覧ください。この記事の手順で、下図のアニメーションが実装できます。

プラグインを使うのと、使わないのはどちらがいい？

「とりあえず入れたい」ならプラグイン、「思いどおりに見せたい」なら自作です。

判断基準を整理します。

	プラグインを使う	使わない（自作）
導入の手間	◎ 数分で完了	△ 手順が必要
表現の自由度	△ 用意された型のみ	◎ 完全に自由
サイトへの負荷	△ プラグインが1つ増える	◎ 増えない
コスト	○ 無料のものもある	◎ かからない
失敗リスク	◎ 低い	△ 記述ミスで崩れる
必要な知識	不要	FTPと子テーマの基礎

単に「くるくる回る画面を出したい」だけならプラグインで十分です。無理に自作する必要はありません。

一方で、ブランドカラーを使いたい、独自のロゴを出したい、動きを細かく調整したいという場合は、プラグインでは届きません。この記事は後者の方に向けた内容です。

なお、SWELLなら管理画面からJavaScriptを追加できるため、FTPを触る必要がありません。手順もぐっと短くなり時短できます。

SWELLの方はこちら

【WordPress】テーマ「SWELL」でローディングアニメーション（コピペOK）閲覧ありがとうございます。記事の内容が不足していたので加筆・修正しました（2025.2.4）ページテーマ「SWELL」を使っていて、トップページのローディング画面が欲…

Lightningでは、どこにファイルを置けばいい？

子テーマのフォルダ内に js フォルダを作り、そこに置きます。

※画像では custom.js としていますが、この記事のコードは loading.js を前提にしています。
　別の名前にする場合は、functions.php 内のファイル名も同じものに書き換えてください。

親テーマに直接置いてはいけません。Lightningがアップデートされた瞬間、追加したファイルは消えます。

作るのはこの構造です。

/wp-content/themes/lightning-child/
    ├── style.css
    ├── functions.php
    └── js/
        └── loading.js   ← 新規作成

手順は以下のとおりです。

FTPソフト、またはサーバーのファイルマネージャーでログイン
/wp-content/themes/ 配下の子テーマフォルダを開く
js という名前のフォルダを新規作成
その中に loading.js という空ファイルを作成

私の環境はシンレンタルサーバーですが、ファイルマネージャーを持つサーバーであれば操作はほぼ同じです。エックスサーバーでもConoHa WINGでも変わりません。

子テーマがまだ無い場合は、先に子テーマを用意してください。ここを飛ばすと、更新のたびに作業が消えます。

Lightning子テーマの作り方はこちら

WordPressの子テーマの作り方｜Lightning・SWELL別に、つまずかない手順で解説 | ウェブlog テーマを更新したらカスタマイズが消えた——それを防ぐのが子テーマです。SWELL・Lightningの公式配布の入れ方から、自作する場合のstyle.cssとfunctions.phpの書き方まで、…

JavaScriptファイルはどうやって読み込ませる？

子テーマの functions.php に wp_enqueue_script で登録します。

header.php に直接 <script> を書く方法もありますが、WordPressの作法から外れるうえ、テーマ更新時に消える可能性があります。必ず functions.php 経由にしてください。

以下を子テーマの functions.php の末尾に追記します。

php

/**
 * ローディングアニメーション用のJSを読み込む
 */
function ksuke_loading_scripts() {
	wp_enqueue_script(
		'ksuke-loading',
		get_stylesheet_directory_uri() . '/js/loading.js',
		array(),
		filemtime( get_stylesheet_directory() . '/js/loading.js' ),
		true
	);
}
add_action( 'wp_enqueue_scripts', 'ksuke_loading_scripts' );

ポイントは2つです。

get_stylesheet_directory_uri() を使うこと。get_template_directory_uri() だと親テーマを見に行ってしまいます
第4引数の filemtime() は、ファイルの更新日時をバージョン番号にする書き方です。修正してもキャッシュが残らず、すぐ反映されます

functions.php は1文字のミスでサイト全体が真っ白になります。編集前に必ずコピーを取り、可能ならFTPで直接編集してください（管理画面のテーマエディターは、エラー時に自分も入れなくなる場合もあります。）。

ローディング画面のHTMLはどこに書く？

functions.php から wp_body_open フックで出力します。

ここが忘れられがちな部分です。JSとCSSだけ用意しても、隠すための要素そのものが存在しないと何も起きません。

先ほどのコードの下に、続けて追記します。

php

/**
 * ローディング画面のHTMLを出力する
 */
function ksuke_loading_html() {
	echo '<div class="loading" id="js-loading">'
		. '<div class="loading__spinner"></div>'
		. '</div>';
}
add_action( 'wp_body_open', 'ksuke_loading_html' );

wp_body_open は <body> の直後に出力されるフックです。ページの一番手前にオーバーレイを置くため、この位置である必要があります。

クラス名はBEM記法で統一しています。loading がブロック、loading__spinner がその要素です。IDの js-loading はJavaScriptからの参照専用で、スタイルは当てません。

JavaScriptには何を書けばいい？

「読み込みが終わったらクラスを付ける」だけです。

loading.js に以下を記述します。

document.addEventListener('DOMContentLoaded', function () {
	var loading = document.getElementById('js-loading');
	if (!loading) return;

	// 読み込み完了時に非表示クラスを付与
	window.addEventListener('load', function () {
		loading.classList.add('loading--hidden');
	});

	// 保険：5秒経過したら強制的に非表示にする
	setTimeout(function () {
		loading.classList.add('loading--hidden');
	}, 5000);
});

やっていることは単純で、loading--hidden というクラスを付けるだけです。実際に消す動きはCSS側が担当します。

重要なのは後半の setTimeout です。これは保険です。

画像の読み込みに失敗するなど、何らかの理由で load イベントが発火しないと、ローディング画面が永久に消えず、真っ白なまま操作できないサイトになります。5秒で強制的に解除しておけば、最悪の事態は避けられます。

まめすけ

消える仕組みより、消えなかったときの逃げ道のほうが大事だね

CSSはどう書けばいい？

画面全体を覆い、透過させて消す指定です。

子テーマの style.css の末尾に追記します。

css

/* ローディング画面
--------------------------------- */
.loading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loading--hidden {
	opacity: 0;
	visibility: hidden;
}

.loading__spinner {
	width: 48px;
	height: 48px;
	border: 4px solid #e0e0e0;
	border-top-color: #3A1078;
	border-radius: 50%;
	animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
	to {
		transform: rotate(360deg);
	}
}

調整するのはこのあたりです。

変えたい箇所	該当プロパティ
背景色	`.loading` の `background-color`
スピナーの色	`.loading__spinner` の `border-top-color`
スピナーの大きさ	`.loading__spinner` の `width` / `height`
消えるまでの速さ	`.loading` の `transition` の秒数
回転の速さ	`.loading__spinner` の `animation` の秒数

visibility: hidden を opacity と一緒に指定しているのは、透明になったあとも要素が残ってクリックを妨げるのを防ぐためです。opacity: 0 だけだと、見えないボタンが画面を覆い続けます。

動かないときは何を確認する？

上から順に、5か所を切り分けてください。

症状	確認すること
何も表示されない	HTMLが出力されているか。ブラウザの検証ツールで `.loading` を探す
ローディングが消えない	ブラウザのコンソールにJSエラーが出ていないか
JSが読み込まれていない	検証ツールの「ネットワーク」タブに `loading.js` があるか
見た目が崩れる	CSSが親テーマの指定に負けていないか（`z-index` を上げる）
サイトが真っ白	`functions.php` の記述ミス。FTPで直前の状態に戻す