投稿に付けたタグをドロップダウンリストで表示する

カテゴリーよりもタグのほうが数が多くなる傾向にあるので、まずはタグをドロップダウン形式で表示してみます。

最初に、functions.phpに次のような関数を作ります。テンプレートファイルに直接書くこともできますが、長くなるのでおすすめしません。

function twpp_get_tags_dropdown( $before = '' ) {
  $html = '';
  $tags = get_the_tags();

  if ( !empty( $tags ) ) {
    $html .= $before;
    $html .= '<select onChange="window.location.href=this.options[this.selectedIndex].value;">';

    foreach ( $tags as $tag ) {
      $html .= sprintf( 
        '<option value="%s">%s</option>',
        get_tag_link( $tag->term_id ),
        $tag->name 
      );
    }

    $html .= '</select>';
  }

  echo $html;
}

次に、タグを出力したい場所に次のようなコードを挿入します。第1引数はセレクトボックスにデフォルトで表示しておく文字列です。

<?php twpp_get_tags_dropdown( 'タグ: ' ); ?>

リストを選択すると、所属するタグの一覧が表示されます。タグを選ぶとそのアーカイブページに遷移します。

投稿が属するカテゴリーをドロップダウンリストで表示する

上のコードにおいて、get_the_tags()の部分をget_the_category()に、get_tag_link()をget_category_link()に変えるだけですね。functions.phpに記載する関数のみ示します。

function twpp_get_categories_dropdown( $label = '' ) {
  $html = '';
  $categories = get_the_category();

  if ( !empty( $categories ) ) {
    $html .= '<select onChange="window.location.href=this.options[this.selectedIndex].value;">';

    $html .= '<option>' . $label .'</option>';
    foreach ( $categories as $category ) {
      $html .= sprintf( 
        '<option value="%s">%s</option>',
        get_tag_link( $category->term_id ),
        $category->name 
      );
    }

    $html .= '</select>';
  }

  echo $html;
}

この関数を呼び出したい部分で実行すれば、次のようになります。

セレクトボックスは何もしないと簡素ですので、適宜CSSでスタイルを当ててください。

なお、ページの移動にはJavaScriptを使用しています。onChange以下が該当箇所です。

カテゴリーでもタグでも使える関数に変更する

コードを比較するとわかる通り、カテゴリーでもタグでも、ドロップダウンを表示するための処理はほとんど同じです。似たような関数が複数あるのは望ましくありませんので、1つにまとたいと思います。

function twpp_get_terms_dropdown( $taxonomy, $label = '', $post_id = '' ) {
  $html = '';

  if( !$post_id ) {
    $post_id = get_the_ID();
  }

  $terms = get_the_terms( $post_id, $taxonomy );

  if ( $terms && !is_wp_error( $terms ) ) {
    $html .= '<select onChange="window.location.href=this.options[this.selectedIndex].value;">';

    $html .= '<option>' . $label .'</option>';
    foreach ( $terms as $term ) {
      $html .= sprintf( 
        '<option value="%s">%s</option>',
        get_term_link( $term->term_id, $taxonomy ),
        $term->name 
      );
    }

    $html .= '</select>';
  }

  echo $html;
}

この関数だけで、カテゴリーとタグだけでなく、自分で追加したカスタムタクソノミーの一覧をドロップダウンで表示することができます。

8行目のget_the_terms()は投稿のIDと分類名を指定して、投稿が属する分類の配列を取得する関数です。分類名を'category'とすれば、get_the_category()と同じ結果を得ることができます。

17行目のget_term_link()は、TermのIDと分類名を指定することで、アーカイブページへのURLを取得する関数です。分類名を'category'とすればget_category_link()と同じ結果になります。

使用するときは、第1引数に分類名を渡す必要があります。

<?php twpp_get_terms_dropdown( 'category', 'カテゴリー' ); ?>
<?php twpp_get_terms_dropdown( 'post_tag', 'タグ' ); ?>

カテゴリーのタクソノミー名はcategory、タグのタクソノミー名はpost_tagです。実行すると、上の画像と同じ出力を1つの関数だけで得ることができます。

カスタムタクソノミーの場合は、次のようにして使ってください。

<?php twpp_get_terms_dropdown( 'my_taxonomy_name', 'タクソノミー' ); ?>

なお、第3引数に投稿のIDを入れると、WordPressループの外でもドロップダウンリストを表示することができます。初期値は現在の投稿です。