管理画面をカスタマイズする

January

2010

管理画面をカスタマイズする

管理画面の投稿・ページパネルは［表示オプション］でメタボックスの表示／非表示や列数のレイアウトが変更できます。さらにメタボックスはドラッグ＆ドロップで配置を変更でき、これらの変更はユーザごとに保存されます。
クライアント様にお使いいただく際は、あらかじめクライアント様アカウントでログインして、レイアウトを逐一手作業で変更しておけば良いですね。良くないです。そんなんいちいちやってられません。ということで、あらかじめ決め打ちなレイアウトにしてしまいましょう。ついでに、本文・抜粋欄を入力しやすく縦に長ーくしたり、WordPress のロゴもお好みに変更したり（ごめんね Matt と謝りつつ）、と夢は膨らみます。

わりと CSS で済む話なので、テーマフォルダ直下に admin-panel.css （名前はお好みで）を用意して functions.php に以下を追加します。

function my_head() {
  echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_url') . '/admin-panel.css" />';
}
add_action('admin_head', 'my_head', 11);

admin_head アクションは、管理画面の<head>内で呼ばれます。

追記：
<head>内でスタイルを指定するなら admin_print_styles アクションの方が適してますね。このアクションでは管理画面のスタイルを出力する print_admin_styles が優先順位 20 で呼ばれるので、スタイルを上書きさせるために add_action('admin_print_styles', 'my_head', 21) のように 20 以降の優先順位を指定します。

CSS ファイルを用意するまでもないなら、以下のように直接書いても OK。でもやっぱりファイルにしといた方が、パフォーマンス的にもアレ的にも良いらしいぜ。

function my_head() {
  echo '<style type="text/css">
  /* ここでスタイルを指定 */
  #content{height:500px;} // とか
  </style>';
}
add_action('admin_head', 'my_head', 11);

本文・抜粋欄を縦に長くする

本文欄は#editorcontainer #content、抜粋は #excerpt の ID で height をお好みに指定すれば縦方向のサイズを変更できます。本文欄を #content だけで指定すると、クイック投稿の［内容］にも効いてしまうので注意。

#excerpt{height:300px;}
#editorcontainer #content{height:500px;}

ヘッダとフッタの表示を変更する

まずはヘッダから。

#header-logo{display:none;} /* WordPress のロゴマーク「W」を消す */

#header-logo{ /* ロゴマークを変更 */
background:url(images/my-logo.png) left center no-repeat; /* テーマフォルダ/images 直下に画像を保存しておく */
width:100px; /* 画像の幅も指定しましょう */
height:50px; /* 高さが 32px じゃないならそれも指定 */
}

#wphead{
background-color:#5aa0dc; /* ヘッダの背景色 */
height:100px; /* ヘッダの高さ */
}

#user_info{color:#333;} /* こんにちは、◯◯さん！の文字色 */

#user_info .turbo-nag{display:none !important;} /* ［ターボ］リンクを消す */

続いてフッタのカスタマイズ。

#footer-left{display:none;} /* 「WordPress のご利用ありがとうございます。 | ドキュメント | バグ報告と提案」を消す*/

#footer-upgrade{display:none;} /* バージョン表示を消す */

#footer{
background-color:#5aa0dc; /* フッタの背景色 */
height:100px; /* フッタの高さ */
}

フッタをまるっとオリジナルに変更するなら #footer{display:none;} としておいて、function.php に以下のようなアクションを追加します。

function my_footer() {
 echo '<div id="my_footer">
<a href="' . get_bloginfo('url') . '">' . get_bloginfo('name') . '</a> - '
  . get_bloginfo('version') 
  . '</div>';
}
add_action('admin_footer', 'my_footer');

ロゴ画像を追加したり、スタイルをお好みで指定してお楽しみください。

不要なメタボックスを消して1列レイアウトにする

メタボックスを消す（＝非表示にする）には［表示オプション｜表示する項目］でチェックを外すのと同じことをフィルタで実現します。まずは投稿パネルから。

function my_metaboxhidden_post($result, $option, $user){
  return array('postexcerpt', 'categorydiv', 'postcustom', 'trackbacksdiv', 'commentstatusdiv', 'commentsdiv',
    'slugdiv', 'authordiv', 'revisionsdiv', 'tagsdiv-post_tag');
}
add_filter('get_user_option_metaboxhidden_post', 'my_metaboxhidden_post', 10, 3);
add_filter('get_user_option_managepostcolumnshidden', 'my_metaboxhidden_post', 10, 3);

全部消すとスッキリして気持ち良いですね。'submitdiv' も指定できますが「公開」メタボックスが無いと困るのでやめておきましょう。メタボックスを表示させるには array からそれらしき値を削除すれば良いです。

ページパネルでも同様にメタボックスを消すことができます。

function my_metaboxhidden_page($result, $option, $user){
  return array('pageparentdiv', 'postcustom', 'commentstatusdiv', 'slugdiv', 'revisionsdiv');
}
add_filter('get_user_option_metaboxhidden_page', 'my_metaboxhidden_page', 10, 3);
add_filter('get_user_option_managepagecolumnshidden', 'my_metaboxhidden_page', 10, 3);

画面を広く使うために［スクリーンレイアウト｜列の数］を「1」にしてみましょう。

function my_screen_layout_post($result, $option, $user){
  return 1;
}
add_filter('get_user_option_screen_layout_post', 'my_screen_layout_post', 10, 3);

ページも同様に

function my_screen_layout_page($result, $option, $user){
  return 1;
}
add_filter('get_user_option_screen_layout_page', 'my_screen_layout_page', 10, 3);

で OK です。

ちっとも OK じゃないです。「公開」メタボックスが消えてしまいました。ドラッグ＆ドロップで移動させておかないといけないようです。例によってクライアント様にそんなことはお願いできませんし、自分でやるのはメンドクサイので javascript（jQuery）に任せます。

メタボックスを任意に配置する

本文欄 — カテゴリメタボックス — 公開メタボックスの順に並び替えます。

function my_footer() {
echo '<script type="text/javascript">
  //<![CDATA[
  jQuery(function(){
    jQuery("#normal-sortables").prepend(jQuery("#side-sortables").children("#categorydiv"));
    jQuery("#normal-sortables").append(jQuery("#side-sortables").children("#submitdiv"));
    jQuery("#categorydiv").prependTo(jQuery("#normal-sortables"));
    jQuery("#submitdiv").appendTo(jQuery("#normal-sortables"));
  });
  //]]>
  </script>';
}
add_action('admin_footer', 'my_footer');

クライアント様がうっかりメタボックスをドラッグ＆ドロップで移動させても、当該パネルを次回開いた時には強制的に戻されますので安心です。
最後の仕上げに［表示オプション］を消してしまいましょう。CSS で実現するので、前述の admin_head アクションを使います。

function my_admin_head(){
  echo '<style type="text/css">#screen-options-link-wrap{display:none;}</style>';
}
add_action('admin_head', 'my_admin_head');

これで問い合わせが減って皆さんも幸せになれますね。

参照：

フォーラム：記事投稿画面のレイアウト

動作確認バージョン

WordPress 2.9.1

7 Comments

lotus_tribal

2011.9.9 4:47 pm

@marimelody11 きゃーありがとうございます！ここですかね？試してみますねー！！！
xxmiz0rexx

2011.9.9 4:47 pm

@marimelody11 きゃーありがとうございます！ここですかね？試してみますねー！！！ / 管理画面をカスタマイズする | wpxtreme http://t.co/GbzRBcF
fumikito

2011.9.29 11:00 pm

管理画面のカスタマイズ
anksfeed

2011.11.30 9:57 am

[from goto] 管理画面をカスタマイズする | wpxtreme: http://t.co/1WR6lQbk
datoka

2014.3.15 1:56 pm

PHPやCSSを駆使して配置を決め打ちする方法。

管理画面をカスタマイズする | wpxtreme｜XTREME WORDPRESS STUNTS