サイドバーなどでカテゴリーやタグの一覧を取得したい時のやり方を以前2度にわたって解説しました。
今回は取得した一覧をドロップダウンメニューで表示したい場合の解説になります。
以下のようなものを実装したい時に使えます。
カテゴリー
wp_dropdown_categories()
セレクトボックスのドロップダウン形式でコードを排出するだけであれば、WordPressで用意されている以下の関数を、該当箇所に記載するだけで簡単に実装可能です。
<?php wp_dropdown_categories(); ?>
しかしこれではドロップダウンは実装できますが、出力されたカテゴリーリストをクリックしてもリンクなどはされません。
そのためJavaScriptを追記してあげる必要があります。
<?php
$args = array(
'show_option_none' => 'カテゴリーを選択', // 初期値のプレースホルダー
'show_count' => 1, //カテゴリーに属する投稿数を表示するか
);
wp_dropdown_categories($args);
?>
<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>
もちろんこちらのjsの意味が分からなくてもおまじない的にこちら設置してもよいのですが、よりコードの見通しよく管理したい場合は、wp_dropdown_categories()
を使わず以前までの記事を参考にコードを組み立てていく方法もあります。
get_categories()
上記記事で使った get_categories()
を使用していきます。
<select name="select" onChange="location.href=value;">
<option value="">カテゴリーを選択</option>
<?php
$categories = get_categories();
foreach ($categories as $category) {
$categories = get_the_category($post->ID);
$slug = $categories[0]->term_id;
if (is_category() && $slug == $category->term_id) {
echo '<option value="' . get_category_link($category) . '" selected>' . $category->name . ' (' . $category->count . ')</option>';
} else {
echo '<option value="' . get_category_link($category) . '">' . $category->name . ' (' . $category->count . ')</option>';
}
}
?>
</select>
こちらでJavaScriptを使わずとも wp_dropdown_categories();
で出力されたコードと同じものが実装できます。
get_terms()
また以前こちらの記事で解説したように、get_categories()
の代わりに get_terms()
を使って実装する方法もあります。こちらの記事で解説したように get_terms()
を使えばタグやカスタムタクソノミーにも使用できるので汎用性があります。こちらで覚えてしまうのもコスパがいいのでおススメになります。
<select name="select" onChange="location.href=value;">
<option value="">カテゴリーを選択</option>
<?php
$terms = get_terms('category');
foreach ($terms as $term) {
$terms = get_the_terms($post->ID, 'category');
$slug = $terms[0]->slug;
if (is_tax() && $slug == $term->slug) {
echo '<option value="' . get_term_link($term) . '" selected>' . $term->name . ' (' . $term->count . ')</option>';
} else {
echo '<option value="' . get_term_link($term) . '">' . $term->name . ' (' . $term->count . ')</option>';
}
}
?>
</select>
こちらで同じようなカテゴリーのドロップダウンがリンク付きで実装できました。
同様にタグとカスタムタクソノミーも見て行きましょう。上記コードを一部書き換えるだけで簡単に実装可能です。
タグ
タグのドロップダウンは以下のコーで実装できます。
<select name="select" onChange="location.href=value;">
<option value="">タグを選択</option>
<?php
$terms = get_terms('post_tag');
foreach ($terms as $term) {
$terms = get_the_terms($post->ID, 'post_tag');
$slug = $terms[0]->slug;
if (is_tax() && $slug == $term->slug) {
echo '<option value="' . get_term_link($term) . '" selected>' . $term->name . ' (' . $term->count . ')</option>';
} else {
echo '<option value="' . get_term_link($term) . '">' . $term->name . ' (' . $term->count . ')</option>';
}
}
?>
</select>
カテゴリーの'category'
を'post_tag'
に変更しただけです。
続けてカスタムタクソノミーも見て行きましょう。
カスタムタクソノミー
もうお分かりですね。カテゴリーの'category'
の部分をタクソノミーのスラッグに変えてあげればよいのです。
今回は'blog'
というカスタムタクソノミーのスラッグであると仮定します。
<select name="select" onChange="location.href=value;">
<option value="">BLOGを選択</option>
<?php
$terms = get_terms('blog');
foreach ($terms as $term) {
$terms = get_the_terms($post->ID, 'blog');
$slug = $terms[0]->slug;
if (is_tax() && $slug == $term->slug) {
echo '<option value="' . get_term_link($term) . '" selected>' . $term->name . ' (' . $term->count . ')</option>';
} else {
echo '<option value="' . get_term_link($term) . '">' . $term->name . ' (' . $term->count . ')</option>';
}
}
?>
</select>
最後に
wp_dropdown_categories()
という便利な関数があるのですが、汎用性を考えるとあまり使えないのが残念ですが、get_terms()
を使えばタグもカスタムタクソノミーにも使えるのでこちらがおススメです!
コメント