|WordPressで絞り込み検索機能を実装する|
【第3回】Advanced custom fieldで入力フォームを作成
Advanced Custom Fieldのインストール

Advanced custom fieldをインストールする。
カスタム投稿で作成した商品詳細用ページに商品情報を入力する専用フォームをACFのプラグインで作成。
サイドメニューにACFというメニューが表示される

Advanced Custom Fieldで簡単ページ更新

Advanced Custom Fieldで作成した各項目は図の様に入力フォームとしてカスタム投稿の編集画面に表示される。
wordpressの操作画面に不慣れな人でも多少は更新作業が楽になるはずである。
このブランド名や商品名等の各項目は後に解説する検索プラグイン(Search&filter pro)で作成した絞り込み検索フォームの各項目へ紐づける。
Advanced custom fieldの設定
今回、下記構成で入力フィールドを作成する。


ACFで作成する各項目は予めこの様な表を作成しておくと整理しやすい。
入力フィールドを作成する
”+新規追加”ボタンを選択しフォーム作成画面を表示させる。
フィールドグループタイトルを入力する。今回は”商品情報”という名前をつけた。

下記の様なフィールド作成画面が表示される。

今回制作するページイメージのおさらい

ブランド名、商品名、価格、カテゴリー、アップロードする画像。
この5つのカテゴリーを入力フォームを作成する
入力フィールド(ブランド名)を作成

ブランド名入力用のチェックボックスを作成する。フィールドタイプから”チェックボックス”を選択する。

【フィールドタイプ】チェックボックス
【フィールドラベル】日本語で入力
【フィールド名】アルファベットで入力
【選択肢】エクセル表参照
【戻り値】両方を選択
ブランド項目以外の入力フィールドを作成

”+フィールドを追加”をクリックしテキストフィールドやラジオボタン等上記同様に作成していく。
第2回で作成したカスタム投稿とACFで作成したフィールドを紐づける

フィールド作成画面を下にスクロールすると設定という項目がある。
ロケーションルールというタブ内にあるルール設定で、カスタム投稿で作成した、“アイテム登録”を選択してここで作成した入力フォームが新規投稿画面に表示できるようにしておく。
CPT UIプラグインで作成したカスタム投稿の”アイテム登録”から新規投稿を追加を選択すると通常の新規投稿画面にはない下記の様な入力フィールドが追加されている。



