投稿画面でカテゴリーが増えると管理画面でのリスト表示が長くなってしまう。特にサブカテゴリーが展開されているとかなり使いづらい。そこでアコーディオンを使い、普段は折りたたみ、必要な時にクリックで展開するようにしてみた。
WordPress3.0で動作確認。
●まずはアクションフック設定
テーマディレクトリの「functions.php」にでも以下のコードを追加。
管理画面へアクセス時に「http://XXXXX.com/hogehoge/js/custom-admin-page.js」を読み込ませる。
[codesyntax lang=”php” title=”functions.php”]
add_action('admin_head', 'add_header1');
function add_header1() {
echo '<script type="text/javascript" src="http://XXXXX.com/hogehoge/js/custom-admin-page.js"></script>';
}
[/codesyntax]
●カテゴリーの折りたたみと展開
[codesyntax lang=”javascript” title=”custom-admin-page.js”]
var $j = jQuery.noConflict();
$j(function(){
////カテゴリーリスト折たたみ
$j("ul ul:has(label.selectit)").hide();
$j("ul ul ul:has(label.selectit)").hide();
//チェックがあれば展開
var cb = $j("input:checkbox[@name^='checkbox_name']");
$j.each(cb,function() {
if($j(this).attr('checked')==true){
$j(this).parent().next().slideDown('slow');
}
});
////マウスオーバー時の処理
$j("label.selectit").hover(function(){
$j(this).css("cursor","pointer");
$j(this).css("color","#cc0000");
},function(){
$j(this).css("cursor","default");
$j(this).css("color","#333");
});
////クリックでカテゴリーリスト展開・入力フォーム表示
$j('label.selectit').hover(function(){
$j('label.selectit').click(function(){
//カテゴリーリスト展開
if($j(this).next().size()!=0){ //次の要素がある場合
$j(this).next().slideDown('slow');
}
});
},function(){
//チェックがなければカテゴリーリスト折たたみ
if($j(this).next("ul:has(input:checked)").size() == 0 && $j("input:checked",this).size() == 0){
$j(this).next().slideUp('slow');
}
});
});
[/codesyntax]
WordPressでは「$( )」の代わりに「jQuery( )」を使う仕様となっている。いちいち「jQuery( )」と書くのは面倒なので「var $j = jQuery.noConflict();」とし「$j( )」で代用。
サブカテゴリーのある項目をクリックすると（チェックを入れると）展開、チェックをはずしカーソルが離れると折りたたまれる。
現在のカテゴリーは自動的にリストの上部に表示されるようになっているが、使い難い場合があるため「/wp-admin/includes/template.php」250〜255行目付近を変更。
「‘checked_ontop’ => true」>>>「‘checked_ontop’ => false」（※WP3.0の場合）
●カテゴリーの高さを変更
[codesyntax lang=”javascript” title=”custom-admin-page.js”]
var $j = jQuery.noConflict();
$j(function(){
////カテゴリー高さ
$j('div.categorydiv div.tabs-panel').css("height","500px");
});
[/codesyntax]
管理画面のCSSに書いても良さそうだが、アップデート時に上書きされてしまうかもしれないので、テーマディレクトリ設置したJavascript（JQuery）で処理した。