Webデザイナーブログから学ぶホームページ制作

WordPress（ワードプレス）で、カテゴリーやタグの一覧を表示できますが、それぞれの項目が沢山あると画面より長くなり見づらくなる恐れがあります。カテゴリーやタグをセレクトボックスで表示することで画面のスクロールを行わなくてもカテゴリーやタグを選択できるようになります。

今回は、WordPress（ワードプレス）でカテゴリーやタグの一覧をセレクトボックスで表示する方法を解説します。

セレクトボックスはいくつかの選択肢から一つを選択できる要素です。セレクトボックスは、プルダウンやプルダウンメニューという呼び方もします。セレクトボックスを配置する場合は、「select」タグと「option」タグを用いて配置します。

また、カテゴリーやタグを出力する場合、「get_terms()」や「get_the_terms()」の関数コードを記述して、それぞれの一覧をセレクトボックスで表示します。
セレクトボックスで表示する場合、「投稿タイプ」のカテゴリーやタグを表示する方法と「カスタム投稿タイプ」のカテゴリーやタグを表示する方法があります。

「投稿タイプ」のカテゴリー情報やタグ情報を取得するために、「get_terms()」「get_the_terms()」「get_term_link()」の要素の値に「category」を指定します。

※「category」を指定してカテゴリーを出力します。

<select name="select" onChange="location.href=value;">
<option value="<?php echo home_url(); ?>blog">ブログ一覧</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->slug,'category').'" selected>'.$term->name.'</option>';
}else{
	echo '<option value="'.get_term_link($term->slug,'category').'">'.$term->name.'</option>';
}
}
?>
</select>

※「post_tag」を指定してタグを出力します。

<select name="select" onChange="location.href=value;">
<option value="<?php echo home_url(); ?>tag">ブログ一覧</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->slug,'post_tag').'" selected>'.$term->name.'</option>';
}else{
	echo '<option value="'.get_term_link($term->slug,'post_tag').'">'.$term->name.'</option>';
}
}
?>
</select>

「カスタム投稿タイプ」のカテゴリー情報やタグ情報を取得するために、「get_terms()」「get_the_terms()」「get_term_link()」の要素の値に「タクソノミースラッグ」を指定します。

※「category」部分に「タクソノミースラッグ」を指定します。

<select name="select" onChange="location.href=value;">
<option value="<?php echo home_url(); ?>blog">ブログ一覧</option>
 // 「category」にタクソノミースラッグを指定
<?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->slug,'category').'" selected>'.$term->name.'</option>';
}else{
	echo '<option value="'.get_term_link($term->slug,'category').'">'.$term->name.'</option>';
}
}
?>
</select>

※「post_tag」部分に「タクソノミースラッグ」を指定します。

<select name="select" onChange="location.href=value;">
<option value="<?php echo home_url(); ?>tag">ブログ一覧</option>
 // 「post_tag」にタクソノミースラッグを指定
<?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->slug,'post_tag').'" selected>'.$term->name.'</option>';
}else{
	echo '<option value="'.get_term_link($term->slug,'post_tag').'">'.$term->name.'</option>';
}
}
?>
</select>

カテゴリーやタグは多くなれば多くなるほど一覧部分の幅をとってしまいます。サイドバーなどに表示したい場合は、他のコンテンツを邪魔しないために、セレクトボックスで表示するのも便利ですね。
カテゴリーやタグの項目が多くなり全体を圧迫して来たらセレクトボックスを試してみてください。