[プラグイン] 投稿一覧ページに、カスタムフィールドに登録した値で、ドロップダウンリストの検索機能を設置したいときに便利なプラグイン WP Custom Search

公開日:2013年9月12日

投稿一覧ページに「ドロップダウンリスト」の検索機能を設置したいときに便利なプラグインです。
ドロップダウンリストだけでなく、複数のワードで絞込み検索や、カスタムフィールドの値(数値)を利用した範囲検索などもできます。

Custom Field Template(他のプラグインでもOKです)

(1)Custom Field Templateをダウンロード → インストールして有効化 → 
管理画面の設定でカスタムフィールドテンプレートを設定。

例えばこんな感じで設定

[果物]
type=select
value = りんご # いちご # バナナ
default = りんご

 

(2)投稿ページで、値を入力して保存

WP Custom Search

(1)WP Custom Searchをダウンロード → インストールして有効化 → 
管理画面の設定で必要項目を設定して保存。

日本語版:WP Custom Fields Searchの日本語版配布 | WordPressのプラグイン日本語版を配布 | Lovelog+*

(2)下記のコードをテンプレートの任意の位置に記述するだけで「ドロップダウンリスト」設置完了

<?php if(function_exists('wp_custom_fields_search')) 
	wp_custom_fields_search(); ?>

(3)記事内に表示する場合は下記のショートコードです

[wp-custom-fields-search]

・・・と思いきや、思うような見栄えにならなかった。。。
そこで、吐き出したコードを(ブラウザの「ページのソース」をコピー)直接テンプレートに記述しても動いたので、ルール違反かと思いましたが、下記のように修正して利用させていただています。
※action=の部分は、自分のサイトのURLを記述(例:http://ドメイン.com)

<form method='get' action='(URLを記入)'>
<input type='hidden' name='search-class' value='DB_CustomSearch_Widget-db_customsearch_widget'/>
<input type='hidden' name='widget_number' value='preset-default'/>

<div class="searchform-box">
<select name='cs-果物-0'>
<option value='選択してください' selected='selected'>選択してください</option>
<option value='りんご'>りんご</option>
<option value='いちご'>いちご</option>
<option value='バナナ'>バナナ</option>
</select>
<input type='submit' class="butan" name='search' value='検索'/>
</div>

</form>

CSS(最低限の記述だけです)

.searchform-box [
width:200px;
]
.searchform-box select [
float:left;
width:150px;
]
.searchform-box input [
float:right;
]