WordPressでWP Custom Fields SearchとAdvanced Custom Fieldsを使ってカスタムフィールド検索

WordPressを使って、プログラムなしでカスタムフィールド検索を行いたいと思い調べてみました。

どうやらWP Custom Fields Searchというプラグインがカスタム検索に向いているようです。
また、Advanced Custom Fieldsを使うと自由にカスタムフィールドを作りことが可能です。

これらの2つのプラグインを組み合わせた簡易的な検索画面の作成例はなかなか見つからなかったので、今回、この二つのプラグインを合わせて簡単な検索画面を作ってみました。

スポンサーリンク

Advanced Custom Fieldsのインストールのインストールと設定

まず、Advanced Custom Fieldsをインストールします。

image

Customise WordPress with powerful, professional and intuitive fields

Advanced Custom Fieldsをインストール後、左下の「カスタムフィールド」ボタンを押してカスタムフィールドを作成します。

まず、フィールドグループの名前を付けます。ここでは「フィールドグループ1」とします。

次に作成したフィールドグループに3個フィールドを作成します。3個それぞれのフィールドを編集します。

フィールドラベルは、「Label1」「Label2」「Label3」とします。

フィールド名は、「selectbox1」「selectbox2」「selectbox3」とします。

フィールドタイプは、3個とも「セレクトボックス」とします。
この項目は、カスタムフィールドのタイプ指定で、以下の設定が可能です。
基本:テキスト、テキストエリア、数値、メール、パスワード
Content:Wysiwygエディタ、画像、ファイル
選択肢:セレクトボックス、チェックボックス、ラジオボタン、真/偽
Relatinal:ページリンク、投稿オブジェクト、関連、タクソノミー

フィールド記入のヒントは、作成者向けのヒント、編集時に表示されるものですが、空にしておきます。

必須か?は、「はい」にチェックします。

選択しは、1個めのLabel1に対しては
1:1
2:2
とします。

2個めのLabel2に対しては、
A:A
B:B
とします。

3個めのLabel3に対しては、
x:x
y:y
とします。

デフォルト値は、空にしておきます。

無を許可するか?は、「いいえ」にチェックします。

複数の値を選択できるか?は「いいえ」にチェックします。

条件判定は「いいえ」にチェックします。

これ以外の値はデフォルトのまま「公開」します。

image

以上で、カスタムフィールドLabel1、Label2、Label3が作成されました。

投稿でカスタムフィールドを設定する

次に、投稿画面を表示します。

image

投稿画面の下に、先ほど、Advanced Custom Fieldsで作成したLabel1、Label2、Label3という3個のカスタムフィールドが作成されていることを確認します。

今回、投稿タイトルを「あ」として、Label1を「1」、Label2を「A」、Label3を「x」と選択しました。

同様な方法で以下のように投稿を作成しました。

投稿タイトル --- 「Label1」「Label2」「Label3」として以下を作成します。
タイトル「あ」 --- 「1」「A」「x」
タイトル「い」 --- 「1」「A」「y」
タイトル「う」 --- 「1」「B」「x」
タイトル「え」 --- 「1」「B」「y」
タイトル「お」 --- 「2」「A」「x」
タイトル「か」 --- 「2」「A」「y」
タイトル「き」 --- 「2」「B」「x」
タイトル「く」 --- 「2」「B」「y」

WP Custom Fields Searchのインストールと設定

次にWP Custom Fields Searchをインストールします。

image

This plugin allows multiple form inputs to be configured to search different aspects of a post including custom fields.

WP Custom Fields Searchをインストール後、「WP Custom Fields Search」を選択します。

「New Preset」を押して新しいプリセットを作成します。

Search Titleにタイトルを入力します。ここでは「タイトル1」といします。

Use Presetはドロップダウンボックスから、そのまま作成したタイトル「タイトル1」を選択します。

Fieldについては、「Add Field」を押して3個のFieldを作成します。
作成した3個のFieldについて、各項目はそれぞれ次のように設定します。

Labelは「選択1」「選択2」「選択3」とします。

Data Typeはドロップダウンリストから「Custom Field」を選択します。
「Post Field」「Custom Field」「Category」「Tag」「Post Type」の中から選択可能です。

Data Fieldは「selectbox1」「selectbox2」「selectbox3」とします。この部分はAdvanced Custom Fieldのフィールド名です。

Widgetは「Drop Down」とします。
「Text Input」「Drop Down」「Radio Button」「Hidden Constant」「Checkboxes」の中から選択可能です。

Compareは「Equals」とします。
「Equals」「Phrase In」「Words In」「Less Than」「More Than」「At Most」「At Least」「Range」「Sort Order」の中から選択可能です。

Numericはチェックしません。

Widget Configは「1,2」「A,B」「x,y」とします。

設定後に、「Save Changes」で保存しておきます。

image

検索のテスト

固定ページを「新規追加」して、以下のショートコードを入力します。

[wp-custom-fields-search]

image

この固定ページを開きます。

image

WP Custom Fields Searchで作成した「選択1」「選択2」「選択3」が表示されます。

このまま、ドロップダウンリストから任意の値を選択して「Search」を押すと、選択肢に紐づいた投稿が表示されることがわかります。

いかがでしょうか?
WordPressでプログラミングなしで簡単なカスタム検索を作ることが出来ました。

最後まで読んでいただきありがとうござました。
この記事が気に入っていただけたらシェアしてくれると嬉しいです。

スポンサーリンク
スポンサーリンク
Translate »