小粋空間  -  a cheap joke and a play on words site

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

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

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

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

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

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

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

staggernation.com：Collect Plugin for Movable Type

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

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

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

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

リスト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>

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

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

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

３．エントリーに含まれる画像の表示数を変更する

エントリーに含まれる画像の件数を設定しているリスト2 の赤色部分を変更します。

リスト2　画像表示数変更方法

<MTCollected tags="img" lastn="1">

なお、エントリー表示数を制御することはできません（検索されたエントリー数分を全て表示）。