Title: カテゴリーのドロップダウンリストのデザインをしたい
Last modified: 2016年7月30日

---

# カテゴリーのドロップダウンリストのデザインをしたい

 *  解決済 [urashin](https://ja.wordpress.org/support/users/urashin/)
 * (@urashin)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/)
 * <?php wp_dropdown_categories(); ?>を使うと、
    ドロップダウンでカテゴリーの選択
   が出来るようになるというのがわかり、 さっそく取り入れました。
 * 個人的に使い勝手もいいのですが、出来れば、<?php wp_dropdown_categories(); ?>の
   
   デザインを工夫することで、より利用しやすくなると思い、いろいろと探しましたが 
   具体的なものが見つけられませんでした。
 * そこで、初心者な質問で非常に申し訳ないのですが、
    <?php wp_dropdown_categories();?
   >で出来るドロップダウンリストをデザインする方法は ありますでしょうか。
 * よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)

 *  [nobita](https://ja.wordpress.org/support/users/nobita/)
 * (@nobita)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156455)
 * こんにちは
 * style.cssというファイルを編集すると出来ます。
 * どんなカスタマイズをしたいのかわからないので、なんともいえませんが
 * CSSをキーワードに調べてみてください
 * サンプル
 * option の値が4の背景色を赤にします。
    あと、ボックスのサイズが変わります。 style.
   cssの最後に貼り付けてみてください
 *     ```
       #cat{
       padding:10px;
       }
       #cat option[value="4"]{
       	background:red;
       }
       ```
   
 *  トピック投稿者 [urashin](https://ja.wordpress.org/support/users/urashin/)
 * (@urashin)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156473)
 * ご返信ありがとうございます。
 * style.cssで出来るということを教えていただき、
    いろいろと調べてみるとjQueryが
   使えるということがわかったのですが、 <?php wp_dropdown_categories(); ?>にもjQuery
   が使えるのでしょうか。
 * もし使えるのであれば、その方法やサンプルなどを教えていただけると嬉しいです。
 * 勝手で申し訳ありません。
    よろしくお願いします。
 *  [nobita](https://ja.wordpress.org/support/users/nobita/)
 * (@nobita)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156474)
 * 使う事が出来ます
 * テーマの、functions.phpの先頭の`<?php`の前に、以下のコードを貼り付けてみてくだ
   さい
    option の値が4の背景色を赤にします。 メッセージを表示します。
 *     ```
       <?php
       add_action('wp_head', 'my_script' );
   
       function my_script(){
       	wp_enqueue_script( 'jquery' );//jQueryの呼び出し
       ?>
       	<script type="text/javascript">
       	  jQuery(function($) {
       	   alert("これはjQueryのサンプルです。本番には、wp_enqueue_scriptを学びましょう");
       	   $('#cat option[value="4"]').css({'background':'#f00'});
       	  });
       	</script>
       <?php
       }
       ?>
       ```
   
 * header.phpに直接、jQueryのコードを書く事も出来ますが、WordPressではPHPを使って
   header領域にコードを挿入するという方法が使われる事が多いです。
 * jQueryは、ワードプレスに付属してます、wp_enqueue_scriptというPHP WordPress関数
   を使って呼び出すことが出来る仕組みがあります。
 * どんなjsがあるのかは、私のメモでちょっと古く、間違っている可能性もありですが、
   よろしければ
 * [http://tenman.info/labo/snip/?page_id=939](http://tenman.info/labo/snip/?page_id=939)
 *  トピック投稿者 [urashin](https://ja.wordpress.org/support/users/urashin/)
 * (@urashin)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156484)
 * 返信遅くなってしまい申し訳ありません。
 * nobitaさんが提示してくださいましたコードを参考にしつつ、jqueryやjavascriptなど
   を
    行ってみました。
 * すると、alert表示などは出来るのですが、
    ツールボックスやリストなどを作ること
   が出来ません。
 * 私としては、jqueryを調べたところ、クリックすることで￥開けるような
    ツールボックス
   のような仕組みなどを<?php wp_dropdown_categories(); ?>に 組み込むことが出来れ
   ば面白いなと感じるのですが、 当てはめることなどは出来ないでしょうか。
 * 長文申し訳ありません。
 *  [nobita](https://ja.wordpress.org/support/users/nobita/)
 * (@nobita)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156486)
 * [http://semooh.jp/jquery/cont/doc/event/](http://semooh.jp/jquery/cont/doc/event/)
   
   と [http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_dropdown_categories](http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_dropdown_categories)
   を理解すると、いろんなことが出来ると思います。
 *  トピック投稿者 [urashin](https://ja.wordpress.org/support/users/urashin/)
 * (@urashin)
 * [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156494)
 * 返信遅くなってしまい、申し訳ありません。
 * nobitaさんが提示してくださいましたサイトを参考にしたところ、
    理想のものとまで
   はいきませんでしたが、 ある程度のものは出来るようになりました。
 * 何度もお返事いただきありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)

 トピック「カテゴリーのドロップダウンリストのデザインをしたい」には新たに返信する
ことはできません。

## タグ

 * [カテゴリー](https://ja.wordpress.org/support/topic-tag/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc/)
 * [デザイン](https://ja.wordpress.org/support/topic-tag/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/)
 * [ドロップダウンリスト](https://ja.wordpress.org/support/topic-tag/%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6件の返信
 * 2人の参加者
 * 最後の返信者: [urashin](https://ja.wordpress.org/support/users/urashin/)
 * 最後の活動: [13年、 9ヶ月前](https://ja.wordpress.org/support/topic/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%ae%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%83%80%e3%82%a6%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%92/#post-156494)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック