[Wordpress] Customization method to change the color of the management screen without plug-in

【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法

公開日:2019年10月5日
Knowledge Base 画像

私は数個のWordpressサイトを管理しています。先日複数のサイトの管理画面を開き、記事を書いていたらびっくり!!目的とは違うサイトで記事を書き続けていたんです。

まあ、下書き保存中に判明したので事なきを得たのですが(大げさですね・・)、管理画面が共通というのはこうした場合に間違い易いのでできればサイトごとに変えたい!!でもプラグインを使うのはちょっと・・という方のためのカスタマイズ方法を紹介します。

なお、ユーザーごとに管理画面の色をそれなりに変えるということでしたらユーザーから変更するユーザーをクリックして「管理画面の配色」で変更可能ですので、それで事足りる方はそちらの方が簡単です。

この方法での注意点

最初にこのカスタマイズの注意点について書かせていただきます。この記事ではある程度不都合が生じないようにするためのCSSサンプル(デザイン要素のコード)を紹介し、コピペで適用できるようにはしていますが、すべての管理画面で不都合なく表示されるとは限りません。

例えばプラグインの設定などで基本背景にそのまま文字などを表示するような管理画面の作りの場合、濃い色の背景を指定すると文字が見えないなどの不都合が出ます。これを解消するためには個々の画面や部分に対してデザインの変更をしていくことが必要となりますので、デベロッパーツールなどを使ったCSSの確認や編集の知識がないという方にはおすすめしません。

【advanced excerpt】プラグインを日本語で使用するための翻訳ファイルダウンロードページ

【Theme My Login】プラグインを日本語で使用するための翻訳ファイルダウンロードページ

【Expire Users】プラグインを日本語で使用するための翻訳ファイルダウンロードページ


この方法で表示した参考例

もちろんこの方法を用いて当サイトも管理画面をカスタマイズしています。以下がログイン画面や管理画面のサンプル画像になります(表示画面の配色と同じにしています)
【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法
【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法
【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法

ちなみに管理している別のサイトはこんな感じです
【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法
【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法
【WordPress】プラグインなしで管理画面の色を変更するカスタマイズ方法

ね!これなら間違えることはほぼなくなりますし、なんだかオリジナルでやる気も出てきますよね??(私だけ?)

それでは進めていきましょう!!

WordPressの管理画面側にデザインを適用する準備

WordPressのログイン画面や管理画面に対するデザイン要素は、通常のテーマのCSSなどへいくら追記しても適用されません。全く別物だからです。従って管理画面側のデザインを変更するには準備が必要になります。

1.管理画面のデザイン要素を記述するファイルを作る

まずはパソコン上でテキストエディタを開き、空のままファイル名を「style-admin」、拡張子を「css」、文字コードを「UFT-8 BOMなし」で保存します。

文字コード?という方は

をご覧になってみてください。

ファイルを作成したらFTPクライアントツールやサーバーのファイルマネージャーを使って「style-admin.css」をテーマフォルダ内へアップロードしてください(子テーマを使っている場合には親テーマのフォルダ内へアップロードしてください)
※子テーマへアップロードしても使える方法は今回は割愛します。

ファイルのアップロードが終わったら、管理画面から外観テーマエディタを開いてファイルが存在しているかを確認ください(子テーマの場合は画面右上のテーマ選択から親テーマに切り替えてください)

2.1のファイルをテーマ内に読み込む

次に1でアップロードしたファイルがテーマの中で読み込まれる(プログラムとして認識される)ようにします。

以下のコードを(親)テーマのfunctions.php末尾へ追記します

/******* 管理画面のCSS(admin-styles.css)を読み込む *******/
function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/style-admin.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/style-admin.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

簡単に何をしているかを解説させていただくと

  • 上半分は管理画面のスタイルに「style-admin.css」を適用させてちょ
  • 下半分はログイン画面のスタイルに「style-admin.css」を適用させてちょ

という風にしています。

デザイン要素例

試しに以下のコードを「style-admin.css」へ追記してみてください

/********** 管理画面のデザイン **********/
/** 管理バー **/
div#wpadminbar {
    background: #07093d;
}
/** サイドメニュー **/
ul#adminmenu {
    background: #07093d;
}
/*** ダッシュボード ***/
body.index-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
/*** 投稿・固定ページ一覧 ***/
body.edit-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.edit-php .subsubsub{
    background-color: #fff;
}
body.edit-php .tablenav-pages{
	color:#fff;
}
/*** 投稿・固定ページ編集 ***/
body.post-new-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.post-new-php .subsubsub{
    background-color: #fff;
}
body.post-new-php .inside {
    background-color: #fff;
}
body.post-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.post-php .subsubsub{
    background-color: #fff;
}
body.post-php .inside {
    background-color: #fff;
}
/*** テーマエディタ ***/
body.theme-editor-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.theme-editor-php .subsubsub{
    background-color: #fff;
}
body.theme-editor-php label {
    color: #fff;
}
body.theme-editor-php h2 {
    color: #fff;
}
/*** プラグインエディタ ***/
body.plugin-editor-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.plugin-editor-php .subsubsub{
    background-color: #fff;
}
body.plugin-editor-php label {
    color: #fff;
}
body.plugin-editor-php h2 {
    color: #fff;
}
/*** メディアライブラリ ***/
body.upload-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.upload-php .subsubsub{
    background-color: #fff;
}
body.upload-php .tablenav-pages{
	color:#fff;
}
/*** メディア追加 ***/
body.media-new-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.media-new-php .subsubsub{
    background-color: #fff;
}
body.media-new-php label {
    color: #fff;
}
body.media-new-php p {
    color: #fff;
}
body.media-new-php a {
    color: #fff;
}
/*** プラグイン一覧 ***/
body.plugins-php #wpcontent {
    background: linear-gradient(#107fc9,#07093d);
}
body.plugins-php .subsubsub{
    background-color: #fff;
}
body.plugins-php .tablenav-pages{
	color:#fff;
}
/** ログイン画面のデザイン **/
body.login.login-action-login.wp-core-ui.locale-ja {
    background: linear-gradient(#107fc9,#07093d);
}
.login #backtoblog a, .login #nav a {
    color: #fff;
}
※バックエンド用のCSSなので、コードをまとめず場所ごとに記述しています

どの部分に対するCSSなのかについてはコード内のコメントを参照ください。

先程の表示例の上(ブルー)になりましたよね?もしも変わらない場合には一度キャッシュをクリアしてみてください

キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR
それでもダメな場合にはここまでの設定を再確認してください。

これで自由に管理画面側、ログイン画面のデザインが変更できるようになりました。ちなみに表示例下のように画像をWマークの代わりに表示させたい時は

  • 320×150のサイズの画像を用意する
  • 以下のコードを「style-admin.css」へ追記する(画像のURLは指定してください)
  • .login h1 a {
        background-image: url(画像のURL);
        background-image: none,url(画像のURL);
        background-size: 320px;
        background-position: center top;
        background-repeat: no-repeat;
        color: #444;
        height: 150px;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.3em;
        margin: 0 auto 25px;
        padding: 0;
        text-decoration: none;
        width: 320px;
        text-indent: -9999px;
        outline: 0;
        overflow: hidden;
        display: block;
    }

で表示させることができます。サイズを変えたい時は・・・やはりCSSの要素を変更する必要があります・・・。

子テーマで適用するときは(未検証)

先程割愛すると書きましたが、一応子テーマで適用する方法を紹介しておきます。が、未検証ですのでうまくいかないかも知れません。

ポイントは2つ

  • 1.「admin-style.css」を子テーマのテーマフォルダへアップロードすること
  • 2.functions.phpへ追記するコードの修正を行うこと

です。1についてはアップロード先を変えるだけですので問題ないかと思います。

2についてですが、親テーマであれば

get_template_directory_uri()
で親テーマフォルダの中のという指定ができるのですが、子テーマだと必要なテンプレート類が存在しないため、場所の特定ができません。これを解消するために
get_stylesheet_directory_uri()
へ置き換えて、スタイルシートのある場所(子テーマにはなからずあるファイル)を指定します。

つまり上のコード上の

get_template_directory_uri()
の部分を
get_stylesheet_directory_uri()
へ書き換えたものを、子テーマのfunctions.php末尾へ追記すれば動作するようになります。
※これは一般例ですので未検証ですから、動作しない場合には素直に親テーマで適用させましょう。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報