WordPressのサイトにおいて、ユーザーが特定のカテゴリーやタグに属する記事を簡単に絞り込めるようにすることは、ユーザーエクスペリエンスを向上させる重要な機能です。この記事では、カテゴリーやタグを選択するセレクトボックスを実装し、それを用いて記事を自動的に絞り込む方法を紹介します。
カテゴリーのセレクトボックスを表示する
まず、wp_dropdown_categories()関数を使ってカテゴリーの一覧をセレクトボックス形式で表示します。この関数は、WordPressのカテゴリーを簡単にドロップダウン形式で表示できる便利なツールです。
<form action="<?php echo esc_url(home_url('/')); ?>" method="get" id="category-select">
<?php
$args = array(
'show_option_all' => '全てのカテゴリー',
'orderby' => 'name',
'order' => 'ASC',
'show_count' => 1,
'hide_empty' => 0,
'echo' => 1,
'name' => 'cat',
'id' => 'cat',
'class' => 'postform',
'taxonomy' => 'category',
'value_field' => 'term_id',
);
wp_dropdown_categories($args);
?>
</form>このコードをテーマの適切な場所に挿入すると、カテゴリーのセレクトボックスが表示されます。
自動送信を可能にするJavaScriptの追加
次に、ユーザーがカテゴリーを選択すると自動的にフォームが送信されるように、JavaScriptを追加します。これにより、選択したカテゴリーに属する記事が即座に絞り込まれて表示されます。
<script type="text/javascript">
document.getElementById('cat').onchange = function() {
document.getElementById('category-select').submit();
};
</script>このスクリプトをセレクトボックスの下に配置すると、カテゴリーが選択されたときに自動でフォームが送信されます。
タグのセレクトボックスを使った絞り込み
同様に、タグを使用して記事を絞り込むセレクトボックスも作成できます。taxonomyパラメーターをpost_tagに変更することで、タグのセレクトボックスが表示されます。
<form action="<?php echo esc_url(home_url('/')); ?>" method="get" id="tag-select">
<?php
$args = array(
'show_option_all' => '全てのタグ',
'orderby' => 'name',
'order' => 'ASC',
'show_count' => 1,
'hide_empty' => 0,
'echo' => 1,
'name' => 'tag',
'id' => 'tag',
'class' => 'postform',
'taxonomy' => 'post_tag',
'value_field' => 'term_id',
);
wp_dropdown_categories($args);
?>
</form>
<script type="text/javascript">
document.getElementById('tag').onchange = function() {
document.getElementById('tag-select').submit();
};
</script>このコードを使用することで、タグごとに記事を絞り込むことができます。
まとめ
この記事では、WordPressでカテゴリーやタグをセレクトボックス形式で表示し、ユーザーが選択した際に自動的に記事を絞り込む方法を解説しました。簡単なコードを追加するだけで、ユーザーの操作性が向上し、サイトの利便性が高まります。ぜひ、あなたのサイトでもこの機能を取り入れてみてください。
