WordPressのwp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。


こんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。

2012年4月23日(月)の業務日記です。

今日は一日、中でWeb制作の仕事。とある上場企業の公式サイトをWordPressで構築する案件です。

さて、WordPressには、wp_dropdown_categories関数というのが用意されており、この関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。

テンプレートタグ/wp dropdown categories – WordPress Codex 日本語版

例えば、以下のようなソースコードです。(WordPress Codex 日本語版からの引用です。)

送信ボタン付きドロップダウンメニュー
WordPress サイドバーの箇条書きリスト内に、HTMLフォームの送信ボタン付き階層型カテゴリ・ドロップダウンリストを表示、各カテゴリの投稿数も表示。

<li id="categories">
 <h2><?php _e('Categories:'); ?></h2>
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
   <input type="submit" name="submit" value="view" />
   </form>
</li>

JavaScript を用いた送信ボタンなしドロップダウンメニュー(その1)
例は show_option_none パラメータを使った例です。Moshu のフォーラムの投稿から拾われました。

<li id="categories"><h2><?php _e('Posts by Category'); ?></h2>
	<?php wp_dropdown_categories('show_option_none=Select category'); ?>

<script type="text/javascript"><!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
		if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
			location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
		}
    }
    dropdown.onchange = onCatChange;
--></script>
</li>
<li>

JavaScript を用いた送信ボタンなしドロップダウンメニュー(その2)
この例では echo パラメータ (echo=0) が使われています。preg_replace は JavaScript のコードを追加しています。JavaScript が使えない環境でも動作します (送信ボタンが noscript タグ内に埋め込まれています)。

<li id="categories">
	<h2><?php _e('Posts by Category'); ?></h2>
	<form action="<?php bloginfo('url'); ?>/" method="get">
<?php
	$select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
	$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
	echo $select;
?>
	<noscript><input type="submit" value="View" /></noscript>
	</form>
</li>

一方で、現時点におけるWordPressのテンプレートタグで、タグやカスタムフィールドでのドロップダウンの実装は、標準では用意されておらず、コードを書く必要があります。

その他のドロップダウンのテンプレートタグ一覧は、以下のURLの通りです。
テンプレートタグ – WordPress Codex 日本語版

wp_list_authors
ブログの投稿者一覧を表示。投稿があれば投稿者アーカイブへのリンク付き
wp_list_categories
リンク付きカテゴリーリストを表示/取得
wp_list_pages
「ページ」一覧を表示/取得
wp_list_bookmarks
ブックマーク(ブログロール)一覧を表示/取得
wp_list_comments
現在の投稿に対する全てのコメントを表示。従来のコメントループに替わるもの。
wp_get_archives
月別アーカイブリスト等、日付に基づくリンク付きアーカイブリストを表示。月別・日別・週別、最近の投稿n件
wp_page_menu
wp_dropdown_pages
「ページ」一覧をセレクトボッックス(ドロップダウンメニュー)で表示
wp_dropdown_categories
セレクトボックス(ドロップダウンメニューなど)を使ったカテゴリーリストを表示/取得
wp_dropdown_users
the_widget
任意のウィジェットをテンプレートの任意の位置に表示

カテゴリーのドロップダウンメニューも、例えば、特定のカテゴリーのみドロップダウンメニューにしたい場合には、excludeなどのパラメーター(引数)を使えば出来ますし、そういった辺りのWordPressの仕様を知っていると、出来ることの住み分けと工数が分かって良いのかなと思いました。

そんな4月23日でした。


"WordPressのwp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。" に7件のコメント

  1. sato

    こんにちは、wp_dropdown_categories関数を使って絞り込み検索を実現(AND検索)したいと思っています。しかし、以下の様にカテゴリを分けてしまうと、AND検索ではなくOR検索となってしまいます。

    <form method=”get” id=”searchform” action=”<?php bloginfo(‘url’); ?>”;?>
    <label class=”label”>条件指定検索</label>
    <input type=”text” name=”s” id=”s” />
    <input type=”hidden” id=”searchsubmit” value=”search” />
    <input type=”submit” name=”btnG” value=”検索” />
    <br />
    地域:<?php wp_dropdown_categories(‘hide_empty=0&show_count=1&child_of=5&hierarchical=1&class=kenselect&show_option_all=-未指定-‘);?>
    <br />
    料金:<?php wp_dropdown_categories(‘hide_empty=0&show_count=1&child_of=3&hierarchical=1&class=moneyselect&show_option_all=-未指定-‘);?>

    <br />

    タグ:<?php $tags = get_tags(); if ( $tags ) : ?>
    <select name=’tag’ id=’tag’>
    <option value=”” selected=”selected”>-未指定-</option>
    <?php foreach ( $tags as $tag ): ?>
    <option value=”<?php echo esc_html( $tag->slug); ?>”><?php echo esc_html( $tag->name ); ?></option>
    <?php endforeach; ?>
    </select>
    <?php endif; ?>

    </form>

    以下のようにすれば、それぞれが連動して、AND検索が動作します。

    <form method=”get” id=”searchform” action=”<?php bloginfo(‘url’); ?>”;?>
    <label class=”label”>条件指定検索</label>
    <input type=”text” name=”s” id=”s” />
    <input type=”hidden” id=”searchsubmit” value=”search” />
    <input type=”submit” name=”btnG” value=”検索” />
    <br />
    カテゴリ選択:<?php wp_dropdown_categories(‘hide_empty=0&show_count=1&child_of=5hierarchical=1&class=kenselect&show_option_all=-未指定-‘);?>
    <br />

    タグ:<?php $tags = get_tags(); if ( $tags ) : ?>
    <select name=’tag’ id=’tag’>
    <option value=”” selected=”selected”>-未指定-</option>
    <?php foreach ( $tags as $tag ): ?>
    <option value=”<?php echo esc_html( $tag->slug); ?>”><?php echo esc_html( $tag->name ); ?></option>
    <?php endforeach; ?>
    </select>
    <?php endif; ?>

    </form>

    ドロップダウンを2つ表示させた場合でも、AND検索を実現することは出来ないものでしょうか?
    よろしければ教えていただけると、助かります。

  2. WordPressのwp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。 http://t.co/gyLGU5or @khoshinoさんから

  3. WordPressのwp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。 | 株式会社コミュニティコム http://t.co/qUcDvRV9

  4. INO

    WordPressのwp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。 http://t.co/oqUjv3ta @khoshinoさんから

  5. WordPressのwp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。 | 株式会社コミュニティコム – http://www.communitycom.jp/2012

  6. いろいろなドロップダウンメニュー

  7. ピンバック: スマホとPCでカテゴリの表示方法を分ける-wordpress-

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA