管理メニューのデザインを変更する

前から気になっていたのは、
管理メニューの枠、エディタやウィジットの枠線が
非常に見にくい事。(#DFDFDFのボーダー色部分)
…という訳で改編してみることにしました。

…変更するのは結構簡単。

以前、wordpress3.2の記事にて、
かちびと.netさんのブログで紹介されている
スタイルを変更するっていうのと同じ方法です。

解説するとfunction.phpにアクションフックを記述し、
その中でスタイル定義を埋め込むという方法です。

尚、かちびとさんの記事ではアクションフックに
「admin_head」を使用していましたが、
今回は「admin_print_styles」に変更しました。
理由はadmin_print_stylesの方が
優先順位がデフォルト20なので上書きしやすいためです。
(admin_headはデフォルト10)
CSSを上書きさせる意味合いでも後から呼ばせた方が良いです。
さらに厳密にしたいので今回は+1して21としました。

以下がソース。

add_action('admin_print_styles', 'custom_admin_style', 21);
function custom_admin_style() {
	echo '
	<style>
		ul#adminmenu div.wp-submenu li{
			padding: 3px !important;
		}

		textarea,
		input[type="text"],
		input[type="password"],
		input[type="file"],
		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		select {
			border-color: #B2B2B2;
		}

		.widget,
		#widget-list
		.widget-top,
		.postbox,
		#titlediv,
		#poststuff
		.postarea,
		.stuffbox {
			border-color: #B2B2B2;
		}
	</style>
	';
}

本当は別途ファイルを読み込ませた方が
パフォーマンス的にも良いと思います。
(今回は手抜きで直に記述しましたがw)

もし、CSSを別ファイル用意させる場合は

add_action('admin_print_styles', 'custom_admin_style', 21);
function custom_admin_style() {
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_url').'/ファイル名.css" />';
}

※「ファイル名」は任意な名称に変更して下さい。

として、使用しているテンプレート内にCSSファイルを置けば良いと思います。
実際に変更する要素はFirebugなどで見極めると良いと思います。
(今回は割愛します。)

カテゴリー: wordpress | タグ: , | コメントをどうぞ
.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>