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

管理画面でよく使うスタイルをまとめてみた「メッセージ編」

説明

標準で用意されているスタイルを知っておくことで、独自に用意するスタイルを軽減でき、機能拡張した部分の見た目は違和感が少なくなる。そんな共通要素のスタイルのひとつが「メッセージ」だ。メッセージにはいくつかの意味合いがあり、用途に応じてすぐに使い分けすることになる。今回はそんなメッセージ向けのスタイルをざっくりまとめてみた。

メッセージの基本スタイル

管理画面向けのプラグインでは、ユーザーの操作に対応してさまざまなメッセージを出力する。管理画面向けのスタイルは標準で読み込まれており、プラグインで簡単にすぐに利用できる。メッセージはdiv要素とp要素で構成するのが一般的で、div要素にはnoticeクラスなどを指定する。

<div class="notice notice-success notice-alt">

メッセージ

青字のクラスで色味を選択し、赤字のnotice-altクラスを指定した場合は同系色の別バリエーションとなる。

noticeクラス出力イメージ
.notice-success.notice-successの出力イメージ
.notice-success.notice-alt.notice-success.notice-altの出力イメージ
.notice-warning.notice-warningの出力イメージ
.notice-warning.notice-alt.notice-warning.notice-altの出力イメージ
.notice-error.notice-errorの出力イメージ
.notice-error.notice-alt.notice-error.notice-altの出力イメージ
.notice-info.notice-infoの出力イメージ
.notice-info.notice-alt.notice-info.notice-altの出力イメージ

この8種類が基本形になり、クラス指定にはエイリアスもあるがここでは割愛する。

非表示ボタンを付ける

応用例の1つとして、div要素にis-dismissibleクラスを追加することで、ユーザーがメッセージを非表示にできるボタン(アイコン)を付けることができる。

メッセージ

この内容を実際に出力すると次のような表示となる。

.notice-success.is-dismissibleの出力イメージ

開発者は、ボタン部分のHTML要素だけでなく、クリック時にこのメッセージを非表示にするスクリプトも用意する必要はない。


最終更新 : 2019年07月30日 14:23

お勧め

wp_suspend_cache_addition(2023年6月8日 更新)

bool wp_suspend_cache_addition( [ bool $suspend = null ] )
キャッシュの追加を一時的に停止する。

wp_json_file_decode(2022年1月26日 更新)

mixed wp_json_file_decode( string $filename [ , array $options = array() ] )
JSONファイルをデコードする。

get_metadata_by_mid(2018年12月14日 更新)

object|bool get_metadata_by_mid( string $meta_type, int $meta_id )
IDを指定してメタデータを取得する。

human_time_diff(2019年11月18日 更新)

string human_time_diff( int $from [ , int $to = '' ] )
時間差を'5分'や'2日'のような感覚的な表現で取得する。

get_current_user_id(2013年9月18日 更新)

int get_current_user_id()
現在のログイン済みユーザーのIDを取得抽出する。