検索結果テンプレートで記事を任意の件数ごとにdivでグループ分割する | 電脳備忘録

こっそりサイトデザインを変更しました。いろいろ試しているうちに迷走して、見づらいサイトになってしまっていたのでリセットしたかったということが大きいです。

前回、MovableTypeで記事を任意の件数ごとにdivでグループ分割して表示する設定を行いましたが、これはリニューアル後のサイトデザインに活かされています。
ただこれと同じことが検索結果テンプレートではできません。同じようにやってもMTIfで囲った部分が表示されず、激しくレイアウトが崩れてしまいました。MTの検索結果テンプレートは制約が多いです。困ったときのGoogle先生ということで調べた結果、下記のエントリーが大変参考になりました。

MTSearchResultsタグ内で__odd__等の変数を利用する

何とかレイアウトが崩れることなく表示できるようになったので、備忘録として残しておこうと思います。

やったこと

参照は自己責任でお願いします。

私の場合、下記のようなコードを書くことで要件を満たすことができました。

<$mt:Setvar name="__counter__" value="1"$> 
<mt:SetVarTemplate id="search_results" name="search_results">  
<mt:SearchResults>
<mt:SearchResultsHeader>
<mt:If name="__counter__" op="%" value="3" ne="1"><div class="grid_wrapper"></mt:If>
</mt:SearchResultsHeader>
<mt:If name="__counter__" op="%" value="3" eq="1"><div class="grid_wrapper"></mt:If>
<div class="grid_container">
<article>
<header>
<div class="grid_photo">
<a href="<$mt:EntryPermalink$>">
<mt:If tag="EntryDataEyecatch_image">
<MTEntryDataEyecatch_imageAsset>
<img src="/thumbnail/<$MTAssetFileName$>" alt="<mt:EntryTitle>" title="<mt:EntryTitle>" class="grid_photo_thumb"/>
</MTEntryDataEyecatch_imageAsset>
<mt:ElseIf>
<img src="/mt-static/themes/560days/images_thumbnail/noimage.gif" alt="サムネイル画像がなくてすみません" title="<mt:EntryTitle>" class="grid_photo_thumb">
</mt:If>
</a>
<div class="grid_entry_date">
<time datetime="<$mt:EntryDate format="%x %X"$>"><$mt:EntryDate format="%x"$></time>
</div>
</div>
<h1 class="grid_entry_title"><a href="<$mt:EntryPermalink$>" class="grid_entry_title"><$mt:EntryTitle$></a></h1>
</header>
<div class="entry_discriptions">
<p><$MTEntryExcerpt convert_breaks="1"$></p>
</div><!-- entry_discriptions -->
<footer class="more">
<a href="#">more</a>
</footer>
</article>
</div><!-- .grid_container -->
<mt:SearchResultsFooter>
<mt:If name="__counter__" op="%" value="3" ne="0"></div><!-- .grid_wrapper --></mt:If>
</mt:SearchResultsFooter>
<mt:If name="__counter__" op="%" value="3" eq="0"></div><!-- .grid_wrapper --></mt:If>
<$mt:SetVar name="__counter__" op="++"$>
</mt:SearchResults>
</mt:SetVarTemplate>
<$mt:Var name="search_results"$>

ソースをそのまま載せたのではわかりにくいですね。このソースのポイントは大きく分けて4つ

counterの値を1にします。

<$mt:Setvar name="__counter__" value="1"$>

エントリー数に応じてcounterをカウントアップさせるので、最初の1件目のときに開始のdivを表示させるために、該当箇所をmt:SearchResultsHeaderで処理しています。

<mt:SearchResultsHeader>
<mt:If name="__counter__" op="%" value="3" ne="1"><div class="grid_wrapper"></mt:If>
</mt:SearchResultsHeader>
<mt:If name="__counter__" op="%" value="3" eq="1"><div class="grid_wrapper"></mt:If>

同様の理由で今度は最後のエントリーのときに閉じるのdivを表示させる必要があったので、今度はmt:SearchResultsFooterで処理しています。

<mt:SearchResultsFooter>
<mt:If name="__counter__" op="%" value="3" ne="0"></div><!-- .grid_wrapper --></mt:If>
</mt:SearchResultsFooter>
<mt:If name="__counter__" op="%" value="3" eq="0"></div><!-- .grid_wrapper --></mt:If>

最後にcounterをカウントアップします。

<$mt:SetVar name="__counter__" op="++"$><$mt:SetVar name="__counter__" op="++"$>

これで検索結果画面もほかのページ同様に表示できるようになりましたとさ。爽快爽快...。