前回([MT]タグ検索結果を絞り込み!複数タグでAND検索(1))の予告をなんとか実現、今度は、画面の上の方に、タグをどんどん絞り込んでいけるリンクを表示してみました。
個人的にタグで過去記事を絞り込んでいけるリンクが欲しかったのと、MTでハッシュを使ってみたかったのが目的です。
大文字小文字や綴りを正確に覚えていなくてもAND検索できるので、結構便利ですよ。
テンプレートを修正したところは3カ所。前回のエントリーのカスタマイズが済んでいることが前提です。
1.システムテンプレート>検索結果画面
<mt:SearchResultsHeader></mt:SearchResultsHeader>の間で、表示用のエリアをあらかじめ用意しておきます。今は中身は空っぽ。
<mt:SearchResultsHeader>
<div id="search-results">
<span id="current-page" class="hidden"><$mt:CurrentPage$></span>
<h1 id="page-title" class="search-results-header">
(略:ちょうどここが前回の"タグ「」検索結果"のあたり)
</h1>
<mt:IfTagSearch>
<div id="tag_andsearch"></div>
</mt:IfTagSearch>
<div class="search-results-container autopagerize_page_element">
</mt:SearchResultsHeader>
2.テンプレートモジュール>記事の概要
前回のタグのリンクの生成のついでに、ハッシュにデータをセットしていきます。以下は前回と同じ場所。一部削除して変更、ちょっと追加。
<mt:IfTagSearch>
<mt:EntryIfTagged>
<mt:entryTags>
<mt:setVar name="tag_flag" value="0" />
<mt:loop name="tag_list">
<mt:if tag="TagName" eq="$__value__">
<mt:setVar name="tag_flag" value="1" />
</mt:if>
</mt:loop>
<mt:unless name="tag_flag">
<mt:setVarBlock name="tag_and_array" function="push"><a href="<mt:searchScript />?blog_id=<mt:blogID />&tag=<mt:searchString>%20AND%20<mt:tagName />&limit=20&IncludeBlogs=<mt:blogID />" rel="tag" title="<mt:getVar name="tag_list" glue=" ," />, <mt:tagName />のタグ一覧へ"><mt:tagName /></a></mt:setVarBlock>
<mt:setVarBlock name="tag_and_search_link"><a href="<mt:searchScript />?blog_id=<mt:blogID />&tag=<mt:searchString>%20AND%20<mt:tagName />&limit=20&IncludeBlogs=<mt:blogID />" rel="tag" title="<mt:getVar name="tag_list" glue=" ," />, <mt:tagName />のタグ一覧へ"><mt:tagName /></a></MTSetVarBlock>
<mt:setVarBlock name="tag_and_array" function="push"><mt:getVar name="tag_and_search_link"></mt:setVarBlock>
<mt:tagName setVar="tag_and_key"/>
<mt:setvar name="tag_and_list" key="$tag_and_key" value="$tag_and_search_link">
<mt:else>
<mt:setVarBlock name="tag_and_array" function="push"><mt:tagName /></mt:setVarBlock>
</mt:unless>
</mt:entryTags>
<div class="entry-tags">
<h4>タグ<span class="delimiter">:</span></h4>
<ul>
<li><mt:getvar name='tag_and_array' glue='<span class="delimiter">,</span></li> <li>' /></li>
</ul>
<p>※リンクのあるタグをクリックすると、タグ検索結果をさらに絞り込めます。</p>
</div>
<mt:setVar name="tag_and_array" function="undef" />
</mt:EntryIfTagged>
</mt:IfTagSearch>
3.システムテンプレート>検索結果画面
「記事の概要」でセットしたハッシュtag_and_listに要素が1つ以上あったら、1.で用意してあるエリアにタグのリンクを表示させます。
場所は<mt:SearchResultsFooter></mt:SearchResultsFooter>の間で。
<mt:SearchResultsFooter>
(略:ページのナビゲーションを出力する部分)
<mt:IfTagSearch>
<mt:getVar name="tag_and_list" function="count" setvar="tag_and_count">
<mt:if name="tag_and_count" gt="0">
<script type="text/javascript">
<!--
document.getElementById('tag_andsearch').innerHTML = '\
<div class="entry-tags">\
<h4>タグ「<mt:getVar name="tag_list" glue=", " />」と同時に使われているタグでさらに絞り込む<span class="delimiter">:</span></h4>\
<br/>\
<ul>\
<mt:Loop name="tag_and_list" glue=", ">\
<li><$mt:Var name="__value__"$> </li>\
</mt:Loop>\
</ul>\
</div>\
';
//-->
</script>
</mt:If>
</mt:IfTagSearch>
</mt:SearchResultsFooter>
実は中途半端なところがあります。タグのリンクを取得する処理が、そのページ内に表示されているエントリー分(20件)なので、複数ページになるような検索結果の場合は、同時に使われているタグの全てではないのです。
同時に使われているタグを全部取得するとなると、処理方法を工夫しないとかなり負荷が高くなりそうなので、今回は簡易的なものということで、よしとすることにしました。
・・・それにしても、ソースが見にくくてごめんなさい。以前に書いたMTでやっておきたかったことというのは、関連記事とタグのAND検索だったのですが、こういった見た目的なところも少し手を入れて改善したいですね。