2018年1月18日
  • 自社保有メディアのサイト運営によるインターネット広告事業・WordPressによるサイト制作事業・コワーキングスペース・シェアオフィス・貸会議室の運営事業を行っています。

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日でした。

コメント一覧

sato2012年6月2日 9:50 AM /

こんにちは、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検索を実現することは出来ないものでしょうか? よろしければ教えていただけると、助かります。

webdesigner_ryu2012年10月12日 5:48 PM /

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

rune_of_harst2012年11月19日 6:21 PM /

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

INO2013年2月1日 3:36 PM /

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

ゆっち2013年4月11日 6:26 PM /

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

jugedred2013年8月6日 6:40 AM /

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

スマホとPCでカテゴリの表示方法を分ける-wordpress-2014年3月13日 8:34 PM /

[…] は他に送信ボタンがあるタイプもあります。あえて今回はなしにしました。 (参考:WordPressのWp_dropdown_categories関数を使うと、簡単にカテゴリーのドロップダウンメニューが作れます。) […]

コメントを残す

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

CAPTCHA