WordPress:ダッシュボードのデザインを変更できるプラグイン7選+α

  • Posted on
  • Category : WordPress
WordPress:ダッシュボードのデザインを変更できるプラグイン7選+α

WordPressのダッシュボード(管理画面)のデザインを手軽に変更できるプラグインを備忘録兼ねて紹介します。単純に色合いを変えるものもあれば、アイコンなども含めてガラッと変わるもの、有名サイトのデザイン風のものなどいろいろあります。

はじめに…

それぞれ使用した時の違いをわかりやすくするために、今回は以下の条件で各プラグインを試しました。
また、WordPressのバージョンは現在最新である3.6を使用しています。

デフォルトのダッシュボード

デフォルトのダッシュボード

※画像クリックで、縮小前のものが別窓で開きます。

プラグインの中には色合いだけでなく、各メニューのアイコンなどについても変更されるものがあります。
今回は数多くのプラグインの中でも人気のある以下の2つのプラグインを予めダウンロード・有効化してあります。

WordPress:ダッシュボードのデザインを変更できるプラグイン7選+α 目次

  1. MP6
  2. Coffee Admin Theme
  3. Bootstrap Admin
  4. Cawaii Admin
  5. Blue Admin
  6. Ozh’ Admin Drop Down Menu
  7. Easy Admin Color Schemes
  8. 自分でカスタマイズをする

MP6

MP6

※画像クリックで、縮小前のものが別窓で開きます。

少し前にWordPress.comのダッシュボードデザインが大幅リニューアルされたのですが、それをインストール型でも使用できるようにしたのがこのプラグインです。
見ての通りよりシンプルなデザインになっており、大きな特徴としてはWebフォントの導入(日本語版は適用されていないようです)や様々なデバイスに対応できるようにレスポンシブになっていたりします。

MP6

メニューに使用されている各アイコンも変更されており、「Contact Form 7」はそのままですが、「All in One SEO Pack」のアイコンはデザインに合わせて変更されています。

使い方は簡単で、プラグインを有効化するだけでデザインが変更されます。
プラグインの詳細・ダウンロードは以下より。

目次へ

Coffee Admin Theme

Coffee Admin Theme

※画像クリックで、縮小前のものが別窓で開きます。

Last Updatedが1年前で3.6に対応していないためか、若干崩れなど気になる部分もありますが、CSSを少し調整すればすぐに直すことができます。
デザインは全4種類用意されており、「Coffee Green」「Coffee Red」「Coffee White」「Simple Piano」の中から選択できます。(キャプチャは「Coffee Green」を使用しているところです)
また、テーマだけでなくGoogle Web Fontsを使ったフォント変更もすることができ、「Open Sans」や「Cabin Condensed」などが予め用意されています。

使い方はプラグインを有効化後、「設定 → Coffee Theme Options」で「Activate the theme」にチェックを入れ、あとはテーマとフォントそれぞれ任意のものを選択して変更を保存すればデザインが変更されます。
プラグインの詳細・ダウンロードは以下より。

目次へ

Bootstrap Admin

Bootstrap Admin

※画像クリックで、縮小前のものが別窓で開きます。

プラグイン名からもわかるように、ダッシュボードをBootstrap風デザインにすることができるプラグインで、分かりやすい部分だとアイコンやボタンがBootstrapタイプのものに変更されてたりします。

使い方は簡単で、プラグインを有効化するだけでデザインが変更されます。
プラグインの詳細・ダウンロードは以下より。

目次へ

Cawaii Admin

Cawaii Admin

※画像クリックで、縮小前のものが別窓で開きます。

管理画面を可愛くしてくれるプラグインで、背景画像や文字色などのデザイン設定だけでなく、ロゴの変更、メニュー表示の変更、メタボックス表示の変更なども行うことができます。
キャプチャでは背景画像に薄いブラウン、文字色は暖色、ロゴはわぷーのロゴに、メニュー表示はサイドバーなしで最低限のメニューのみをヘッダーに表示するように設定したところです。

Cawaii Admin 設定画面

使い方はプラグインを有効化後、「設定 → Cawaii Admin」で各オプションを任意で選択して設定を保存すればデザインが変更されます。
より詳細な情報やサンプル画像はプラグイン作者様のブログで確認することができます。
プラグインの詳細・ダウンロードは以下より。

目次へ

Blue Admin

Blue Admin

※画像クリックで、縮小前のものが別窓で開きます。

ダッシュボードをFacebook風デザインにすることができるプラグインで、アイコンやボタンもFacebookっぽい感じになります。
使い方は簡単で、プラグインを有効化するだけでデザインが変更されます。
プラグインの詳細・ダウンロードは以下より。

目次へ

Ozh’ Admin Drop Down Menu

Ozh' Admin Drop Down Menu

※画像クリックで、縮小前のものが別窓で開きます。

デザインを変更するとはずれてる気もしますが…。
通常管理画面のメニューは左表示ですが、それをヘッダー表示に変更できるプラグインです。
一部アイコンが表示されていなかったりする部分もあるんですが、CSSで少し調整すればすぐに直すことができると思います。

使い方はプラグインを有効化するだけでとりあえず実装されますが、「設定 → Admin Menu」で幾つかオプションなどを設定することができ、アイコンの有無、カラー、更に簡素化させるMinimal Modeの選択などができます。
プラグインの詳細・ダウンロードは以下より。

目次へ

Easy Admin Color Schemes

Easy Admin Color Schemes

※画像クリックで、縮小前のものが別窓で開きます。

デザインを変更するというより、全体的な色合いを簡単に変更できるプラグインです。
ダッシュボードをそこまで思い切りデザイン変更やカスタマイズしたりしないで良いけど、色味だけでも表の画面と合わせたいみたいな時にさくっと変更できて便利かと思います。
デフォルトだと「ブルー」と「グレー」の2色が用意されていますが、このプラグインを有効化すると「Red」「Purple」「Orange」「Green」「Brown」の5色が管理画面の配色として新たに追加されます。(キャプチャは「Brown」を使用しているところです)

Easy Admin Color Schemes 設定画面

先述したようにプラグインでは5種類のスキームが追加されますが、プラグインを有効化した際に左メニューに追加される「Admin Color Schemes」から、各配色の調整をしたり新たにスキームを追加することができます。
上の画像は「Brown」を調整する際の画面をキャプチャしたもので、このように下のPreviewで確認しながらCSSで任意の色を各パーツに指定することができます。
各スキームにはタイトルや説明文などを設定できるようになっているので、しっかり入力しておけば複数のスキームを作った場合でも後で確認しやすいようにしておくことができます。

使い方も簡単で、プラグインを有効化して「Admin Color Schemes → Settings」又は「ユーザー」の各ページでカラースキームを指定するだけです。
プラグインの詳細・ダウンロードは以下より。

目次へ

自分でカスタマイズをする

上記のように簡単にダッシュボードのデザインを変更できるプラグインは幾つかありますが、中には自分が思い通りのデザインがない、もっとカスタマイズをしたいという人ももちろんいるかと思います。
そういう場合はfunctions.phpを使うことで、かなりカスタマイズをすることができます。

例えば以下をfunctions.phpに記述することで、CSSはadmin.cssが読み込まれ、JavaScriptはadmin.jsが読み込まれるようになります。
ファイル名やパスは、自身の環境に合わせて変更してください。

functions.php

// CSS
function admin_css() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo("template_directory").'/css/admin.css">';
}
add_action('admin_head', 'admin_css');

// JavaScript
function admin_js() {
	echo '<script type="text/javascript" src="'.get_bloginfo("template_directory").'/js/admin.js"></script>';
}
add_action('admin_head', 'admin_js');

上記を記述後、あとはそれぞれのファイルでいじっていけば自分好みに管理画面にカスタマイズできます。
ちなみに、カスタマイズをする際に各要素に設定されているクラスやID名などを調べたりしたい時は、ChromeのデベロッパーツールやFirefoxアドオンのFirebugなどが非常に便利です。

ただ、ほとんど確認せずに一気にカスタマイズしたり、特にJSは今まで動いていたものが全く動かなくなるなどの予期せぬ動作になってしまう可能性も十分にあると思うので、カスタマイズをしようとしている場合は少し面倒でも定期的にバックアップを取っておくなどしながら進めることをお勧めします。

この他にも管理画面のカスタマイズは沢山あり、以前個人的に使う頻度が高いと感じたものを分けてまとめているので、興味がある人は以下を参考にしてみてください。
管理画面周りのTipsを全30種類まとめています。

またWordPress限定ではありませんが、以下は参考になりそうな管理画面デザインのショーケースです。
上記で紹介した任意のCSSやJSを読み込ませるのを使用すればこういったデザインも可能なので、思い切りUIやデザインを変えたい場合はこちらも合わせて参考にしてみてください。

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。