WordPressでログイン画面や管理画面のデザインを自由に変更できるプラグイン「Admin Customizer」

公開日:2017年2月10日 デザイン バックエンド(管理)
Knowledge Base メンテナンス
Wordpressでサイト作りをしていて、管理画面やログイン画面が素っ気ないなぁと思ったことありませんか?まあ、スーパーなどのバックヤードと同じで訪問者(お客)に見せるわけではないのでまあいいか・・・と割り切っている方が多いと思います。

でも実際の生活や職場で倉庫が汚なかったり雑然としていたりすると何となくやる気がなくなりますよね?長くWordpressでサイト作りをしていると同じようなことが感じられるときがあります。ちょっと色を変えるだけ、いつも四角い入力まどの角がちょっと丸くなっているだけで何だか創作意欲が湧いて、いつもより筆が乗るなんてこともあります。

管理画面やログイン画面を装飾するプラグインはたくさん配布されています。「admin logon custom color」など「管理」や「ログイン」の「カスタム」「色」などで検索すると実にたくさんありますね。でもこれらのプラグインはログイン画面や管理画面の特定の場所のデザインを変更するものであって、自由に変更できるものでないことが多く、また、管理画面とログイン画面で別々のプラグインとなっていることが多いですから統一感という部分ではちょっと不満が残ります。

できることなら、思うようにカスタマイズしたい!!そんな希望を叶えるために管理画面のデザインをカスタマイズする方法としてたくさん紹介されているのは、今回紹介する【Admin Customizer】ではなく「Add Admin CSS」というプラグインを使う方法。この2つのプラグインがどう違うのかを簡単に説明すると・・・

WordPressでは通常のテーマで制御できない管理画面側のCSSがあります。そしてそのCSSはログイン関係の画面とログイン後の管理画面で別々のCSSファイルを使用しています(実はこの手の管理画面カスタマイズ系のプラグインを探していて初めて知りました)。一見すると今回紹介する【Admin Customizer】と「Add Admin CSS」は同様の動作をするプラグインですが、「Add Admin CSS」でできるのは管理画面の部分のみです。

もちろん「Add Admin CSS」でもファイルを指定することでどちらのCSSも操作できるようですが、コードを記述する窓が1つなので非常に煩雑になってしまうこと、共通するDIV要素やClass要素に対して同じCSSが割り当てられてしまう可能性があります。

【Admin Customizer】は最初からログイン画面にまつわるCSSに対するコードとログイン後の管理画面のCSSに対するコードを入力する窓が別々になっているので管理がしやすいという利点があります。

ここまで読むと、前述した管理画面とログイン画面でなぜプラグインが別々になっていることが多いのかも理解できますね。

・・・と書いて来ましたが、何もこのプラグインでカスタマイズすると有用なのは作者自身のモチベーションのためだけではありません。複数のユーザーがバックエンド(管理画面側)で投稿するようなサイトを作ったときに、フロントエンドと似たようなデザインにすることで違和感なくコンテンツ作りをしてもらえる効果もあります。

前置きが長くなってしまってすみません。ここからAdmin Customizerの特徴や設定方法などを紹介していきます。

【Admin Customizer】プラグインの基本的な機能・できること

  1. ログイン画面にカスタムCSSを追加・追記できる
  2. 管理画面にカスタムCSSを追加・追記できる
  3. 管理画面やログイン画面に使われているロゴや画像を変更できる
  4. 管理画面に標準で表示される様々な項目の表示/非表示が設定できる
  5. 管理画面上にオリジナルのウィジェットを追加できる

1~4を行うことにそれぞれ特化したプラグインがありますが、Admin CustomizerはカスタムCSSの追加・追記だけでなく、ついでの機能も充実したいいとこ取りのプラグインだと思います。

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressで管理画面の投稿や固定ページ一覧へ最終更新日を表示するプラグイン「Show modified Date in admin lists」

WordPressのwp_optionsテーブルの内容を確認・編集、不要なデータを削除できるプラグイン「WP Options Editor」

WordPressでユーザー権限に応じてフロントエンドの管理バーを非表示にするプラグイン「Hide admin bar for different roles」


【Admin Customizer】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Admin Customizer】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Admin Customizer】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

【Admin Customizer】プラグインの基本的な使い方

※日本語化した前提で紹介します。設定はダッシュボードから「設定」→「Admin Customizer」から行います。

おおまかな手順は

  1. 非表示にする項目がデフォルトでオン(非表示)なので必要なものを表示するようにしていく
  2. ログイン画面のデザインをカスタマイズする場合には「カスタム」テーマにしてCSSを追記
  3. 管理画面のデザインをカスタマイズする場合には「カスタム」テーマにしてCSSを追記

という感じになります。順番に説明しますね。

非表示になっている項目の再表示

このプラグインが不特定多数のユーザーがバックエンドにログインするであろう(そのためにデザインを変更したいのだろう)という前提で作られているようなので、有効化すると、デザイン上、管理上表示しない方がいい項目は非表示になるようになっています。

【管理バータブの中の項目】

  1. 管理バー左上のWordpressロゴを非表示にする
  2. 管理バーのコメントの吹き出しを非表示にする
  3. 管理バーの更新メニューを非表示にする
  4. 管理者権限のユーザー以外で管理バーを非表示にする
  5. 「ヘルプ」タブを非表示にする
  6. 管理バーの更新通知を非表示にする
  7. 管理バーのユーザー名をマウスオーバーした際の情報表示をなくし、ログアウトボタンだけにする
  8. ログアウト時に確認画面を表示する

【フッタータブの中の項目】

  1. フッターテキストを非表示にする
  2. フッターのバージョン情報

といった項目が非表示になっていますから、表示したいものはチェックを外して再表示しましょう

ログイン画面のカスタマイズ

【ログイン画面】タブの中で大まかな設定ができます

  1. ログインロゴ(ユーザー名などを入力する窓の上にある「W」マーク)
  2. 背景画像や背景色

その他細かいCSSを追記するには【テーマとCSS】タブの中の「ログイン画面のカスタムCSS」に記述します
※その際「ログイン画面のテーマ」を「カスタム」にしないとカスタマイズした内容が適用されません

管理画面のカスタマイズ

【管理画面】タブの中で設定ができます。表示する文言やマークなどは上の【管理バータブの中の項目】で表示・非表示にしたり代替文字列を設定したりします。

その他細かいCSSを追記するには【テーマとCSS】タブの中の「管理画面のカスタムCSS」に記述します
※その際「管理画面のテーマ」を「カスタム」にしないとカスタマイズした内容が適用されません

設定を元に戻したいときは

いろいろやったけど一旦元に戻したい・・・そんなときもありますよね?でもせっかく設定した内容をすべて戻すのは面倒ですし、何より書き加えたCSSを破棄したらもったいないですから、戻したくなったら以下のようにしましょう。

  1. カスタムCSSだけを記述する前の状態に戻すには「カスタム」にしたテーマを「標準」に戻すだけです
  2. プラグインを停止すればこのプラグインで設定した内容は保存したままデフォルト(標準)の管理画面デザインに戻ります

【Admin Customizer】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

おまけ1 最初に追加すべき管理画面のCSS

これを使って管理画面のCSSを編集していて「ん??」と思うのが、CSSを書く画面の狭さ。特に範囲指定してコピーしようとすると窓の小ささからババーーーっとスクロールされてしまって使いにくさこの上ない感じです。

まずは下のコードを「管理画面のカスタムCSS」へコピペして、ここのスペースを広げてカスタマイズしやすくすることをおすすめします。

textarea.large-text{
height:500px;
}
【注意】コードをコピーして使用する前に必ずお読みください

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

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

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

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

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

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

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

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

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

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

このコードはテキストエリア(large-text)セレクタのある部分がすべて高さ500ピクセルになってしまいます。他の画面でも高さが変わって使いにくいという場合はIDを調べて記述すると解決します。

おまけ2 どこにどんなCSSが適用されているかを簡単に調べる方法

デザインは変更したいけどどうやったらいいのかさっぱり分からない!!という方向けのおまけ情報です。Google Chromeを使ってカスタマイズする方法を紹介します(他のブラウザでも似た感じでできます)。

  1. タブを2つ開き、それぞれログインした画面を表示します
  2. 1つは「Add Admin CSS」の設定画面を開いておきます(画面①とします)
  3. もう1つはキーボードの「F12」を押して、右側のコード画面上部にある「Elements」をクリックします(画面②とします)
  4. 画面②の左画面の変更したい場所で右クリックして「検証」をクリックします
  5. 画面②の右下画面に該当するCSSのセレクタと内容が表示されます(.〇〇 {×××}と記述された部分)
  6. これをコピーして①の「管理画面のカスタムCSS」へコピペして変更や追記をします
  7. ①を保存したら②を再読み込みします

この手順を繰り返すことで簡単にデザイン変更ができます。
※ちゃんとやってるはずなのにデザインが変わらないときは、②の画面でリロード(再読み込み)ボタンを右クリックして「キャッシュを消去してハード再読み込み」をクリックしてしばらく待つと、一時保存されていたデザインがクリアされて変更された画面が表示されます

※「.〇〇 {×××}」はclassセレクタと呼ばれていて、このセレクタが使われている全部の部分にデザインが適用されます。セレクタにはもう1つDIVなどの要素に対するセレクタがありIDセレクタと呼ばれ「#〇〇」と表現されます。特定画面の特定Classにのみ変更を加えたい場合は②の画面右上のソース上で「div id=”△△”」というのを見つけてください。

このdiv IDとClassを組み合わせて「#△△ .〇〇」とすることで、「この場所のこの部分」という指定ができ、より細かくデザインを設定することができます。

おまけ3 ログイン画面のデザイン変更を便利にやるには

気づきそうで気づかない・・・そんなテクニックです。普通ログイン画面のデザイン変更を行うには

  1. デザインを記述する(編集する)→保存する
  2. 一度ログアウトして実際の画面を確認する
  3. 再度ログインしてデザインを編集する→保存する
  4. ・・・・・

という作業を延々と繰り返さなければなりませんよね?でも、この方法を使えばログアウトなしで編集が可能になります。その方法とは・・・ズバリ「複数のウェブブラウザを使う」ことなのです。

例えばChromeで編集しているならIEやEdgeなどの標準ブラウザでログイン画面を開いて確認するといった感じです。こうすると編集するChrome側はログインしたままで作業でき、もう一つのブラウザはログインしない(ログイン画面)状態でリロードすれば設定が反映されるという風になるのですぐに確認ができます。

ログイン画面についてはそれほどブラウザによって表現の変わってしまうような動作はありませんから、どのブラウザで確認してもほぼ同じデザインになるわけですからこの方法が一番です。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

1,738 円 (税込) 送料込
人気講師が教える本格Webサイトの作り方 石川栄和 大串肇 インプレスイチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月:2019年08月 予約締切日:2019年06月26日 ページ数:280p サイズ:単行本 ISBN:9784295006664 石川栄和(イ..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

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


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

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

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


【スポンサーリンク】


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

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

関連情報