コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームWordPressWP_Queryを使ったタクソノミーのチェックボックス絞り込み検索フォームの作り方WordPress2018.09.4WP_Queryを使ったタクソノミーのチェックボックス絞り込み検索フォームの作り方ここでは、プラグインを使わずにタクソノミーのチェックボックスを使った絞り込み検索の作り方についてお話します。はじめにお断りしておきますが、検索結果ページでのページネーションについてはここでは触れませんのでご了承ください。ちなみにチェックボックスではなく、セレクトボックスによる絞り込み検索の方法については下記で詳しくお話しています。2018.08.29WordPress|検索フォームの仕組みとセレクトボックスでの絞り込み検索WordPressの検索フォームを使って絞り込み検索とかしたいな~とか思ったら、そもそも検索フォームの仕組みを理解していなかったとに気がついたのでまとめてみました。ここではWordPressのことはある程度、理解しているけど検索フォームの仕組みが分から...とりあえず、コードだけ知りたい方はこのまま読み進めていただいて大丈夫ですが、内容をちゃんと理解したい方で検索フォームについてあまり詳しくないという方は、はじめに下記の記事を読むと理解がスムーズだと思います。2018.09.01サイト内検索の仕組みとURLに付けるパラメータここでは、WordPressのサイト内検索をアレンジしたい方が予備知識として知っておいた方がよいパラメータについてお話します。私が検索フォームについて知らなかったときに教えて欲しかった内容ですので、ぜひ参考にしてみてください。コードの解説:検索結果タクソノミーのチェックボックスが備わったサイト内検索フォームとりあえず、結論から見てみましょう。検索フォーム下記のコードは、検索フォーム(searchform.php)として使うコードです。/></form>上記のコードで編集すべきところは、「//タクソノミーをスラッグで指定」とコメントされている行にタクソノミーを指定するところだけです。すると指定したタクソノミーに登録されているターム(タグ)がチェックボックスとして表示されるようになります。複数のチェックボックスを指定した場合のAND検索・OR検索も選択できるようになっています。このコードを検索フォーム(searchform.php)として設置すると、下記のような検索フォームが出力されます。表示イメージボタンで表示を切り替えてご覧ください。CodePen.今回のフォームは、WordPressの初期設定で入っているHTML5バージョンの検索フォームに新しいフォームを追加しただけですので、ここでは下記の追加したコードだけを解説していきます。value="IN">OR</option></select>この検索フォームでは、オリジナルのパラメータを使っているため、検索結果ページ(search.php)も編集しないと正しく機能しませんので設定していきます。検索結果のコード下記のコードは、検索結果のテンプレート(search.php)の中の投稿を表示させるループを含めたソースコードです。ループがかなり適当な感じですが、お使いのテンプレートに応じていろいろカスタマイズしてみてください。?><p>お探しの記事はありませんでした。?>コードの解説:検索フォームそれでは、実際にコードの詳細を見ていきましょう。説明を見たいコードの行をクリックして説明文をお読みください。//タクソノミーをスラッグで指定ここではチェックボックスを表示させたいタクソノミーを指定して、それを変数$my_taxonomyに格納しています。WordPressの投稿で使うタグを指定したいときは、”post_tag”とすればOKです。カスタムタクソノミーの場合はそのスラッグを入れてください。get_terms($my_taxonomy);get_terms()は指定したタクソノミーのターム情報を取得する関数です。取得したターム情報を変数$termsに格納します。$term):if(変数):・・・で「もし変数に値が入っているときは・・・」という意味です。ここでは、変数$termsにターム情報が入っている場合にforeach文が実行されます。処理する内容endforeachという形で配列の中の要素を1つずつ変数に格納して処理します。ここでは、タクソノミーの中にあるタームを1つずつ取り出してチェックボックスを出力することが目的です。?></label>この部分は、foreach文の処理の内容です。チェックボックスを出力しています。name="term_slug[]"という形でname属性の名前のあとに[]があるのは、チェックボックスが複数選択されたときに配列として値を渡すためです。?>はターム名をそれぞれ出力しています。?>endforeachはforeach文の終了を意味します。?>”>type="hidden"で隠しフォームを入れています。?>で最初に指定したタクソノミーのスラッグを値として渡します。id=”and_or”>セレクトボックスでAND検索・OR検索ができるようにしています。説明を見たいコードの行をクリックすると説明文が開きます。$_GET[‘パラメータ名’];このようにすると検索フォームで送った値を検索結果ページで受け取ることができます。ここでは、検索ワードを変数$sに格納します。$_GET[‘my_taxonomy’];変数$my_taxonomyにタクソノミーのスラッグを格納しています。$_GET[‘term_slug’];チェックボックスで選択されたタームのスラッグを配列として変数$term_slugに格納します。$_GET[‘and_or’];“AND”もしくは”IN”のうち、検索フォームで選択された値が変数$and_orに入ります。if($term_slug){「もし、変数$term_slugに値が入っていれば・・・」という意味になります。array(tax_query関数で使用するパラメータと値を、選択されたスラッグの分だけ配列にして変数$tax_queryに格納しています。$my_taxonomy,タクソノミーの指定を行います。ここでは、変数$my_taxonomyに格納された値を指定します。$term_slug,タームの指定を行います。ここでは、変数$term_slugに格納された値を指定します。false,include_childrenは子タームがある場合にそれを含めるかどうかを指定します。ここでは「含めない(false)」としています。‘slug’,タームをどういう形式で指定するかを決めます。ここではスラッグで指定します。$and_or'operator'は、AND検索・OR検索を指定するところです。セレクトボックスで選択された値(変数$and_or)を指定します。array(WP_Queryという関数で指定する内容をあらかじめ変数$argsに代入しています。WP_Queryは、どんな投稿を出力するかをリクエストするための関数です。$tax_query,tax_queryでは、表示させたいカスタムタクソノミーの投稿に関する設定を行います。下記がその骨組みになります。投稿の設定),)上の行ですでに変数$tax_queryに内容を入れておいたので、これを指定します。$s,検索ワードを指定しています。-1'posts_per_page'は、1ページあたりの表示件数を指定します。ここでは全件表示を指定しています。クラス名()はクラスのインスタンスを作るときの公式です。この辺りはphpの知識が必要です。ここでは、投稿に関する指定が入っている変数$argsをWP_Query関数の引数にして、作り出した「投稿」を変数$the_queryに格納しています。?>変数$the_queryに「投稿」が入っているかをチェックしています。全体としては下記のような構成になっています。?>検索結果に表示される投稿を操作したので、最後にwp_reset_postdataでリセットしておきます。?>該当する投稿がなかった場合になります。<p>お探しの記事はありませんでした。?>endifはif文の終了です。以上が、WP_Queryを使ったタクソノミーのチェックボックス絞り込み検索フォームの作り方でした。