この記事は最後に更新してから1年以上経過しています。
説明
標準で用意されているスタイルを知っておくことで、独自に用意するスタイルを軽減でき、機能拡張した部分の見た目は違和感が少なくなる。そんな共通要素のスタイルのひとつが「メッセージ」だ。メッセージにはいくつかの意味合いがあり、用途に応じてすぐに使い分けすることになる。今回はそんなメッセージ向けのスタイルをざっくりまとめてみた。
メッセージの基本スタイル
管理画面向けのプラグインでは、ユーザーの操作に対応してさまざまなメッセージを出力する。管理画面向けのスタイルは標準で読み込まれており、プラグインで簡単にすぐに利用できる。メッセージはdiv要素とp要素で構成するのが一般的で、div要素にはnoticeクラスなどを指定する。
<div class="notice notice-success notice-alt">メッセージ
青字のクラスで色味を選択し、赤字のnotice-altクラスを指定した場合は同系色の別バリエーションとなる。
noticeクラス | 出力イメージ |
---|---|
.notice-success | ![]() |
.notice-success.notice-alt | ![]() |
.notice-warning | ![]() |
.notice-warning.notice-alt | ![]() |
.notice-error | ![]() |
.notice-error.notice-alt | ![]() |
.notice-info | ![]() |
.notice-info.notice-alt | ![]() |
この8種類が基本形になり、クラス指定にはエイリアスもあるがここでは割愛する。
非表示ボタンを付ける
応用例の1つとして、div要素にis-dismissibleクラスを追加することで、ユーザーがメッセージを非表示にできるボタン(アイコン)を付けることができる。
メッセージ
この内容を実際に出力すると次のような表示となる。

開発者は、ボタン部分のHTML要素だけでなく、クリック時にこのメッセージを非表示にするスクリプトも用意する必要はない。
最終更新 : 2019年07月30日 14:23
お勧め
wp_authenticate(2022年1月31日 更新)
WP_User | WP_Error wp_authenticate( string $username, string $password )
ユーザー認証を行う。
wp_send_json_success(2020年12月10日 更新)
void wp_send_json_success( [ mixed $response = null [ , int $status_code = null [ , int $options = 0 ] ] ] )
AJAXリクエストの成功レスポンスとしてJSON情報を返す。
wp_oembed_get(2014年11月16日 更新)
mixed wp_oembed_get( string $url [ , mixed $args = '' ] )
oEmbedに対応したページの埋め込み用コンテンツを取得する。
setup_postdata(2014年11月16日 更新)
bool setup_postdata( stdClass $post )
投稿記事に関連するグローバル変数を設定する。
the_permalink(2018年5月27日 更新)
void the_permalink( [ mixed $post = 0 ] )
現在の投稿データのパーマリンクを表示する。