投稿画面でカテゴリーが増えると管理画面でのリスト表示が長くなってしまう。特にサブカテゴリーが展開されているとかなり使いづらい。そこでアコーディオンを使い、普段は折りたたみ、必要な時にクリックで展開するようにしてみた。

WordPress3.0で動作確認。


●まずはアクションフック設定

テーマディレクトリの「functions.php」にでも以下のコードを追加。

管理画面へアクセス時に「http://XXXXX.com/hogehoge/js/custom-admin-page.js」を読み込ませる。

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>';
}


●カテゴリーの折りたたみと展開

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');
    }
 
  });
 
});

WordPressでは「$( )」の代わりに「jQuery( )」を使う仕様となっている。いちいち「jQuery( )」と書くのは面倒なので「var $j = jQuery.noConflict();」とし「$j( )」で代用。

サブカテゴリーのある項目をクリックすると(チェックを入れると)展開、チェックをはずしカーソルが離れると折りたたまれる。

動作サンプル


現在のカテゴリーは自動的にリストの上部に表示されるようになっているが、使い難い場合があるため「/wp-admin/includes/template.php」250〜255行目付近を変更。

‘checked_ontop’ => true>>>‘checked_ontop’ => false」(※WP3.0の場合)


●カテゴリーの高さを変更

var $j = jQuery.noConflict();
$j(function(){
 ////カテゴリー高さ
 $j('div.categorydiv div.tabs-panel').css("height","500px");
});


管理画面のCSSに書いても良さそうだが、アップデート時に上書きされてしまうかもしれないので、テーマディレクトリ設置したJavascript(JQuery)で処理した。

TOPページへ前のページへ戻る