この記事は最後に更新してから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
お勧め
wp_add_object_terms（2013年8月6日 更新）
mixed wp_add_object_terms( int $object_id, mixed $terms, mixed $taxonomy )
投稿情報などにタクソノミーを追加する。
sanitize_key（2018年5月27日 更新）
string sanitize_key( string $key )
サイト内識別子向けにサニタイズする。
get_default_comment_status（2018年5月27日 更新）
string get_default_comment_status( [ string $post_type = 'post' [ , string $comment_type = 'comment' ] ] )
投稿タイプのコメントステータスを取得する。
wp_slash_strings_only（2020年12月17日 更新）
mixed wp_slash_strings_only( $value )
配列またはオブジェクト内の文字列をバックスラッシュでエスケープする。
url_shorten（2018年5月27日 更新）
string url_shorten( string $url [ , int $length = 35 ] )
（表示向けに）URLを短縮する。