JOURNAL クリエイティブとマーケティングの話

【WordPress】カスタム投稿タイプのターム一覧をドロップダウンで表示する方法

カスタム投稿タイプのターム一覧をドロップダウンで表示する方法。

WordPressにはカテゴリー一覧をドロップダウンで表示するwp_dropdown_categoriesという関数があり、これでカスタム投稿タイプのターム一覧を出力することもできます。

しかしこの関数はselect要素(+下層のoption要素)のみが出力されるため、formタグとJavaScriptでページ遷移されるようにする必要があります。

僕の場合このページ遷移部分がうまくいかず、他の方法で実装することにしました。

カスタム投稿タイプのターム一覧をドロップダウンで表示する方法

<?php
$categories = get_categories('taxonomy=news_category');
$select = "<select name='cat' id='name' class='postform'>n";
$select.= "<option value='-1'>カテゴリーを選択</option>n";
foreach($categories as $category){
	if($category->count > 0){
		$select.= "<option value='".$category->slug."'>".$category->name."</option>";
	}
}
$select.= "</select>";
echo $select;
?>
<script type="text/javascript">
	var dropdown = document.getElementById("cat");
	function onCatChange() {
		if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
			location.href = "<?php echo home_url('/'); ?>news/news_category/"+dropdown.options[dropdown.selectedIndex].value+"/";
		}
	}
	dropdown.onchange = onCatChange;
</script>

上記のソースコードはカスタム投稿タイプのスラッグが「news」、カスタムタクソノミーのスラッグが「news_category」の場合です。

2行目のtaxonomyというパラメータの箇所と、17行目の遷移先のURLは適宜変更してください。

まとめ

以上、カスタム投稿タイプのターム一覧をドロップダウンで表示する方法でした。

wp_dropdown_categoriesを使って実装できればスマートでしたが、僕の場合はonchangeイベントがうまく動かず断念しました。

やり方はありそうなので引き続き調べてみたいと思います。

参考
Custom Taxonomy Category Dropdown with WordPress – John B. Hartley