[MT]HTMLからMTテンプレートへ（記事リスト編）

2007/09/11

[MT]HTMLからMTテンプレートへ（記事リスト編） »»

ヘッダー部分の修正作業が終わったら、似たような感じでいろんなところ（笑）を修正していきます。主だったところを挙げると、単純に「images」とかで指定していた画像フォルダを「<$MTBlogURL$>images」に修正するとか、そんな感じで。

続いては「これやりたい！」と思う方も多いと思われる、カテゴリ別の記事リスト部分の修正です。

MTテンプレート用修正－カテゴリ別記事リスト編

HTMLで作った段階では、記事のリスト部分はカテゴリごとに次のようなソースを並べて作ってます。

<div class="ReviewNotes">
<h5><a href="#"><img alt="MONO PORTALトラバキャンペーンに当選！" src="images/TopReview/hdd_elected.jpg" width="80" height="60" /></a></h5>
<ul>
<li class="ReviewTitle"><a href="#"><img alt="MONO PORTALトラバキャンペーンに当選！" src="images/TopReview/T_hdd_elected.gif" width="250" height="30" /></a></li>
<li class="ReviewExcept">トラックバックキャンペーンで、バッファロー製外付けHDDが見事当選！»» <a href="#" title="トラックバックキャンペーンで、バッファロー製外付けHDDが見事当選！">記事を読む</a></li>
</ul>
</div>

実際にHTML上に記載してあるのは上記ソース×6記事×3カテゴリ分。画像ファイル名（＝記事のファイル名と合わせてあります）や記事ページへのURLなんかを修正して、記事の件数分だけ繰り返し記載してるわけですが、MTでは次のように修正することで簡単に繰り返し表示させることができます。

<MTEntries sort_order="ascend" category="HD-H250U2詳細レビュー">
<div class="ReviewNotes">
<h5><a href="<$MTEntryPermalink$>"><img alt="MONO PORTALトラバキャンペーンに当選！" src="<$MTBlogURL$>images/TopReview/hdd_<$MTEntryBasename$>.jpg" width="80" height="60" /></a></h5>
<ul>
<li class="ReviewTitle"><a href="<$MTEntryPermalink$>"><img alt="<$MTEntryTitle$>" src="<$MTBlogURL$>images/TopReview/T_hdd_<$MTEntryBasename$>.gif" width="250" height="30" /></a></li>
<li class="ReviewExcept"><$MTEntryTitle$>»» <a href="<$MTEntryPermalink$>" title="<$MTEntryExcerpt$>">記事を読む</a></li>
</ul>
</div>
</MTEntries>

なんだか赤字部分が増えて見づらくなっちゃいましたが、一個一個タグを見ていけばなんとなく理解できるかと。

ここで使ったMTテンプレート用タグ

<MTEntries> ～ </MTEntries>
このタグに挟まれた部分が記事数分繰り返し表示されます。通常「lastn="10"」といったように表示させる件数を属性で指定することが多いですが、ここでは「sort_order="ascend"」で記事を古いものから順に並べ、「category="HD-H250U2詳細レビュー"」で「HD-H250U2カテゴリ」内の記事のみを表示させるように指定しています。件数、並び順、カテゴリ指定を組み合わせることで、いろんな表示のさせ方ができますね＾＾
<$MTEntryPermalink$>
MTEntries内にこのタグを記載することで、記事ページのURLが表示されます。記事リストを作る場合、記事ページへのリンクは必須ですので、このタグはとっても重要です。
<$MTEntryTitle$>
MTEntryPermalinkと並んで重要なのがこのタグ。文字通りエントリー（＝記事）のタイトルを表示させます。私は画像を使ってますが、これで表示させた記事タイトルをアンカーテキストにしてリンクを貼るのが一般的かと。
<$MTEntryBasename$>
これは記事投稿時に修正した「出力ファイル名」を表示させるタグ。このタグを使ってる人が他にいるのか？ってくらいマイナーなタグだったりしますが、ウチは画像ファイルの名前を記事のファイル名にあわせ、このタグでimgタグ内にファイル名を吐き出すことで自動的に記事に合った画像を表示させたりしてます。ま、結構面倒な作業が伴うのでやらない方が賢明かもしれませんが＾＾；

新たに使ったのはこの4つ。HTML自体が複雑で分かりづらかったりしますが、サイドバーに載せるような単純なものであれば下記みたいな感じで全然OKです。

これは「古いものから順に」「”カテゴリ名”に記載したカテゴリ内の記事を」「5件並べる」というもの。これを横にダダダと並べれば、いかにもカテゴリ別！って感じの記事リストができようかと。記事へのリンクをどうやって並べようかと悩んでいるような方はぜひぜひお試しあれｗ＾＾