TopMovable Typeカスタマイズ検索 > 2005年11月
2005年11月 6日

検索オプションをつける

November 6,2005 11:51 PM
Tag:[, , ]
Permalink

検索ページにある「エントリー」「コメント」等のオプション指定方法についてご質問を頂きましたので、本エントリーでご紹介します。

この元ネタは Movable Type に付属している検索機能の、検索結果画面の設定

search_templates/default.tmpl

を利用しています。

まず「エントリー/コメント/両方」をオプション指定するには、検索フォームに下記のリストのように青色部分を追加します。

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<p><input name="search" class="search" size="31" value="" /> <input class="searchButton" type="submit" value="Search" /></p>
<p><input type="radio" name="SearchElement" value="entries" checked="checked" />エントリー
<input type="radio" name="SearchElement" value="comments" />コメント
<input type="radio" name="SearchElement" value="both" />両方</p>
</form>

下記のように label 要素を付与すれば文字の部分をクリックしても選択状態になるので、ユーザビリティが向上します(推奨)。

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<p><input name="search" class="search" size="31" value="" /> <input class="searchButton" type="submit" value="Search" /></p>
<p><input type="radio" id="entries" name="SearchElement" value="entries" checked="checked" /><label for="entries">エントリー</label>
<input type="radio" id="comments" name="SearchElement" value="comments" /><label for="comments">コメント</label>
<input type="radio" id="both" name="SearchElement" value="both" /><label for="both">両方</label></p>
</form>

サイドメニューの検索フォームに追加する場合は、幅を考慮して下記のようなプルダウンメニューにすると良いでしょう。とりあえず当サイトにもつけてみました(タグ・CSSは若干変更しています)。

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<p><input name="search" class="search" size="31" value="" /> <input class="searchButton" type="submit" value="Search" /></p>
<p><select name="SearchElement">
<option value="entries" selected="selected">エントリー</option>
<option value="comments">コメント</option>
<option value="both">両方</option>
</select></p>
</form>

CSS は select に対して下記のように設定します。

select {
    font-size: 10px;
}

検索結果画面と同じように「大文字/小文字を区別」や「正規表現で検索」を設定する場合は、さらに下記のチェックボックスをフォーム内に追加します。

<input type="checkbox" name="CaseSearch" /> 大文字/小文字を区別 <input type="checkbox" name="RegexSearch" /> 正規表現で検索

以上です。
なお、本来の検索結果画面での日本語部分は

<MT_TRANS phrase='xxxxx'>

というフォーマットになっていますが、Movable Type のCGIスクリプトを通さないのであれば、上記サンプルリストのように日本語を直接記述しましょう。

Comments [14] | Trackbacks [3]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3