[WordPress] 管理画面のエラー表示を目立たせるために試したCSSカスタマイズ

MARKLEAPS

2025.05.15

[WordPress] 管理画面のエラー表示を目立たせるために実施したこと

WordPressの管理画面で表示されるエラーメッセージ、うっかり見逃してしまったことはありませんか？

今回は、エラー表示を目立たせるために試したCSSカスタマイズ方法を紹介します。
functions.phpへのコード追加とCSSの追加だけで実現できる、比較的シンプルなカスタマイズです。

管理画面のエラー表示が見づらい問題

WordPressの管理画面では、フォームの入力ミスやメール送信エラーなどが div.error や div.updated クラスで表示されます。

しかし、標準のスタイルはやや控えめで、作業に集中していると見落としがちです。

特に、他の項目に意識が向いている場合や、慣れていないユーザーにとっては、もっとはっきり目立っていてほしいと感じる場面もあります。

管理画面用のオリジナルCSSを読み込ませる方法

管理画面用のオリジナルCSSを追加します。
以下のコードを functions.php に記述すると、任意のCSSファイルを読み込ませることができます。

/****************************/
/** 管理画面スタイル調整 **/
/****************************/
function my_admin_styles() {
    wp_enqueue_style('my-admin-style', get_stylesheet_directory_uri() . '/my_admin_style.css');
}
add_action('admin_enqueue_scripts', 'my_admin_styles');

/****************************/

/** 管理画面スタイル調整 **/

/****************************/

function my_admin_styles() {

wp_enqueue_style('my-admin-style', get_stylesheet_directory_uri() . '/my_admin_style.css');

}

add_action('admin_enqueue_scripts', 'my_admin_styles');

このコードは、管理画面のHTMLが出力されるときに、<head>内に my_admin_style.css を読み込むようWordPressに指示しています。

ポイント

・CSSファイル名は自由に変更OK（ただしファイル名とパスを一致させる）
・子テーマでも使用可能
・フロント（公開）画面には影響なし

エラー表示を目立たせるCSSの例

作成したCSSファイル（例：my_admin_style.css）に、エラー表示を強調するスタイルを記述します。

.wp-admin #wpbody-content .error p {
  margin: 1em 0;
  font-size: 16px;
  font-weight: bold;
  color: #d63638;
}

.wp-admin #wpbody-content .error p {

margin: 1em 0;

font-size: 16px;

font-weight: bold;

color: #d63638;

}

さらに目立たせたい場合は、シャドウやアニメーションを加えるのも効果的です。

.wp-admin #wpbody-content .error {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  animation: blink 2s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}