【WordPress】セレクトボックスでカテゴリー／タクソノミーを一覧表示

記事内に広告を含みます

パソ君

・セレクトボックスにてカテゴリーやタクソノミー一覧を表示する方法は？

こんな疑問にお答えします。

セレクトボックスを用いて、一覧ページへ飛ばす場合がありますよね。

オプションタグを選択したら、リンク先へ変わる感じに。

あれ実は簡単に実装可能です！

ジト

すぐにできるよ！

ということで、この記事では「セレクトボックスでカテゴリー／タクソノミーを一覧表示」について解説していきます！

この記事でわかること

・セレクトボックスでカテゴリーを一覧表示
・セレクトボックスでタクソノミーを一覧表示

【WordPress】セレクトボックスでカテゴリーを一覧表示
【WordPress】セレクトボックスでタクソノミーを一覧表示
- 実際に記述してみた！
【WordPress】セレクトボックスでカテゴリー／タクソノミーを一覧表示：まとめ

【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」を使用

まず一行目にて「onChange」を使用します。

<select name="select" onChange="location.href=value;">

これにより選択したoptionタグのvalue属性にあるURLに飛ぶという実装ができます。

➁：一覧全てはhome_urlを使用

２行目にて一覧全てを表示するページリンクを記述します。

<option value="<?php echo esc_url(home_url('/blog/')); ?>">ALL</option>

通常通り「home_url」を使用しましょう。

➂：foreachを使いカテゴリー全て表示

foreachを使ってあるカテゴリー全て表示します。

foreach($categories as $category)

➃：if文で「selected」属性を付与

下記分にて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というカスタムタクソノミーを指定しております。