超簡単！WordPressに絞り込み検索を設置する方法

※当サイトはWeb広告を利用しています

キーワード、カテゴリー、タグの中から任意の組み合わせを選択して、該当する投稿だけを表示させる（絞り込み検索）方法を紹介します。

WordPressの絞り込み検索といえば「WP Custom Fields Search」というプラグインが有名ですが、プラグインを使用せずともコードを貼るだけで超簡単に設置できます。

スポンサードリンク

設置コードと解説

以下のコードをindex.phpやsingle.phpなど絞り込み検索を設置したい箇所に貼ってください。

<form method="get" action="<?php bloginfo( 'url' ); ?>">
<input name="s" id="s" type="text" placeholder="キーワードを入力"/><br /><br />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=▽カテゴリーを選択&exclude=1,2,3'); ?>
<?php $tags = get_tags('exclude=1,2,3'); if ( $tags ) : ?>
<select name='tag' id='tag'>
<option value="" selected="selected">▽タグを選択</option>
<?php foreach ( $tags as $tag ): ?>
<option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?><br />
<input id="submit" type="submit" value="検索" />
</form>

3行目でカテゴリーを読み込ませています。1〜3の数字は除外したいカテゴリーのIDです。任意のものに置き換えてください。「▽カテゴリーを選択」となっているところは、プルダウンの最初に表示されるテキストです。例えば「エリアを選択」などに変更できます。

4行目でタグを読み込ませています。1〜3の数字は除外したいタグのIDです。任意のものに置き換えてください。「▽タグを選択」となっているところも任意のテキストに置き換えられます。

IDを調べる方法は「WordPressで番号（ID）を調べる（投稿・固定ページ・カテゴリー・タグ・カスタム投稿タイプ）」を参照してください。

inputタグにCSSのclassなどを付与することでフォームのデザインを調整できます。

キーワード、カテゴリー、タグの様々な掛け合わせで検索できます。高機能ではありませんが要件を満たせられそうであれば使用してみてください。