この記事は最後に更新してから1年以上経過しています。

更新ボタンの横にスピナーを実装する

処理中の画面に変化がない状態をなくす

説明

WordPressの管理画面ではAJAXを使って何らかの処理を行う際、数秒間の空き時間にアイコンがクルクル回る「スピナー」を表示しているところがある。今作っているプラグインでこの「スピナー」を使いたくなったので、実装方法を調べてみた。

「スピナー」の実体

まずは「スピナー」を表示しているページとして、「クラシックエディター」の更新ウィジェットがある。

「更新」ボタンを押し、ブラウザの開発者向け機能を使って「スピナー」を表示中のHTMLコードを確認してみた（以下は便宜上タブなどを除外）。

<div id="publishing-action">
<span class="spinner is-active"></span>
input name="original_publish" type="hidden" id="original_publish" value="更新">
<input name="save" type="submit" class="button button-primary button-large" id="publish" value="更新">
</div>

これによると、「スピナー」の実態はspan要素だった。通常時はspinnerクラスが指定され、アイコンが回転している状態ではis-activeクラスが追加されていた。

2つのクラスのスタイルは、/wp-admin/css/common.cssにて次のように定義されている。

.spinner {
	background: url(../images/spinner.gif) no-repeat;
	background-size: 20px 20px;
	display: inline-block;
	visibility: hidden;
	float: right;
	vertical-align: middle;
	opacity: 0.7;
	filter: alpha(opacity=70);
	width: 20px;
	height: 20px;
	margin: 4px 10px 0;
}

.spinner.is-active,
.loading-content .spinner {
	visibility: visible;
}

spinnerクラスは背景画像にアニメーションGIFが指定され標準では非表示。これをis-activeクラスを追加することで背景画像が表示される仕組みになっている。

実装してみた

さっそく「スピナー」を表示したいところにspan要素を追加。ここではid属性値として'update-spinner'を指定している。

<span id="update-spinner" class="spinner"></span>

ボタンをクリックした際のJavaScriptコードは次のような感じ。AJAXリクエストの前にis-activeクラスを追加し、レスポンスが返ってきたらis-activeクラスを削除している。

$( '#update-spinner' ).addClass( 'is-active' );

var params = {
	action: ajax_action,
	_ajax_nonce: ajax_nonce,
	_wp_http_referer: http_referer,
	param: param,
};
$.post( ajaxurl, params, function( response ) {

	// レスポンスを処理

}, 'json' )
.always( function ( data ) {
	$( '#update-spinner' ).removeClass( 'is-active' );
} );

管理画面向けの場合は/wp-admin/css/common.cssは読み込まれているので、ほかに手間はいらない。「スピナー」の実装はとてもお手軽のようだ。

最終更新 : 2019年05月14日 10:20

お勧め

add_shortcode（2018年5月27日更新）

void add_shortcode( string $tag, mixed $func )

ショートコード（独自タグ）を追加する。ショートコードは、投稿記事内でテキスト内容がない[tag]や、テキストを内包する[tag]テキスト[/tag]の書式で使用できる独自タグのこと。標準の状態では、 the_content関数によって表示する直前のフィルター処理内でパラメータ$funcで指定した関数・メソッドが実行される。

get_user_setting（2022年1月31日更新）

mixed get_user_setting( string $name [ , string $default = false ] )

ユーザーインターフェイス設定を取得する。

have_posts（2018年5月27日更新）

bool have_posts( )

次の投稿データが存在するかを調べる。

in_category（2018年5月27日更新）

bool in_category( mixed $category [ , mixed $post = null ] )

投稿情報が指定したカテゴリーに属しているか調べる。

add_feed（2024年6月24日更新）

string add_feed( string $feedname, callable $callback )

フィードを追加する。