WordPressの管理画面をCSSでカスタムする方法

WordPressの管理画面をCSSでカスタムする方法

Dark ModeというWordPressのプラグインで、ダッシュボードや、エディターを暗くして、夜でも作業しやすいようにしたのだが、プラグインが不十分でスタイルが行き届いておらず(新しいビジュアルエディターにまだ対応していないのか)暗い背景に文字も暗くて、全然見えなくなってしまった。

そこで、管理画面のCSSに不十分なスタイルを追記してやろうという想いから、プラグインを作ってしまった訳です。

function.phpに追記する方法

まずは簡単な方法から function.phpに以下のコードを追記すると、スタイルが管理画面に追加されます。

<style>と</style>の間にCSSのコードを入れてあげれば良い訳ですね。
すると、管理画面のbody にLucidaというフォントが12pxで追加されます。

function my_custom_fonts() {
  echo '<style>
    body {
      font-family: "Lucida Grande";
      font-size: 12px;
    } 
  </style>';
}

しかし、これではブラウザのデベロッパーツールを使ってスタイル編集しづらいので、

自作のプラグインで管理画面にCSSを追加する方法

プラグインを作るのって意外と簡単でした。

  1. デスクトップにでも新しくフォルダを作り、プラグインの名前で保存します。(例えば、customize-admin-color)
  2. テキストエディタに以下のコードを貼り付けて、//の手前部分を任意のURLやプラグインの名前など書き換えて、任意のファイル名で保存し、1で作ったフォルダの中に保存します。(例えば、customize-admin-color.php)
  3. テキストエディタを空白のまま、wp-admin.css というファイル名で、1で作ったフォルダに保存します。(コードの中の「ファイル名URL手前のURL部分を書き換えれば、任意のファイル名にできます)
  4. 1のフォルダをzipで圧縮します。
  5. WP管理画面から > プラグイン > 新規追加 > ZIP圧縮されたファイルを選びインストール > 有効化。これで、3で作ったwp-admin.cssが管理画面のヘッダーに読み込まれます。
  6. ブラウザのデベロッパーツールで、CSSを編集 > FTPでアップロード。もしくは、管理画面 > プラグイン > プラグインエディター > プラグインの名前 > wp-admin.css

<?php

/*
Plugin Name: My Admin CSS //プラグインの名前
Plugin URI: http://yourdomain…/ //あなたのURL
Description: Custom Admin styles. //プラグインの説明
Author: Any nameVersion: 1.0 //製作者の名前
Author URI: http://example.com //製作者のURL
*/

function my_admin_theme_style() {
    wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__)); // ファイル名URL
}
add_action('admin_enqueue_scripts', 'my_admin_theme_style');
add_action('login_enqueue_scripts', 'my_admin_theme_style');

?>

! Before

! After

wp-admin.cssでスタイル調整した管理画面とエディター
Before(上)After(下)

ビジュアルエディターのスタイルを、プラグインDark Modeのサポートとして追加しただけですが、こちらから自作プラグインファイルをダウンロードできます。

参考CSS

WordPress Ver.5.11の管理画面+プラグインDark Modeに対応したCSSです。