wordpressでカテゴリやタグを選択できる複合的な検索フォームを作ってみた

2017年08月24日(木) 1,398 vi

wordpressでカテゴリやタグを選択できる複合的な検索フォームを作ってみた

wordpressでカテゴリやタグを選択できる複合的な検索フォームを作ってみたので、メモ

1.検索フォームの設置

何か適当な固定ページ、もしくは検索フォームを設置したいページに以下コードをいれる

<form method="get" action="<?php bloginfo('url'); ?>">

<p>キーワード</p>
<label>検索</label>
<input type="text" name="s" id="s" placeholder="検索" />

<p>カテゴリー一覧</p>
<?php
$categories = get_categories();
foreach($categories as $category) :
?>
<label>
<input type="checkbox" name="catnum[]" value="<?php echo $category->term_id; ?>"><?php echo $category->name; ?>
</label>
<?php endforeach; ?>



<p>タグの一覧</p>

<label><input type="radio" name="radio" value="AND" />AND</label>
<label><input type="radio" name="radio" value="IN" />OR</label>

<?php
$taxonomy_name = 'post_tag';
$taxonomys = get_terms($taxonomy_name);
if(!is_wp_error($taxonomys) && count($taxonomys)):
    foreach($taxonomys as $taxonomy):
        $tax_posts = get_posts(array('post_type' => get_post_type(), 'taxonomy' => $taxonomy_name, 'term' => $taxonomy->slug ) );
        
?>
<label>
<input type="checkbox" name="post_tag[]" value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?>
</label>

<?php     
endforeach;
endif;
?>

<input type="submit" value="検索" />

</form>

2.検索検索結果ページの作成

wordpressの場合、テーマファイルの直下にある「search.php」が検索結果のページのファイルになるため、
この「search.php」を改造。

//get値の受け取り
$s = $_GET['s'];
$post_tag = $_GET['post_tag'];
$radio = $_GET['radio'];
$catnum = $_GET['catnum'];

//検索条件の設定1
$arg = array (
    'tax_query' => array(
        'relation' => 'OR',				//以下検索配列の結合の仕方 ANDかOR検索
        array(
            'taxonomy'=>'category',		//カテゴリを指定
            'terms'=> $catnum,			//カテゴリーのidを指定
            'include_children'=>false,	//子カテゴリーを含めない
            'field'=>'term_id',			//対象とするフィールをterm_idに指定
            'operator'=>'IN'			//いずれかに一致させる(IN)または全てに合致(AND),いずれにも一致しない(NOT IN)
        ),
        array(
            'taxonomy'=>'post_tag',		//タグを指定。こちらはタグで検索している
            'terms'=> $post_tag,
            'include_children'=>false,
            'field'=>'slug',
            'operator'=>$radio
        )
    )
);

//検索結果の設定2
query_posts( array(
    'tax_query' => $arg,
    's' => $s,
    )
);
?>

<p>検索結果</p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<!-- 検索結果が表示される部分 -->
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

<?php endwhile; else : ?>
 
<p>該当なし</p>
 
<?php endif; wp_reset_query(); ?>

3.カスタマイズ

サンプルはこんな感じ検索ページサンプル

あとは、随所にHTMLなり、CSSで調整して、見栄えを整えればOK!

「search.php」で「tax_query」の箇所をさまざまな設定にしたり、配列をつけたりすることによって、カスタムフィールの値で検索したり、他にもさまざまな検索が可能となる。

wordpressでカテゴリやタグを選択できる複合的な検索フォームを作ってみた 1,398 vi  記事:yukimaru

作ってみたの最新記事