| 「About」ウィジェットとカテゴリ絞込み検索の相性(Movable Type)ブログトップ | CMS関連 | JavaScript関連 | innerHTMLの注意点(Javascript)
MTにてカテゴリを絞り込んで検索する方法2
この記事は1年以上前の記事のため、内容が古い可能性があります。
前回はこちら「MTにてカテゴリを絞り込んで検索する方法」
今回はプラグインを使用します。
この方法のメリットは複数のカテゴリで絞り込めることです。
たとえば以下のようにカテゴリ構成されているとします。
ジャンル
SF
アニメ
クライム
コメディ
ホラー
メディア
DVD
VHS
ブルーレイ
レーザーディスク
「SF×DVD」や「コメディ×VHS」のように複数カテゴリで絞り込みたい場合、前回の方法では実現不可能でした。(一見<input category="SF AND DVD" />で可能そうですができませんでした。)
そこでこちらのサイトで配布しているプラグインを使用します。
CategorySearch(Technology on Informationさんのサイト)
上記のサイトの「リリース>ダウンロードページ」から最新版をダウンロードしてください。
インストール方法は、ダウンロードしてきたファイルを解凍したのち、「plugins」の中にアップロードすればOKです。
使用方法についても上記のサイトに記述しております。
では以下使用例です。
※なお、以下で使用しているテンプレートはMT5標準で用意されているテーマ「クラッシックブログ」のテンプレートです。
1.検索ウィジェットを編集する
MTブログ管理画面の「デザイン>ウィジェット>検索」を開いてください。
その中のformタグで囲まれている部分を、まるごと以下のように書き換えてください。
<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<MTTopLevelCategories>
<MTSetVarBlock name="tcid"><MTCategoryID></MTSetVarBlock>
<div>
<input type="hidden" name="CategorySearchSets" value="<MTCategoryID>" />
<select name="<MTCategoryID>">
<option value="0">すべての<MTCategoryLabel></option>
<MTSubCategories>
<MTSetVarBlock name="clabel"><MTCategoryLabel></MTSetVarBlock>
<MTCategorySearchLink type="absolute" set="$tcid" value="$clabel" op="replace" text="ignore" >
<MTIf name="selected">
<option value="<MTCategoryLabel>" selected="selected"><MTCategoryLabel></option>
<MTElse>
<option value="<MTCategoryLabel>"><MTCategoryLabel></option>
</MTIf>
</MTCategorySearchLink>
</MTSubCategories>
</select>
</div>
</MTTopLevelCategories>
<div>
<input type="text" name="search" value="<$mt:SearchString$>" />
<input type="hidden" name="CategorySearch" value="1" />
<input type="hidden" name="CategorySearchIgnoreText" value="1" />
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<input type="submit" accesskey="4" value="検索" />
</div>
</form>
■追記(2010/10/27)
MTCategorySearchLinkのtypeを「relative」から「absolute」に変更しました。
2.「検索結果」テンプレートを編集する
MTブログ管理画面の「デザイン>テンプレート>検索結果」を開いてください。
「<$mt:SearchString$>」と一致するもの
の部分を
<MTSetVarBlock name="search_string"><$mt:SearchString$></MTSetVarBlock>
<mt:CategorySearchSets glue=" と ">
「<mt:CategorySearchCategories>
<mt:CategoryLabel>
</mt:CategorySearchCategories>」
<mt:CategorySearchSetsFooter>
<MTIf name="search_string">
と「<$mt:SearchString$>」
</MTIf>
の検索結果
</mt:CategorySearchSetsFooter>
</mt:CategorySearchSets>
に変更してください。
この段階でとりあえず再構築をかけてください。
ここまでで、2種類のカテゴリによる絞り込み検索ができるようになりました。
しかし、テキストフォーム(name="search")のところに検索ワードを入力してもスルーされてしまうと思います。
これは
<input type="hidden" name="CategorySearchIgnoreText" value="1" />
が記述されているためで、「CategorySearchIgnoreText」のvalueに値が入っていると、検索ワードが入っていなくても検索結果を返してくれるという利点がある代わりに、検索ワードは無視されてしまうという欠点があります。
できれば検索ワードが入っていない場合はカテゴリのみで検索し、入っている場合はそのワードでも検索するという風にしたいところです。
そこで、今回もJavascriptを使用します。
3.Javascriptを追記する。
読み込めればどこでもいいんですが、とりあえず「デザイン>ウィジェット>検索」を開いてください。
一番上に下記のソースを追記します。
<script type="text/javascript">
function searchTextCheck(){
var searchText = document.getElementById("searchText").value;
if(searchText != ""){
document.getElementById("CategorySearchIgnoreText").value = "0";
}
}
</script>
要するに、検索ボタンをクリックした瞬間、テキストフォームに検索ワードが入っていなければそのままにし、入っていればCategorySearchIgnoreTextのvalueを"0"にする、というわけです。
4.Javascriptで使用するためタグを修正する。
最後に1.で追加したform内のタグの値を少し変更します。
<form me\thod="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<MTTopLevelCategories>
<MTSetVarBlock name="tcid"><MTCategoryID></MTSetVarBlock>
<div>
<input type="hidden" name="CategorySearchSets" value="<MTCategoryID>" />
<select name="<MTCategoryID>">
<option value="0">すべての<MTCategoryLabel></option>
<MTSubCategories>
<MTSetVarBlock name="clabel"><MTCategoryLabel></MTSetVarBlock>
<MTCategorySearchLink type="absolute" set="$tcid" value="$clabel" op="replace" text="ignore" >
<MTIf name="selected">
<option value="<MTCategoryLabel>" selected="selected"><MTCategoryLabel></option>
<MTElse>
<option value="<MTCategoryLabel>"><MTCategoryLabel></option>
</MTIf>
</MTCategorySearchLink>
</MTSubCategories>
</select>
</div>
</MTTopLevelCategories>
<div>
<input type="text" name="search" id="searchText" value="<$mt:SearchString$>" onkeypress="searchTextCheck();" />
<input type="hidden" name="CategorySearch" value="1" />
<input type="hidden" name="CategorySearchIgnoreText" id="CategorySearchIgnoreText" value="1" />
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<input type="submit" accesskey="4" value="検索" onclick="searchTextCheck();" onkeypress="searchTextCheck();" />
</div>
</form>
■追記(2010/10/27)
MTCategorySearchLinkのtypeを「relative」から「absolute」に変更しました。
検索ワードを入力するテキストフォームのタグに
「id="searchText"」
「onkeypress="searchTextCheck();"」
CategorySearchIgnoreTextのタグに
「id="CategorySearchIgnoreText"」
検索ボタンに
「onclick="searchTextCheck();"」
「onkeypress="searchTextCheck();"」
をそれぞれ追加し、再構築してください。
これで、複数のカテゴリによる絞込み検索ができるようになったかと思います。
いや~、それにしてもすばらしいプラグインですね。
感謝感謝です。
トラックバック
トラックバックURL
コメント一覧
はじめまして。mtのカテゴリ絞り込み検索を探していましたら発見致しました。
試しに、検索・検索結果にソースを張り付けてみたのですが、
どうしてもカテゴリを2つ選択すると検索結果は
NoSearch
の内容が帰ってきます。
原因がわかるようであればお知らせください。
宜しくお願い致します。
すみません。問題解決いたしました。
コメントありがとうございます。
無事解決されたようで何よりです^^
はじめまして。MTの検索フォームのカスタマイズで絞り込みを行えないか探していたら、偶然たどりつき、参考にさせていただいております。
一点、お伺いしたいことがあります。
から取得しているから仕方ないのかもしれないのですが、プルダウンメニューの先頭を
『すべての』からではなく先頭を『選択しない』ようにしたいのですが、なにかよい解決策をご存じではないでしょうか。ご存じであればお伺いさせてください。
よろしくお願いたします。
すいません。タグをコピペしてしまい、大事なところが見えなかったので再投稿させていただきます。
一点、お伺いしたいことがあります。MTTopLevelCategories
から取得しているから仕方ないのかもしれないのですが、プルダウンメニューの先頭を
『すべて MTCategoryLabel』からではなく先頭を『選択しない』ようにしたいのですが、なにかよい解決策をご存じではないでしょうか。ご存じであればお伺いさせてください。
よろしくお願いたします。
yosiさん。
コメントありがとうございます。
ご質問の内容ですが、すみません、良くわからないのですが、
<option value="0">すべての<MTCategoryLabel></option>
の行を消すだけではダメなのでしょうか?
コメントする
※メールアドレスが公開されることはありません。