WordPressの検索結果をリストか地図か選択して表示する

お店、クリニックや病院などの医療機関、お部屋探し物件などの検索で結果を地図上に表示されると便利なときがあります。
たとえば、医療機関検索で札幌地下鉄南北線、内科の条件で絞り込んだ場合、地図上にヒットしたマーカが表示され、クリックすると
情報ウィンドが開き、詳細情報やWebサイトにリンクされていると大変便利です。

このようなサイトのカスタマイズのポイントを実際のサイトをもとに紹介します。

こちらは、絞込み条件と結果を表示した画面です。
条件としては 診療科目:内科、最寄の地下鉄:南北線です。



この検索結果の表示は検索フォームの一番下のラジオボタンにより選択します。 この医療機関検サイトでは、プラグインの Custom Fields Search を用いていますが、
このラジオボタンはプラグインの Custom Fields Searchで作成したフォームとは別になります。

ラジオボタンはCustom Fields Searchの持つテンプレート(wp-custom-fields-search-form.php)に追加します。


<?php if($title && !(@$params['noTitle'])){
	echo $params['before_title'].$title.$params['after_title'];
}?>
<form method='get' class='<?php echo $formCssClass?>' action='<?php echo $formAction?>'>
<?php echo $hidden ?>
<div class='searchform-params'>
<?php foreach($inputs as $input){?>
<div class='<?php echo $input->getCSSClass()?>'><?php echo $input->getInput()?></div>
<?php }?>
</div>
<div class='searchform-controls'>
<!-- 結果の表示方法を選択 ----------------------------------------------------------------------------------------------------------->
<div class='searchform-param'><label class='searchform-label'>結果の表示</label><span class='radio-button-wrapper'>
<input type='radio' name='seach_view_type' value='list' checked>リスト<input type='radio' name='seach_view_type' value='map'>地図
</span></div>
<!------------------------------------------------------------------------------------------------------------------------------------->
<input type='submit' name='search' value='<?php _e('Search','wp-custom-fields-search')?>'>
</div>
</form>

Leave a Reply

will not be published

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>