小粋空間: エントリー・タグ: 2006年12月アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞エントリー・タグ＞ 2006年12月

2006年12月26日

タグ検索でエントリーの画像を表示する

December 26,2006 1:25 AM
Tag：[Customize, MovableType, SearchResult, Tag]
Permalink

Movable Type のタグ検索機能で、エントリータイトル・概要の代わりに、エントリーに含まれる画像を検索結果画面に表示するカスタマイズです。

下のスクリーンショットは、デフォルトテンプレートで、"image" というタグを与えた3つのエントリーにそれぞれ異なる画像を表示させ、"image" タグで検索した検索結果画面のサンプルです。

タグ検索でエントリーの画像を表示する

デザインが大雑把で申し訳ありませんが、以前このカスタマイズについてのご質問を頂いていてからかなり時間が経ってしまいましたので、取り急ぎの公開です。

試してみたところ、Collect プラグインを利用すれば、タグ検索による画像表示が行えることが判明しました。

１．プラグインのダウンロード

下記のサイトにある「Download」のリンクをクリックして、Collect Plugin をダウンロード

staggernation.com：Collect Plugin for Movable Type

解凍した中にある Collect.pl を plugins フォルダ直下にアップロード。

２．検索結果テンプレートの修正

ここでは、デフォルトテンプレートを例にして <MTSearchResults>～</MTSearchResults> の修正箇所を示します。

リスト1 のように、赤色を削除して青色を追加します。

<MTSearchResults>
    <MTBlogResultHeader>
        <h3 class="search-results-header">
        <MTIfStraightSearch>
            ブログ: <$MTBlogName$> での検索結果
        </MTIfStraightSearch>
        <MTIfTagSearch>
            <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
        </MTIfTagSearch>
        </h3>
        <div class="search-results-container">
        <MTIfTagSearch>
<ul>
        </MTIfTagSearch>
    </MTBlogResultHeader>
 
    <MTIfStraightSearch>
        <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
        <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
    </MTIfStraightSearch>
        <MTIfTagSearch>
            <div class="entry-tags">
                <h4 class="entry-tags-header">タグ:</h4> 
                <ul class="entry-tags-list">
                    <MTEntryTags>
                        <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                    </MTEntryTags>
                </ul>
            </div>
            <MTCollect tags="img">
                <MTCollectThis show="0">
                    <$MTEntryBody$>
                </MTCollectThis>
                <MTIfCollected tags="img">
                    <MTCollected tags="img" lastn="1">
<li style="display:inline"><a href="<$MTEntryPermalink$>"><img src="<$MTCollectedAttr attr="src"$>" /></a></li>
                    </MTCollected>
                </MTIfCollected>
            </MTCollect>
        </MTIfTagSearch>
 
        <MTIfStraightSearch>
        <p class="entry-footer">
            <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
        </p>
        </MTIfStraightSearch>
 
    <MTBlogResultFooter>
        <MTIfTagSearch>
</ul>
        </MTIfTagSearch>
        </div>
    </MTBlogResultFooter>
</MTSearchResults>

リスト1　検索結果テンプレート修正箇所

ここで行っている修正は主に下記の通りです。

タグ表示部分に Collect プラグインの MT タグを挿入
タグ検索は順序なしリスト（ul - li）で表示
タグ検索結果の ul 要素の開始タグは MTBlogResultHeader に、終了タグは MTBlogResultFooter に埋め込み（ここに埋め込まないと、検出されたエントリー数分表示されるため）
エントリータイトルおよび投稿者情報部分は通常検索時のみ表示されるよう、<MTIfStraightSearch>～<MTIfStraightSearch> で括る

修正方法は他にも色々ありますので、お試しになってください