・セレクトボックスにてカテゴリーやタクソノミー一覧を表示する方法は？
こんな疑問にお答えします。
セレクトボックスを用いて、一覧ページへ飛ばす場合がありますよね。
オプションタグを選択したら、リンク先へ変わる感じに。
あれ実は簡単に実装可能です！
すぐにできるよ！
ということで、この記事では「セレクトボックスでカテゴリー／タクソノミーを一覧表示」について解説していきます！
・セレクトボックスでカテゴリーを一覧表示
・セレクトボックスでタクソノミーを一覧表示
目次
【WordPress】セレクトボックスでカテゴリーを一覧表示
セレクトボックスを用いたカテゴリーを一覧表示するコードがこちら↓
<select name="select" onChange="location.href=value;">
<option value="<?php echo esc_url(home_url('/blog/')); ?>">ALL</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="'.esc_url(get_category_link($category->term_id)).'" selected>'.esc_html($category->name).'</option>';
}else{
echo '<option value="'.esc_url(get_category_link($category->term_id)).'">'.esc_html($category->name).'</option>';
}
}
?>
</select>コードの中で重要な点がこちら↓
- 「onChange」を使用
- 一覧全てはhome_urlを使用
- foreachを使いカテゴリー全て表示
- if文で「selected」属性を付与
まず一行目にて「onChange」を使用します。
<select name="select" onChange="location.href=value;">これにより選択したoptionタグのvalue属性にあるURLに飛ぶという実装ができます。
２行目にて一覧全てを表示するページリンクを記述します。
<option value="<?php echo esc_url(home_url('/blog/')); ?>">ALL</option>通常通り「home_url」を使用しましょう。
foreachを使ってあるカテゴリー全て表示します。
foreach($categories as $category)下記分にてif文を使用しています。
if(is_category() && $slug == $category->term_id){
echo '<option value="'.esc_url(get_category_link($category->term_id)).'" selected>'.esc_html($category->name).'</option>';
}else{
echo '<option value="'.esc_url(get_category_link($category->term_id)).'">'.esc_html($category->name).'</option>';
}意味としては「カテゴリーページで、かつ今表示してるカテゴリーページと同じカテゴリーなら「selected」属性を付与する」です。
これでリンク先に飛んだあと、セレクトボックスに表示されているoptionタグをそのページカテゴリーにすることができます。
【WordPress】セレクトボックスでタクソノミーを一覧表示
セレクトボックスを用いたタクソノミーを一覧表示するコードがこちら↓
<select name="select" onChange="location.href=value;">
<option value="<?php echo esc_url(home_url('/カスタム投稿のスラッグ/')); ?>">ALL</option>
<?php
$terms = get_terms('タクソノミーのスラッグ');
foreach($terms as $term) {
$terms = get_the_terms($post->ID, 'タクソノミーのスラッグ');
$slug = $terms[0]->slug;
if(is_tax() && $slug == $term->slug){
echo '<option value="'.esc_url(get_term_link($term->slug, 'タクソノミーのスラッグ')).'" selected>'.esc_html($term->name).'</option>';
}else{
echo '<option value="'.esc_url(get_term_link($term->slug, 'タクソノミーのスラッグ')).'">'.esc_html($term->name).'</option>';
}
}
?>
</select>意味としては先ほどのカテゴリーと同じですね。
タクソノミーに変えただけです！
下記の「カスタム投稿のスラッグ」のところに、カスタム投稿のスラッグを記述。
<option value="<?php echo esc_url(home_url('/カスタム投稿のスラッグ/')); ?>">ALL</option>下記の「タクソノミーのスラッグ」の部分に、タクソノミースラッグを記述します。
'タクソノミーのスラッグ'実際に記述してみたのがこちら↓
<select name="select" onChange="location.href=value;">
<option value="<?php echo esc_url(home_url('/work/')); ?>">ALL</option>
<?php
$terms = get_terms('work_cat');
foreach($terms as $term) {
$terms = get_the_terms($post->ID, 'work_cat');
$slug = $terms[0]->slug;
if(is_tax() && $slug == $term->slug){
echo '<option value="'.esc_url(get_term_link($term->slug, 'work_cat')).'" selected>'.esc_html($term->name).'</option>';
}else{
echo '<option value="'.esc_url(get_term_link($term->slug, 'work_cat')).'">'.esc_html($term->name).'</option>';
}
}
?>
</select>workというカスタム投稿の、work_catというカスタムタクソノミーを指定しております。
【WordPress】セレクトボックスでカテゴリー／タクソノミーを一覧表示：まとめ
- 「onChange」を使用して選択したoptionタグのvalue属性にあるURLに飛ばす
- if文を使いselectタグを付与
セレクトボックスを用いて一覧表示する場合試してみてね！
