前提・実現したいこと
ワードプレス(素材サイト)で、絞り込み検索フォームを作っています。
項目としては、下記のとおりです。
●キーワード
●カテゴリ1(セレクトボックス。jquery.hierselect.jsを使用し、カテゴリ1で選んだ子カテゴリーをカテゴリ2、カテゴリ2で選んだ子カテゴリーをカテゴリ3に自動で表示しています)
●カテゴリ2(セレクトボックス)
●カテゴリ3(セレクトボックス)
●シリーズ
タグ(チェックボックス、AND検索)
キーワード(チェックボックス、AND検索)
●がついている項目にhtmlでname="s"が入っています。
この状態で検索結果を表示すると、うまく機能せず関係ない記事が出てきてしまいます。
検索結果のURLは下記のとおりです。
サイトURL?s=安い&s=食べ物&s=フルーツ&s=りんご&s=ふじ&and-or=AND&tag%5B%5D=aomori&tag%5B%5D=iwate&and-or=AND&s=赤い&s=まるい
このように、s=が別々になるとうまく機能しなくなっているようです。(タグだけの検索は大丈夫でした)
試しにs=に+またはスペースで1つにまとめるとうまくいきました。
s=にまとめる方法、またはそれ以外で解決できる方法をご存知のかたがいらっしゃいましたら
ご教授いただけないでしょうか。
初心者のため何かとおかしな箇所があるかもしれませんがお許しください。
どうぞよろしくお願いいたします。
該当のソースコード
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" id="form"> <input type="text" name="s" list="keyword-list" placeholder="キーワードを入力してください" id="key"> <div>カテゴリ1</div> <select id="parent" data-hier-target="#child" data-hier-name="parent-id" name="s"> <option value="食べ物">食べ物</option> <option value="その他">その他</option> </select> <div>カテゴリ2</div> <select id="child" data-hier-target="#child2" data-hier-name="parent-id2" name="s"> <option value="フルーツ" data-parent-id="食べ物">フルーツ</option> <option value="やさい" data-parent-id="食べ物">やさい</option> <option value="スプーン" data-parent-id="その他">スプーン</option> </select> <div>カテゴリ3</div> <select id="child2" data-hier-target="#child3" data-hier-name="parent-id3" name="s"> <option value="りんご" data-parent-id2="フルーツ">りんご</option> <option value="トマト" data-parent-id2="やさい">トマト</option> </select> <div>シリーズ</div> <!-- child --> <select id="child3" name="s"> <option value="ふじ" data-parent-id3="りんご">ふじ</option> <option value="ミニトマト" data-parent-id3="トマト">ミニトマト</option> </select> <div>タグ</div> <select name="and-or" id="select-and-or"> <option value="AND">[AND] チェックした全てのタグを含む</option> <option value="OR">[OR] 以下のどれかのタグを含む</option> </select> <div> <?php $tags = get_terms( 'post_tag' ); $checkboxes = ''; foreach($tags as $tag) : $checkboxes .='<input type="checkbox" name="tag[]" value="'.$tag -> slug.'" id="tag-'.$tag->term_id.'" /><label for="tag-'.$tag->term_id.'">'.$tag->name.'</label>'.' '; endforeach; print $checkboxes; ?> </div> <div>チェックボックス キーワード</div> <select name="and-or" id="select-and-or"> <option value="AND">[AND] チェックした全てのタグを含む</option> <option value="OR">[OR] 以下のどれかのタグを含む</option> </select> <label><input type="checkbox" name="s" value="赤い">赤い</label> <label><input type="checkbox" name="s" value="まるい">まるい</label> <p><input type="submit" value="検索"></p> </form>
補足情報(FW/ツールのバージョンなど)
WordPress バージョン 4.9.6–ja