• かちびと.net

    WordPressの投稿画面で、記事のカテゴリーを1つしか選べないようにする方法を書いてみました。ラジオボタンとチェックボックスの数の制御です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

WordPressの投稿画面で、記事のカテゴリーを1つしか選べないようにする

スポンサーリンク

少々気になった記事があったので備忘録。WordPressの投稿画面でカテゴリーを選択出来る部分があって、そこはチェックボックスになっています。当然複数選べるようになっているわけですが、仕様上、1つしか選べないようにしたい、という場合のTipsです。

少し前にWptuts+で「ラジオボタン化して1つしか選択できない様にする」という記事がありました。
(How to Use Radio Buttons With Taxonomies)

おおーちょっといいかも、と思ったんですけど、若干面倒くさそうだったのでもう一つの選択肢としてjQueryの方法を書いておこうと思います。

実装


単純に1つしか選択できないようにすればいいならチェックボックスにチェック出来る数を制限すればいいです。上図は、1つ選択すると他はdisabledになるようにしています。

尚、チェックボックスの動作は以下のような感じです。

これをカテゴリーのチェックボックス部分に適応させる、というのが今日の内容です。

管理画面にjQueryのコードを書く準備

function limit_checkbox_amount() {
echo '<script type="text/javascript">
  //<![CDATA[
/*ここに命令文を書く*/
  //]]>
  </script>';
}
add_action('admin_footer', 'limit_checkbox_amount');

フッターに置いちゃいます。後は命令文ですね。

jQuery

管理画面はprototype.jsも読み込まれる可能性が高いのでコンフリクトを避けるために$を使用しないようにしてください。

    var count = jQuery("ul#categorychecklist li input[type=checkbox]:checked").length;
    var not = jQuery("ul#categorychecklist li input[type=checkbox]").not(":checked");
    if(count >= 1) { not.attr("disabled",true);}else{ not.attr("disabled",false);}

jQuery("ul#categorychecklist li input[type=checkbox]").click(function(){
    var count = jQuery("ul#categorychecklist li input[type=checkbox]:checked").length;
    var not = jQuery("ul#categorychecklist li input[type=checkbox]").not(":checked");
    if(count >= 1) { not.attr("disabled",true);}else{ not.attr("disabled",false);}
});

なんとも微妙なコードが出来ました。count >= 1はチェックボックスの数です。チェックが1つついたら、残りのチェックボックスは全部disabledにします。2つにしたいならcount >= 2としてください。多分もっと短く出来ますのでご自身で改善してくださいませ。

仕様の明示

これで1つしか選択できないようになりましたが、これだけだと利用者さんには分かりませんので、文章を入れて明示してあげます。

jQuery("ul#categorychecklist").before("<p>1つしか選択できません</p>");

こんなんでいいんじゃないでしょうか。「1つだけ選択出来ます」とかの方がいいかな。

ゴール

というわけで以下をfunctions.phpに入れればOKです。

function limit_checkbox_amount() {
echo '<script type="text/javascript">
  //<![CDATA[
jQuery("ul#categorychecklist").before("<p>1つしか選択できません</p>");
    var count = jQuery("ul#categorychecklist li input[type=checkbox]:checked").length;
    var not = jQuery("ul#categorychecklist li input[type=checkbox]").not(":checked");
    if(count >= 1) { not.attr("disabled",true);}else{ not.attr("disabled",false);}

jQuery("ul#categorychecklist li input[type=checkbox]").click(function(){
    var count = jQuery("ul#categorychecklist li input[type=checkbox]:checked").length;
    var not = jQuery("ul#categorychecklist li input[type=checkbox]").not(":checked");
    if(count >= 1) { not.attr("disabled",true);}else{ not.attr("disabled",false);}
});
  //]]>
  </script>';
}
add_action('admin_footer', 'limit_checkbox_amount');

これで、冒頭の「実装」のような感じに出来ました。

ラジオボタン化するよりは簡単なんじゃないかなーと思います。ただ、様々なシーンを想定したコードじゃないのでこのままコピペとかだと何か問題出るかもです。その際は便宜対応してくださいませ。以上ですー

URL :
TRB :

Comments & Trackbacks (6)

  1. masal

    WordPressの日本語フォーラムにある
    http://ja.forums.wordpress.org/topic/3631
    も、簡単なんじゃないかなーと思いますが、いかが?

    • シロ

      こんにちは!
      あ、これでも簡単ですねー!有難う御座いますXD

      ただ、ラジオボタンだとちょっと投稿フォーマットも利用してる場合は混同しそうですね・・
      でもコードはこっちのほうがスマートでいいですね!
      良い情報有難う御座いました!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services