WordPressで複数の条件を組み合わせた検索フォーム

16Nov2017

WordPressで複数の条件を組み合わせた検索フォーム

ページコンテンツ

1 不動産サイトのような絞り込み検索

不動産サイトのような絞り込み検索

フォーム側

<form method="get" id="searchform" action="http://kotori-blog.com/test/">
<label for="s" class="assistive-text">検索</label>
<input type="text" class="field" name="s" id="s" placeholder="検索" />
 
<select name="catnum" style="margin-top:20px;">
    <option value="" selected>カテゴリ</option>
                                    <?php
$categories = get_categories('parent=0');
foreach($categories as $category) :
?>
    <option value="<?php echo $category->term_id; ?>"><?php echo $category->cat_name; ?></option>
<?php endforeach; ?>
</select>
 
<select name="placenum" style="margin-top:20px;">
    <option value="" selected>間取りタイプ(カスタムタクソノミー)</option>
<?php
$taxonomy_name = 'place';
$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 ) );
        if($tax_posts):
?>
<option value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></option>
<?php
        endif;
    endforeach;
endif;
?>
</select>
 
<select name="type" style="margin-top:20px;">
    <option value="" selected>ルームタイプ(カスタムフィールドのセレクトボックス)</option>
    <option value="アパート">アパート</option>
    <option value="マンション">マンション</option>
    <option value="一戸建て・その他">一戸建て・その他</option>
</select>
 
<div style="margin-top:20px">家賃(カスタムフィールドのテキストフィールド)</div>
<select name="low" style="margin-top:5x;">
    <option value="0" selected>下限なし</option>
    <option value="20000">20,000円以上</option>
    <option value="25000">25,000円以上</option>
    <option value="30000">30,000円以上</option>
    <option value="35000">35,000円以上</option>
    <option value="40000">40,000円以上</option>
    <option value="45000">45,000円以上</option>
    <option value="50000">50,000円以上</option>
    <option value="55000">55,000円以上</option>
    <option value="60000">60,000円以上</option>
    <option value="65000">65,000円以上</option>
    <option value="70000">70,000円以上</option>
    <option value="75000">75,000円以上</option>
    <option value="80000">80,000円以上</option>
</select>　～<br />
<select name="high" style="margin-top:5px;">
    <option value="20000">20,000円以下</option>
    <option value="25000">25,000円以下</option>
    <option value="30000">30,000円以下</option>
    <option value="35000">35,000円以下</option>
    <option value="40000">40,000円以下</option>
    <option value="45000">45,000円以下</option>
    <option value="50000">50,000円以下</option>
    <option value="55000">55,000円以下</option>
    <option value="60000">60,000円以下</option>
    <option value="65000">65,000円以下</option>
    <option value="70000">70,000円以下</option>
    <option value="75000">75,000円以下</option>
    <option value="80000">80,000円以下</option>
    <option value="9999999" selected>上限なし</option>
 
</select>
 
<div style="margin-top:20px">こだわり(タグ)</div>
<?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 ) );
        if($tax_posts):
?>
<label><input type="checkbox" name="post_tag[]" value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></label><br>
<?php
        endif;
    endforeach;
endif;
?>
 
<div>こだわり(カスタムフィールドのチェックボックス)</div>
<label><input type="checkbox" name="kodawari[]" value="駐車場あり">駐車場あり</label><br>
<label><input type="checkbox" name="kodawari[]" value="バス・トイレ別">バス・トイレ別</label><br>
<label><input type="checkbox" name="kodawari[]" value="ペット相談">ペット相談</label><br>
<label><input type="checkbox" name="kodawari[]" value="2階以上住戸">2階以上住戸</label>
 
<input type="submit" class="submit" name="submit" id="searchsubmit" value="検索" />
</form>

検索結果

<?php
$s = $_GET['s'];
$catnum = $_GET['catnum'];
$placenum = $_GET['placenum'];
$type = $_GET['type'];
$low = $_GET['low'];
$high = $_GET['high'];
$post_tag = $_GET['post_tag'];
$kodawari = $_GET['kodawari'];
 
if($catnum){
    $taxquerysp[] = array(
            'taxonomy'=>'category',
            'terms'=> $catnum,
            'include_children'=>false,
            'field'=>'term_id',
            'operator'=>'AND'
            );
}
 
if($post_tag){
    $taxquerysp[] = array(
            'taxonomy'=>'post_tag',
            'terms'=> $post_tag,
            'include_children'=>false,
            'field'=>'slug',
            'operator'=>'AND'
            );
}
 
if($placenum){
    $taxquerysp[] = array(
            'taxonomy'=>'place',
            'terms'=> $placenum,
            'include_children'=>false,
            'field'=>'slug',
            'operator'=>'AND'
            );
}
$taxquerysp['relation'] = 'AND';
 
if($kodawari){
    foreach($kodawari as $val){
        $metaquerysp[] = array(
                'key'=>'kodawari',
                'value'=> $val,
                );
    }
}
if($type){
    $metaquerysp[] = array(
            'key'=>'type',
            'value'=> $type,
            'compare'=>'=',
            );
}
$metaquerysp[] = array(
            'key'=>'price',
            'value'=>array( $low, $high ),
            'compare'=>'BETWEEN',
            'type'=>'NUMERIC',
            );
$metaquerysp['relation'] = 'AND';
 
?>
 
<?php if($s){ ?>検索キーワード：<?php echo $s; ?><br><?php } ?>
<?php if($catnum){ ?>カテゴリ：<?php echo get_cat_name($catnum); ?><br><?php } ?>
<?php if($placenum){ ?>間取りタイプ：<?php echo get_term_by('slug',$placenum,"place")->name; ?><br><?php } ?>
<?php if($type){ ?>ルームタイプ：<?php echo $type; ?><br><?php } ?>
<?php if($low == 0 && $high == 9999999){}else{ ?>家賃：<?php if($low == 0){ ?>下限なし<?php }else{ echo number_format($low).'円'; } ?> ～ <?php if($high == 9999999){ ?>上限なし<?php }else{ echo number_format($high).'円';} ?><br>
<br><?php } ?>
<?php
if (is_array($cutnum)) { ?>カテゴリ：<?php
foreach($cutnum as $val){
if ($val === end($cutnum)) {
echo get_cat_name($catnum);
    }else{
echo get_cat_name($catnum).", ";
}
}
}
 ?>
<?php
if (is_array($post_tag)) { ?>こだわり(タグ)：<?php
foreach($post_tag as $val){
if ($val === end($post_tag)) {
echo get_term_by('slug',$val,"post_tag")->name;
    }else{
echo get_term_by('slug',$val,"post_tag")->name.", ";
}
}
 ?><br><br><?php } ?>
<?php if (is_array($kodawari)) { ?>こだわり(カスタムフィールドのチェックボックス)：<?php
if (is_array($kodawari)) {
foreach($kodawari  as $val){
if ($val === end($kodawari)) {
echo $val;
    }else{
echo $val.", ";
}
}
}
}
 ?>
 
<?php
 
query_posts( array(
    'tax_query' => $taxquerysp,
    'meta_query' => $metaquerysp,
    's' => $s,
    )
);
 
?>
 
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div><?php the_title(); ?></div>
<div><?php the_content(); ?></div>
            <?php endwhile; else : ?>
 
該当なし
 
            <?php endif;wp_reset_query(); ?>

ページネーション

<?php
$s = $_GET['s'];
$catnum = $_GET['catnum'];
$placenum = $_GET['placenum'];
$type = $_GET['type'];
$low = $_GET['low'];
$high = $_GET['high'];
$post_tag = $_GET['post_tag'];
$kodawari = $_GET['kodawari'];
 
if($catnum){
    $taxquerysp[] = array(
            'taxonomy'=>'category',
            'terms'=> $catnum,
            'include_children'=>false,
            'field'=>'term_id',
            'operator'=>'AND'
            );
}
 
if($post_tag){
    $taxquerysp[] = array(
            'taxonomy'=>'post_tag',
            'terms'=> $post_tag,
            'include_children'=>false,
            'field'=>'slug',
            'operator'=>'AND'
            );
}
 
if($placenum){
    $taxquerysp[] = array(
            'taxonomy'=>'place',
            'terms'=> $placenum,
            'include_children'=>false,
            'field'=>'slug',
            'operator'=>'AND'
            );
}
$taxquerysp['relation'] = 'AND';
 
if($kodawari){
    foreach($kodawari as $val){
        $metaquerysp[] = array(
                'key'=>'kodawari',
                'value'=> $val,
                );
    }
}
if($type){
    $metaquerysp[] = array(
            'key'=>'type',
            'value'=> $type,
            'compare'=>'=',
            );
}
$metaquerysp[] = array(
            'key'=>'price',
            'value'=>array( $low, $high ),
            'compare'=>'BETWEEN',
            'type'=>'NUMERIC',
            );
$metaquerysp['relation'] = 'AND';
 
?>
 
<?php if($s){ ?>検索キーワード：<?php echo $s; ?><br><?php } ?>
<?php if($catnum){ ?>カテゴリ：<?php echo get_cat_name($catnum); ?><br><?php } ?>
<?php if($placenum){ ?>間取りタイプ：<?php echo get_term_by('slug',$placenum,"place")->name; ?><br><?php } ?>
<?php if($type){ ?>ルームタイプ：<?php echo $type; ?><br><?php } ?>
<?php if($low == 0 && $high == 9999999){}else{ ?>家賃：<?php if($low == 0){ ?>下限なし<?php }else{ echo number_format($low).'円'; } ?> ～ <?php if($high == 9999999){ ?>上限なし<?php }else{ echo number_format($high).'円';} ?><br>
<br><?php } ?>
<?php
if (is_array($cutnum)) { ?>カテゴリ：<?php
foreach($cutnum as $val){
if ($val === end($cutnum)) {
echo get_cat_name($catnum);
    }else{
echo get_cat_name($catnum).", ";
}
}
}
 ?>
<?php
if (is_array($post_tag)) { ?>こだわり(タグ)：<?php
foreach($post_tag as $val){
if ($val === end($post_tag)) {
echo get_term_by('slug',$val,"post_tag")->name;
    }else{
echo get_term_by('slug',$val,"post_tag")->name.", ";
}
}
 ?><br><br><?php } ?>
<?php if (is_array($kodawari)) { ?>こだわり(カスタムフィールドのチェックボックス)：<?php
if (is_array($kodawari)) {
foreach($kodawari  as $val){
if ($val === end($kodawari)) {
echo $val;
    }else{
echo $val.", ";
}
}
}
}
 ?>
 
<?php
 
query_posts( array(
    'tax_query' => $taxquerysp,
    'meta_query' => $metaquerysp,
    's' => $s,
    'posts_per_page' => 1,
    'paged' => $paged,
    )
);
 
?>
 
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div><?php the_title(); ?></div>
<div><?php the_content(); ?></div>
            <?php endwhile; else : ?>
 
該当なし
 
            <?php endif; ?>
 
<?php
wp_pagenavi(); //ページ送り
wp_reset_query();
 ?>

引用元：

http://kotori-blog.com/wordpress/refinement_search/

便利でよく使うCSS関数

POST/GETを使った際にリロードによる2重送信を防止する

ピックアップ記事

2019/10/23
Gutenberg ブロックエディタに設定した内容をカスタムフィールドを含め他のページで表示する

他のページで設定したブロックの内容を表示したかった時の覚書。汎用性からショートコードにまとめ…
2018/12/9
Really Simple CSV Importerプラグインでパーマリンクの末尾に付く「-2」をSQLで一括削除

大量の記事をCSVで一気に流し込めるプラグイン「Really Simple CSV Importer…
2018/7/24
【令和追加】date()関数を日本の元号に対応させる

未だに明治やら大正やら昭和やら平成やら日本の元号がちょくちょく利用されますが、素晴らしいdate()…

WordPressで複数の条件を組み合わせた検索フォーム

不動産サイトのような絞り込み検索

フォーム側

検索結果

ページネーション

関連記事

カスタム投稿タイプとタクソノミー、ターム追加スニペット

WordPressのヘッダーから余分なMETA情報や絵文字関連を…

ログイン画面をカスタマイズ

WordPressのナビゲーションメニューに説明を使う

投稿ページが複数カテゴリに紐づく場合のパンくずリスト

カテゴリをチェックした時に、並び順が変更にならないようにする

おすすめ記事

コメント

カテゴリー

ピックアップ記事

最新記事

アーカイブ