TopMovable Typeカスタマイズ検索 > 2006年12月
2006年12月26日

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

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

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

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

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

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

1.プラグインのダウンロード

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

staggernation.comCollect Plugin for Movable Type

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

2.検索結果テンプレートの修正

ここでは、デフォルトテンプレートを例にして <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> で括る

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

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

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

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

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

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

Comments [0] | Trackbacks [0]
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