WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説

今回は、需要があるかもしれない『WordPressのカスタムフィールド値を使った、記事の絞り込み・検索機能の実装』について、管理人が実際にやってみた内容を元にして取り上げます。つけるサイトは、いつもの著作権フリー曲サイトSSF。『下準備（サブループ検索用ファイル）・カスタムフィールド設定・フォームやクエリなど』という流れで、一部始終をさっそく見ていってみましょう。

下準備～サブループ検索用ファイル制作＆wp-blog-header.phpを読んで、WPの記事を取れるようにしておく

まずは、下準備からいきます。『カスタムフィールドの値で絞り込み・検索を行う』というのをやりたかったので、今回つけるサイトのフォルダ内に『カスタム検索用のファイル』を用意しました。テーマに入っている『search.php』だと、メインループ用になっているからです（タイトルや本文をスキャンするタイプの検索もする）。同じサブドメインでやりたかったので、この位置に入っています（テーマに組み込むこともできますが、今回は省きます）。

あとは、検索用ファイルの最初の部分で『require($_SERVER[‘DOCUMENT_ROOT’] .’/wp-blog-header.php’);』と書いて、wp-blog-header.phpを読み込んでおきます。これをやっておくと、WP構成ファイル以外の表示ファイルを追加しても、そこでWPのファンクションや記事表示ができるようになります。詳しくは過去記事もご覧ください。

◆参考（過去記事）別ディレクトリでの記事の管理・表示を、１つのWordPressを使いまわして対応（カスタム投稿・wp-blog-header.php）
https://sounds-stella.jp/music-creation/archives/7224/how-to-manage-anothersite-with-one-wordpress/

カスタムフィールドの設定（Smart Custom Fieldsプラグイン使用）

カスタムフィールドの設定には『Smart Custom Fieldsプラグイン』を使用しました。フィールドが２～３個の場合はWPのフィールド機能で十分ですが、項目が増えた場合は、プラグインのほうが管理がラクです。今回つけたSSFが『著作権フリー曲サイト』だったので、それに合わせていくつかフィールドを作りました。 （サイトの運営状況によって、今後フィールドやクエリは変わっていくでしょう。）

フィールドの設定例（項目によりチェック・ラジオボタン・真偽値・テキストを切り替える）

まずは、フリー素材曲の『雰囲気（atmos）』という項目を。あんまり専門的な用語じゃないほうが、ユーザーは使いやすいと思います。ファイルによっては複数の雰囲気属性を持つものがあるので、『チェックボックスタイプ』を検討。 ただし『andで複数選択すると矛盾するものを選ばれたとき出てこない』ので、『フロントのフォームはラジオボタンタイプ』にしてあります（管理画面のタイプとフロントのフォームは別々にできます）。

次はサブジャンル（sub_genre）。こちらは複数選択になるとめんどくさそうだったので（そもそも境目があいまいなものも多い）、ひとつの記事に一個ずつ指定できるように、『ラジオボタンタイプ』のフィールドを作成。

こちらは、現在のところ検索には影響しませんが、今後『会員には未圧縮wavデータor曲集めてアルバムにして売る』みたいなのも考えていたので、『wavデータがあるかないか』といったフィールドを（wav_available）。これは『真偽値フィールド』にします。

以前、BPM数値で絞るというのもやりましたが、よりわかりやすく『言葉でも絞れる』というのを実装します。こちらは選択ボックスをチョイス。『BPM110以下はゆっくり系』みたいに、ある程度目安を決めておきます。

記事ページでの表示のしかた

フィールドをすべて設定したあとの、SSF記事投稿画面です。項目によっては横並びにしてやったほうが、マウススクロール量が減って更新しやすくなります。あとは、記事ごとにフィールドの値を埋めていきます。

データベースの入り方

データベースに、値がどのように格納されているかも確認してみましょうか。適当に、id964番の記事をチョイスして見てみます。一つのキーに対し複数選択できるものについては、meta_idが別々で入っています。

『Advanced Custom Fields』だと、形式が異なっていて『acfだと一つのmeta_idにたいして、複数のvalueがシリアライズされた配列』という形で入っている点が異なります（管理人の感想としては、シンプルなクエリで取れるのでこっちが好みです。）。

WordPressのカスタムフィールド値で記事を絞り込み・検索するコード（フォーム・クエリ・表示部分）と解説

SSFにつけたコードです（フォーム・クエリ・表示部分）。ここには書いていませんが、ヘッダー内にはwp-blog-header.phpを読み込むコードが書いてあります。フォームのデータを受け取るファイルはc-search.phpで、表示ファイルと一緒（クエリによって内容が変わる感じ）です。

GETで、フォームの内容を変数に格納できるようにする

特に個人情報などが含まれるわけではないのでメソッドはGETです（メルアドとか、表に出したくない情報が入るときはpostにする、パラメーターつけたままシェアする人もいるので）。フォームの内容を、$atmosや$sub_genreといった変数に格納できるようにしました。

フォーム・選択されている状態がわかるように、格納された変数があるときはchecked出力

フォームで検索させたい言葉をvalue指定して、その値が変数に入るようにします。その変数がある場合は（isset($変数)）、checked出力するようにします。これがあるとユーザーがどれを選択しているかわかるようになります（アドレスバーで確認する人は少数かも）。

そのほか、『BPM数値で検索』というところがありますが、『あいうえお』みたいな文字が入るとよろしくないので、数値だけ入るようにしています。

投稿タイプpostだと、パラメーターはシンプル

最初のarrayで、『まずは条件指定していないときは全件出す』みたいにしたかったので、『’posts_per_page’ => -1,』を指定。ページ当たり何件のパラメーターで、これで全件表示ができます。

post_typeにattachment（添付ファイル）やカスタム投稿、カテゴリ指定などが入ってくると、パラメータが複雑になりますが、投稿タイプはデフォルトのpostだったので、ここら辺はサックリ対応できます。

meta_queryでkeyやvalueを指定

isset($変数〇〇)の場合は、meta_queryの中にカスタムフィールドのkeyやvalueが入るようにします。フォームからくる値とデータベース内の値は基本的にそろうように作ってあるので、’compare’は’=’（一致）が良いかもしれません （’compare’ => ‘IN’だと、valueに配列を入れられる。最初は’IN’で作ってあって、両方テストしたら、クエリ実行時間は’=’ も ‘IN’も、どちらも0.0007 秒。）

数値を使う場合は『’type’=>’NUMERIC’』

BPMの項目では数値が入ってきます。数値形式で比較したいときは『’type’=>’NUMERIC’』を。フィールドの値のタイプを指定するパラメーターで、他に『CHAR　固定長文字列』『DATE　日付』『BINARY バイナリ型データ』などがあるようです。管理人はまだ、WP検索でバイナリ型データのフィールドを扱う案件には当たったことがありません。

wp_count_postsやphpのcount($配列)を使って、〇〇件中◇◇件、みたいな表示を

何件あるかわかるのは、ネットショップなどでよくある機能（サイトの記事検索などでもよくあります）、これを実装するにはcountなどを使います。WP組み込みのwp_count_postsで、publish（公開しているもの）で全部の件数を取得。

〇〇件中◇◇件、みたいな表示は、phpのcountで配列の要素をカウントしました（$posts_arrayに、クエリに該当する記事が入っている）。

検索結果のタイトルやリンク先、添付ファイル（オーディオ）をループで表示していく

今回の件では、表示部分はforeachのループで回しました。mp3_passはフィールドに入っているので、id指定・get_post_metaでkey指定して取るというかたちに。 WP組み込みのthe_permalinkやthe_titleはそのまま使えます。

WPのカスタムフィールド記事検索システムを実装してみたサイト

SSF　楽曲検索ページ https://ss-freemusic.sounds-stella.jp/c-search.php

管理人の著作権フリー曲サイトにつけました。正直、検索システムをつけるほど曲がいっぱいあるわけではありませんでした（笑）。しかし、これを作っている最中に、お取引先さまから商品やスタッフを検索したり絞り込んだりするサイトの構築を依頼されたので、アイデアを使えてお役に立てたかもしれません。

あとは、曲が増えてきたりした段階で、フィールド構成やクエリを修正して使いやすいようにしていければと思います。

あとがき・まとめ

まとめるとこんな感じでした。今後フィールドやクエリの改善はしていきますが、WPのフィールド検索システム作り方の流れがつかめたかと思います。こんかいみたいなタイプのサイトでなくても『ネットショップ・不動産・車販売・宿泊施設検索・学校ごとに情報まとめている予備校』などのジャンルでは利用できるかもしれません。