サポート » 使い方全般 » カテゴリーのドロップダウンリストのデザインをしたい

  • 解決済 urashin

    (@urashin)


    <?php wp_dropdown_categories(); ?>を使うと、
    ドロップダウンでカテゴリーの選択が出来るようになるというのがわかり、
    さっそく取り入れました。

    個人的に使い勝手もいいのですが、出来れば、<?php wp_dropdown_categories(); ?>の
    デザインを工夫することで、より利用しやすくなると思い、いろいろと探しましたが
    具体的なものが見つけられませんでした。

    そこで、初心者な質問で非常に申し訳ないのですが、
    <?php wp_dropdown_categories(); ?>で出来るドロップダウンリストをデザインする方法は
    ありますでしょうか。

    よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    style.cssというファイルを編集すると出来ます。

    どんなカスタマイズをしたいのかわからないので、なんともいえませんが

    CSSをキーワードに調べてみてください

    サンプル

    option の値が4の背景色を赤にします。
    あと、ボックスのサイズが変わります。
    style.cssの最後に貼り付けてみてください

    #cat{
    padding:10px;
    }
    #cat option[value="4"]{
    	background:red;
    }

    トピック投稿者 urashin

    (@urashin)

    ご返信ありがとうございます。

    style.cssで出来るということを教えていただき、
    いろいろと調べてみるとjQueryが使えるということがわかったのですが、
    <?php wp_dropdown_categories(); ?>にもjQueryが使えるのでしょうか。

    もし使えるのであれば、その方法やサンプルなどを教えていただけると嬉しいです。

    勝手で申し訳ありません。
    よろしくお願いします。

    使う事が出来ます

    テーマの、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

    トピック投稿者 urashin

    (@urashin)

    返信遅くなってしまい申し訳ありません。

    nobitaさんが提示してくださいましたコードを参考にしつつ、jqueryやjavascriptなどを
    行ってみました。

    すると、alert表示などは出来るのですが、
    ツールボックスやリストなどを作ることが出来ません。

    私としては、jqueryを調べたところ、クリックすることで¥開けるような
    ツールボックスのような仕組みなどを<?php wp_dropdown_categories(); ?>に
    組み込むことが出来れば面白いなと感じるのですが、
    当てはめることなどは出来ないでしょうか。

    長文申し訳ありません。

    トピック投稿者 urashin

    (@urashin)

    返信遅くなってしまい、申し訳ありません。

    nobitaさんが提示してくださいましたサイトを参考にしたところ、
    理想のものとまではいきませんでしたが、
    ある程度のものは出来るようになりました。

    何度もお返事いただきありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「カテゴリーのドロップダウンリストのデザインをしたい」には新たに返信することはできません。