2017年10月20日
  • 自社保有メディアのサイト運営によるインターネット広告事業・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日でした。