管理画面に独自のメッセージを表示させる方法です。プラグインを作る時によく使われる書き方なので、覚えておくと自作した管理画面を作る時に抵抗がなくなるかもしれません。
メッセージはユーザーが分かりやすく安心して使ってもらうために大事な要素だと思っています。管理画面にメッセージを追加してより使いやすい管理画面にしてあげましょう!
メッセージばかりも邪魔になるので、バランスは大事かもしれません。
管理画面にメッセージを表示する方法
管理画面にメッセージをっ表示させる方法をいろんなパターンで見ていきたいと思います!
常に表示させているパターン
管理画面の全てで登場するようになります。管理画面でメッセージを表示させるための基本の書き方です。
function my_admin_notices() {
echo '<div class="error"><p>メッセージ内容</p></div>';
}
add_action( 'admin_notices', 'my_admin_notices' );
functions.phpに上記の記述を追記すれば、常に管理画面で表示される状態となります。
特定のタイミングだけ表示させるパターン
なにか管理画面でアクションを行った時にメッセージを表示してほしいケースがほとんどだと思います。特定のタイミングでメッセージを表示させるには、なにか特定の条件を指定してあげましょう。
特定の投稿タイプだけ表示させたいパターン
store
という投稿タイプのときだけ表示させたい場合は以下のように記述します。
function my_admin_notices() {
global $post;
if ( isset( $post ) ) {
if ( 'store' === $post->post_type ) {
echo '<div class="error"><p>メッセージ内容</p></div>';
}
}
}
add_action( 'admin_notices', 'my_admin_notices' );
特定の管理画面のページだけ表示させたいパターン
管理画面用のグローバル変数$pagenow
を使うことで、管理画面内のページを判定してメッセージを表示させることができます。以下は外観 → テーマでのみ表示させる例です。
function my_admin_notices() {
global $pagenow;
if ( 'themes.php' === $pagenow ) {
echo '<div class="error"><p>メッセージ内容</p></div>';
}
}
add_action( 'admin_notices', 'my_admin_notices' );
ifの中で指定している「themes.php」は管理画面のURLの「/wp-admin/」の後に続くphpファイル名を指定してあげればOKかと思います。
例えば、以下のような対応です。
- 設定→一般・・・options-general.php
- 設定→パーマリンク設定・・・options-permalink.php
- プラグイン→インストール済みプラグイン・・・plugins.php
- 外観→ウィジェット・・・widgets.php
- 外観→テーマ・・・themes.php
- 外観→メニュー・・・nav-menus.php
更新直後だけに表示させたいパターン
標準でも管理画面から記事を更新すると、「更新しました」みたいなメッセージが表示されるかと思います。この判定はカスタムフィールドやオプションとしてデータベースに判定用の値を持たせることで実現しています。
手順としては、保存時に判定用の値も保存 → 保存した値を判定してメッセージを表示 → 判定用の値を元に戻して2回目は表示されないようにする、という流れになります。
保存の場所はどこでもいいのですが、ユーザー情報を更新する時を例にしてみました。まずは、pre_user_first_name
でユーザー情報の保存と一緒に判定用の値(_is_my_update
)も登録します。
function my_pre_user_first_name() {
set_theme_mod( '_is_my_update', 'true' );
}
add_filter( 'pre_user_first_name', 'my_pre_user_first_name' );
続いて、保存した値を判定してメッセージを表示 + 判定用の値を元に戻して2回目は表示されないようにするの記述をメッセージの表示部分に記載します。
function my_admin_notices() {
if ( 'true' === get_theme_mod( '_is_my_update' ) ) {
echo '<div class="error"><p>メッセージ内容</p></div>';
set_theme_mod( '_is_my_update', 'false' );
}
}
add_action( 'admin_notices', 'my_admin_notices' );
保存時に_is_my_update
の値をtrue
として指定して、メッセージを呼び出した後はfalse
に変更することで、「保存したタイミングだけメッセージを表示する」という見かけ上の動きをさせることが可能になります。
このデータベースに判定用の値を保存するという方法は自作プラグインを作る時に使えるかと思います。
メッセージを表示させるHTMLパターン
メッセージを表示させるための基本的な型としては以下のような感じです。このクラスの値を変えることで赤や緑といった色の違いを出しています。
<div class="error"><p>メッセージ内容</p></div>
赤のメッセージ
error
クラスを適応すると、赤色のメッセージとなります。
<div class="error"><p>メッセージ内容</p></div>
緑のメッセージ
updated
クラスを適応すると、緑色のメッセージとなります。
<div class="updated"><p>メッセージ内容</p></div>
独自の見栄えも可能
HTMLやCSSが自由に設定できるということは、独自の見栄えで表現することが可能ということです。簡単に独自のスタイルを適応させる方法を見ていこうと思います。
めっちゃ簡単な変更ですが背景を赤くして文字を白くするっていう変更を行います。こんな感じです。
管理画面用のCSS追加
まずは、管理画面用に独自のCSSを読み込ませてあげる必要があります。
function my_admin_style() {
wp_enqueue_style( 'my-admin', get_template_directory_uri() . '/css/my_admin.css', array(), '1.0.0', 'all' );
}
add_action( 'admin_enqueue_scripts', 'my_admin_style' );
wp_enqueue_scripts
の管理画面版というイメージを持ってもらえたらと思います。テーマフォルダ内にあるcssフォルダ配下にmy_admin.cssファイルを追加してあげてください。
CSSの追加
そして、my_admin.cssに独自のCSSを書いていきます。これはもともとの.error
クラスを上書きする形で、背景を赤くして文字を白くするという指定ですね。
.error.my-error {
background: #e57373;
color: #fff;
}
クラスの追加
最後に表示させるHTMLにmy-error
の独自のクラスを追加してあげます。
function my_admin_notices() {
echo '<div class="my-error error"><p>メッセージ内容</p></div>';
}
add_action( 'admin_notices', 'my_admin_notices' );
おわり
WordPresssの管理画面に独自のメッセージを表示する方法でした。管理画面がグーテンベルクになってこういった昔風のメッセージ表示は淘汰されていくのかもと思ったり…
自作プラグインを作る上でメッセージはユーザーに分かりやすく安心して使ってもらう上で大事だと思います。admin_notices
は管理画面を更新するたびに常に呼び出されているっぽい動きなので、条件分岐して好きなタイミングで表示させてあげてください!