Personal WP Customization Notes (PWCN)

WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなど

管理画面に独自のスタイルを適用させる方法（プラグインなし）

公開日：2025(令和7)年9月25日／最終更新日：

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressの管理画面って結構素っ気なくないですか？なんだかひと昔前の業務用ソフトの画面みたいな（言い過ぎでした、スミマセン．．）。

これを少しでもパーソナライズするために、ユーザープロフィールの編集画面にはカラースキーマが用意されているものの、それを使ってもちょっと．．な感じがするので、今回はプラグインを使わず自力で管理画面全体に独自デザインを施す方法を紹介します。

【予備知識】ページごとに付与されているbodyクラスと追加

bodyクラスとは、HTMLのbodyタグに書かれているCSSクラスのことで、どこかの管理画面を開いて「F12」などを押してデベロッパーツールを開いて、出てきた画面の<body class=”….”>でどんなクラスがあるのかは確認できます。

ご存じかとは思いますが、スタイルコードを書く際に通常のCSSクラスの前に「body.特定のbodyクラス 」を付けることで、その画面（または共通のbodyクラスが付与されている画面だけ）にスタイルを適用させることができます。

bodyクラスはあまり表示画面側で使うことはないと思いますが、後に紹介するスタイルコードを見ていただければわかる通り、管理画面側へのスタイル適用では結構使う必要性がありますので、どんなものがあるのかを知っておくといいでしょう。

WordPress標準で出力されている各画面のbodyクラス

WordPressの管理画面に関しては、以下のようにWordPress側で特定のbodyクラスが出力されているし、wp-adminというbodyクラス指定すれば全管理画面に効くようにはなっています。

WordPressの各管理画面に付与されるbodyクラス一覧を見る
親メニュー画面の通称（名称）bodyクラス
ダッシュボードダッシュボードindex-php
本体の更新update-core-php
テーマやプラグインの更新update-php
設定options-general-php
投稿設定options-writing-php
表示設定options-reading-php
ディスカッションoptions-discussion-php
メディアoptions-media
パーマリンクoptions-permalink-php
プライバシーoptions-privacy-php
投稿・固定ページ・カスタム投稿タイプ一覧edit-php
新規作成post-new-php
編集post-php
タグ・カテゴリー・カスタムタクソノミー一覧edit-tags-php
タグ・カテゴリー・カスタムタクソノミーの編集term-php
メディア一覧upload-php
メディアアップロードmedia-new-php
コメント一覧edit-comments-php
外観テーマ一覧themes-php
カスタマイズ（クラシックテーマ）customize-php
サイトエディター（ブロックテーマ）site-editor-php
メニュー一覧nav-menus-php
ウィジェットwidgets-php
ツールtools-php
インポートimport-php
エクスポートexport-php
サイトヘルスsite-health-php
個人データのエクスポートexport-personal-data-php
個人データの消去erase-personal-data-php
プラグインエディターplugin-editor-php
テーマエディターtheme-editor-php
プラグイン一覧plugins-php
プラグインの新規追加plugin-install-php
ユーザーユーザー一覧users-php
新規ユーザー追加user-new-php
プロフィール編集profile-php
他のユーザーのプロフィール編集user-edit-php

従って、admin_headフックを使ってスタイルを直接PHPから適用するか、admin_enqueue_scriptsフックを使って管理画面側用のスタイルシートを読み込ませれば、特にwp-adminというbodyクラスを付けなくても大抵のスタイルコードは効くし、特定の画面に対するスタイルであれば上記一覧のbodyクラスを付与すれば大抵は何とかなります。

プラグインの設定画面には統一したbodyクラスを付与するようにする

プラグインの設定画面にももちろん以下のような形でそれぞれbodyクラスが出力されています。

  • ツールメニュー内・・・「tools_page_プラグイン設定画面のスラグ」
  • 設定メニュー内・・・「settings_page_プラグイン設定画面のスラグ」
  • トップレベルメニュー・・・「toplevel_page_プラグイン設定画面のスラグ」

つまりページの存在する位置ごとに、それぞれの設定ページのスラグを付けたbodyクラスが付与されているようになります。

これでも1つ1つの画面に対してスタイルを適用させることは可能と言えば可能なのですが、プラグインは追加したり削除したりすることが多いので、これらを個別スタイル指定していくのは大変ですし、スタイルを適用させることで肝心な設定項目が隠れているのに気づかなかったりしたら大変です。

そこで、以下のようなコードを有効化しているテーマのfunctions.phpへ追加して、どんなプラグインの設定画面でも、どのメニューの配下やトップメニューとして追加されていても共通のbodyクラスが付与されるようにします。

/*** プラグインの設定画面に「pwcn-plugin-page-bodyclass」というbodyクラスを追加 ***/
function pwcn_add_plugin_page_body_class( $classes ) {
	// 'page'パラメータがある場合のみ処理
	if ( isset( $_GET['page'] ) && ! empty( $_GET['page'] ) ) {
		$plugin_slug = sanitize_title( $_GET['page'] );
		$classes .= ' pwcn-plugin-page-bodyclass';//追加するbodyクラスの文字列
	}

	return $classes;
}
add_filter( 'admin_body_class', 'pwcn_add_plugin_page_body_class' );

このコードは、管理画面のURLにpageパラメーターがある場合（具体的には「/wp-admin/admin.php?page=..」というようなURLの場合）には、「追加するbodyクラスの文字列」と書かれた場所に指定した文字列（上記の場合は「pwcn-plugin-page-bodyclass」）をadmin_body_classにフックさせて管理画面のbodyクラス内に追加しなさいというものです。

コードを追加したら、どこかのプラグインの設定画面を開き、デベロッパーツールを使ってbodyクラスを確認してみてください。どの設定ページでも「pwcn-plugin-page-bodyclass」が追加されていて、かつ、その他の管理画面のページでは出力されていないことを確認しましょう

こんな簡単なコードで？と思ってしまいますが、案外簡単にできるんですね。

【前準備】管理画面へスタイルを適用させる

以下テーマフォルダ直下に「custom-admin-style.css」というスタイルシートを追加して読み込ませるための参考コードです。

function pwcn_admin_style_init( $hook='' ){
	$rand = rand( 1, 99999999999 );

	if ( 'post.php' != $hook ) {//編集画面には適用しない
		wp_enqueue_style(
			'pwcn-admin-custom-style',
			get_theme_file_uri('/custom-admin-style.css'),
			'array()',
			$rand
		);
	}//編集画面には適用しない
}
add_action('admin_enqueue_scripts','pwcn_admin_style_init');

あとは「custom-admin-style.css」へ通常のスタイルコードのようにコードを追加すれば適用されます。

上記コードでは投稿や固定ページの編集画面に作用しないようにしています。特に必要なければ「//編集画面には適用しない」のある行と、1行目の「$hook=”」を削除してください

以下はadmin_headにフックさせて適用させるための参考コードです。

function pwcn_direct_admin_style_init(){
?>
<style>
/*ここにスタイルコードを追加 */
</style>
<?php
}
add_action('admin_head','pwcn_direct_admin_style_init' , 9999 );

あとは「ここにスタイルコードを追加」のコメントの下へスタイルコードを追加すれば適用されます。

そして、スタイルを作っていく順序としてはこんな感じでしょうか？

  1. ひとまずダッシュボードや投稿一覧などを表示しながらスタイルコードを追加していく
  2. 徐々にその他の画面を表示しながらスタイルコードを追加していく
  3. 最後にプラグイン設定画面を表示しながらスタイルコードを追加していく

WordPressの管理画面は同じCSSクラスが指定されているところもあれば、画面ごとに全く別のクラスが当たっているところもあり、また、サイドメニューなどと共通でクラスが指定されているところもあったりと結構画一されたスタイルを作るのは大変ですが頑張っていきましょう。

ちなみに、WordPress公式で配布されているプラグインの中にも管理画面のスタイル変更ができるものがありますが、それらのプラグインを使っても結構スタイルの当たっていないところがあったりしますから、結構大変なんだろうと想像します。

追加する管理画面用のスタイルコード（例）

以下が実際に画面の確認をしながら作成した管理画面のスタイルコードです。

前項の前準備で追加した管理画面へスタイルを適用させる仕組みの中へコードをコピペし、背景画像のURLを入力するか、色を指定するだけで、背景があり、文字列が白色のスタイルが出来上がります。

ただし、プラグインの設定画面については、ある程度進めた段階で、やはりプラグインごとにいろいろとコードを追加する必要がありそうだったので、スタイルを適用させないという形にしています。

背景以外の部分は同じ文字色を指定するものばかりなのでコードはもっと削減できますが、後から特定の部分の修正がしやすいようあえて画面ごとに分けてます

ちなみに左が元の管理画面、右が背景画像含めて後述するスタイルコードを適用させた管理画面の表示例です。

管理画面に独自のスタイルを適用させる方法（プラグインなし）|Personal WP Customization Notes (PWCN)
管理画面に独自のスタイルを適用させる方法（プラグインなし）|Personal WP Customization Notes (PWCN)

結構いい感じになりますね（画面内容の影響が少ないのが「ツール」画面なのでそれだけ掲載します）。

ただWordPressはそもそも他のCMSと比べて管理画面と表示画面の境界がはっきりしているのがメリットだと思うんだけど．．まあ間違うことはないでしょうし、何よりどのサイトの管理画面かがはっきりするのがいいですね。

また、会員制サイトなどで、管理画面側に行かせるのが嫌だったり、管理画面のスタイルがちょっと．．という理由でわざわざセキュリティリスクを背負ってまでそれ用のプラグインを使っている方も、これなら管理画面側を見てもらっても大丈夫なのではないかと思います。

/***** 管理画面のスタイル *****/
/*** 全体の背景 ***/
#wpcontent {
	background-image: url(背景画像のURL);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/*background:#fff;*/
}


/*** 共通のもの ***/
.tablenav-pages,
.ac_match,
.subsubsub a.current,
.subsubsub a .count,
.subsubsub a.current .count,
.subsubsub,
ul.subsubsub a,
#wpfooter,
#wpfooter a,
h1.wp-heading-inline 
{
	color:#fff;
}

.wp-core-ui .button-primary {
    color:#fff!important;
}

.subsubsub a.current:hover,
.subsubsub a .count:hover,
.subsubsub a.current .count:hover,
ul.subsubsub a:hover,
#wpfooter a:hover,
#wpfooter a:active,
.wp-core-ui .button-primary:hover
{
	filter: brightness(0.7);
}

/* ダッシュボード */
body.index-php h1
{
	color:#fff;
}

/* パネル内のリンク色を元に戻す */
body.index-php ul.subsubsub a{
	color:#2271b1;
}

/* コアの更新ページ */
body.update-core-php,
body.update-core-php a,
body.update-core-php h1,
body.update-core-php h2,
body.update-core-php h3
{
	color:#fff;
}

body.update-core-php a:hover
{
	filter: brightness(0.7);
}

body.update-core-php .notice.notice-warning.inline {
    color: #3c434a;
}

body.update-core-php .notice.notice-warning.inline a {
    color: #2271b1;
}

/*** 投稿・固定ページ・カスタム投稿タイプ ***/
/* カテゴリー・タグ・タクソノミー */
.term-php h1,
.term-php label,
.term-php p,
.tablenav-pages,
.form-wrap p,
.form-wrap.edit-term-notes a,
body.edit-tags-php h2,
body.edit-tags-php #col-left label
{
	color:#fff;
}

.form-wrap.edit-term-notes a:hover{
	filter: brightness(0.7);
}

/*** メディア ***/
.media-new-php h1,
.media-new-php p,
.media-new-php label,
.media-new-php a
{
	color:#fff;
}

.media-new-php a:hover
{
	filter: brightness(0.7);
}

.drag-drop #drag-drop-area {
	border: 4px dashed #fff;
}

/*** 外観 ***/
/* テーマ */
form.search-form.search-themes
{
	color:#fff;
}

/* メニュー */
.nav-menus-php h2
{
	color:#fff;
}

/* ウィジェット */
.widget-access-link a,
#widgets-left p,
#widgets-left h2
{
	color:#fff;
}

.widget-description {
    color: #fff !important;
}

.widget-access-link a:hover,
{
	filter: brightness(0.7);
}

/*** プラグイン ***/
/* 新規追加 */
.install-help
{
	color:#fff;
}

#pluginzip {
	color: #3c434a;
}

body.update-php h1,
body.update-php h2,
body.update-php #wpcontent,
p.update-from-upload-notice a,
body.update-php #wpbody-content a,
body.update-php a
{
	color:#fff;
}

body.update-php a:hover,
p.update-from-upload-notice a:hover,
body.update-php #wpbody-content a:hover
{
	filter: brightness(0.7);
}

/* 一覧 */
form.search-form.search-plugins,
.plugins-popular-tags-wrapper h2,
body.plugin-install-php,
body.plugin-install-php a,
body.plugins-php label
{
	color: #fff;
}

/* プラグイン追加画面の一部の色を元に戻す */
.plugin-card-bottom
{
	color: #3c434a;
}

.plugin-card-top a,
p.popular-tags a
{
	color:#135e96!important;
}

body.plugin-install-php ul.filter-links a {
    color: #50575e;
}

/*** ユーザー ***/
/* ユーザーを追加 */
h1#add-new-user,
body.user-new-php,
body.user-new-php label,
body.user-new-php table.form-table th
{
	color:#fff;
}

/* プロフィール */
body.profile-php h2,
body.profile-php label,
body.profile-php table.form-table th,
body.profile-php p.description,
body.profile-php p.description a,
tr.user-comment-shortcuts-wrap a,
body.profile-php span.description,
#application-passwords-section
{
	color:#fff;
}


body.profile-php p.description a:hover,
tr.user-comment-shortcuts-wrap a:hover
{
	filter: brightness(0.7);
}

/*** ツール ***/
body.tools-php h1
{
	color:#fff;
}

/* インポート */
body.import-php h1,
body.import-php p,
body.import-php p a
{
	color:#fff;
}

body.import-php p a:hover
{
	filter: brightness(0.7);
}

/* エクスポート */
body.export-php h1,
body.export-php h2,
body.export-php p,
body.export-php p a
{
	color:#fff;
}

body.export-php p a:hover
{
	filter: brightness(0.7);
}

/* サイトヘルス */
.notice.notice-error.hide-if-js,
.site-status-has-issues h2,
.site-status-has-issues h3,
.health-check-body.health-check-status-tab.hide-if-no-js,
.site-status-all-clear hide,
.health-check-body.health-check-debug-tab.hide-if-no-js,
.health-check-body.health-check-debug-tab.hide-if-no-js h2,
.health-check-body.health-check-debug-tab.hide-if-no-js p a
{
	color: #fff;
}

.health-check-body.health-check-debug-tab.hide-if-no-js p a:hover
{
	filter: brightness(0.7);
}

.health-check-accordion p
{
	color:#3c434a;
}

/* 個人データのエクスポート */
body.export-personal-data-php,
body.export-personal-data-php h1,
body.export-personal-data-php h2,
body.export-personal-data-php label,
body.export-personal-data-php table.form-table th
{
	color:#fff;
}

/* 個人データの消去 */
body.erase-personal-data-php,
body.erase-personal-data-php h1,
body.erase-personal-data-php h2,
body.erase-personal-data-php label,
body.erase-personal-data-php table.form-table th
{
	color:#fff;
}

/* テーマファイルエディター */
body.theme-editor-php h1,
body.theme-editor-php .fileedit-sub,
body.theme-editor-php .fileedit-sub h2,
#theme-plugin-editor-label,
#theme-files-label
{
	color:#fff;
}

/* プラグインファイルエディター */
body.plugin-editor-php h1,
body.plugin-editor-php .fileedit-sub,
body.plugin-editor-php .fileedit-sub h2,
#theme-plugin-editor-label,
#plugin-files-label
{
	color:#fff;
}

/*** 設定 ***/
/* 一般設定 */
body.options-general-php h1,
body.options-general-php label,
body.options-general-php table.form-table th,
body.options-general-php table.form-table p,
body.options-general-php table.form-table p a
{
	color:#fff;
}

body.options-general-php table.form-table p a:hover
{
	filter: brightness(0.7);
}

/* 投稿設定 */
body.options-writing-php h1,
body.options-writing-php h2,
body.options-writing-php p,
body.options-writing-php label,
body.options-writing-php p a,
body.options-writing-php table.form-table th,
body.options-writing-php table.form-table p,
body.options-writing-php table.form-table h2,
body.options-writing-php table.form-table p a
{
	color:#fff;
}

body.options-writing-php table.form-table p a:hover,
body.options-writing-php p a:hover
{
	filter: brightness(0.7);
}

/* 表示設定 */
body.options-reading-php h1,
body.options-reading-php h2,
body.options-reading-php p,
body.options-reading-php label,
body.options-reading-php p a,
body.options-reading-php table.form-table th,
body.options-reading-php table.form-table p,
body.options-reading-php table.form-table h2,
body.options-reading-php table.form-table p a
{
	color:#fff;
}

body.options-reading-php table.form-table p a:hover,
body.options-reading-php p a:hover
{
	filter: brightness(0.7);
}

/* ディスカッション設定 */
body.options-discussion-php h1,
body.options-discussion-php h2,
body.options-discussion-php p,
body.options-discussion-php label,
body.options-discussion-php p a,
body.options-discussion-php table.form-table th,
body.options-discussion-php table.form-table p,
body.options-discussion-php table.form-table h2,
body.options-discussion-php table.form-table p a
{
	color:#fff;
}

body.options-discussion-php table.form-table p a:hover,
body.options-discussion-php p a:hover
{
	filter: brightness(0.7);
}

/* メディア設定 */
body.options-media-php h1,
body.options-media-php h2,
body.options-media-php p,
body.options-media-php label,
body.options-media-php p a,
body.options-media-php table.form-table th,
body.options-media-php table.form-table p,
body.options-media-php table.form-table h2,
body.options-media-php table.form-table p a
{
	color:#fff;
}

body.options-media-php table.form-table p a:hover,
body.options-media-php p a:hover
{
	filter: brightness(0.7);
}

/* パーマリンク設定 */
body.options-permalink-php h1,
body.options-permalink-php h2,
body.options-permalink-php p,
body.options-permalink-php label,
body.options-permalink-php p a,
body.options-permalink-php table.form-table th,
body.options-permalink-php table.form-table p,
body.options-permalink-php table.form-table h2,
body.options-permalink-php table.form-table p a,
body.options-permalink-php legend
{
	color:#fff;
}

body.options-permalink-php table.form-table p a:hover,
body.options-permalink-php p a:hover
{
	filter: brightness(0.7);
}

/* プライバシー設定 */
.privacy-settings-body h2,
.privacy-settings-body h3,
.privacy-settings-body,
.privacy-settings-body a,
table.form-table.tools-privacy-policy-page label
{
	color: #fff;
}

.privacy-settings-accordion.wp-privacy-policy-guide,
.privacy-text-box-body h2,
.wp-suggested-text,
.wp-suggested-text h2
{
	color:#3c434a;
}

.privacy-text-box-body a {
    color: #2271b1;
}

/*** プラグイン設定画面（pwcn-plugin-page-bodyclassを付与した場合） ***/
/* 設定に誤りがあるといけないので、背景色や背景画像をオフにする */
body.pwcn-plugin-page-bodyclass #wpcontent {
	background-image: unset;
	/*background:unset;*/
}

なお不足しているところがあるかも知れませんのでご自身で確認して完成させてくださいね。

コードの補足

このページにたどり着いた方は、自身で管理画面側のスタイル指定をしていてどんどんコードが増殖して断念しそうになった方、または私のように一度断念したけど再度挑戦してみようと思った方かと思いますので、コードの流れなどについて補足をしておきます。

  • 思わぬところに効いてしまったりするためbodyに直接スタイルを付与しないこと
  • WordPressのメニューの上から順番に開いてはスタイルを追加するようにしていくこと
  • 各ページ共通のもの（上部の検索やナビ、ページ番号の部分など）は1つにまとめること
  • CSSクラスの名前にその画面特有と思われる文字列がなければ、必ずその画面特有のbodyクラスを付与して限定すること

私も当初闇雲にスタイルを書いていった挙句に「ここには適用されていない」「ここには適用しないはずなのに何で？」というのがたくさん出てきてすごい数の上書きを繰り返すような体系になり一旦挫折した後、落ち着いて1つ1つの画面に対して確認していった末にできたのが上記のコードです。

基本的にこれをコピペして、背景画像のURL、または色（コード中ではコメントアウトしてます）を指定すれば、以下のページを除く管理画面のページは文字が白になり、マウスオーバーすると若干暗めの色になるようになります。

  • 投稿や固定ページの編集画面
  • サイトエディター
  • プラグインの設定画面

なぜこれらのページを除外したかというと、編集画面は内容をイメージしづらくなる可能性があり、プラグインの設定画面はそもそも内容の自由度が高いため完全にすべてのプラグインで同じように表示させるのが困難だからです。

それでもチャレンジしたい！と言う方は、ご自身で工夫してみてください。恐らくやっているうちにどんどんコードが増殖し、ある日プラグインを追加した時に「ここもダメか．．」となり途方に暮れるはずです（笑）。

とここまで力説してきましたが、WordPressではブロックテーマの提供開始とそれに伴ってサイトエディターというテーマ作成画面が登場し、今後は管理画面のGUIをもっとスタイリッシュにしたいという流れがあるようです。

そうなると本ページのようにスタイルコードをガリガリ書かなくてもよくなるようになるかも知れませんが、多分遠い未来なような気もしますから、しばらくはこの手法で大丈夫でしょう。

, , , , , , , , , ,
Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
管理画面に「画面上部へ戻る」ボタンを追加する方法
ひまあーと（管理人）

ひまあーと（管理人）

WordPressと出会ったのはTwenty Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。 本サイトでは主にTwenty Twenty-TwoをはじめとするWordPress標準のブロックテーマのカスタマイズ方法、多彩な機能を詰め込んだ【Hima Art Utility】プラグインの紹介などをしています。 WordPressへの感謝、プラグイン作者への感謝を込めて、ささやかながら日本語翻訳に参加させていただいています（参加プロダクトはこちら）

Personal WP Customization Notes (PWCN)
WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなど