chinen

【Movable Type】記事(エントリー)を特定の数ずつdivで囲む

MTの記事を任意の数ごとにdivで囲みながら出力する方法をご紹介します。

以下の図のようになります。

div
title
text text text
title
text text text
text text text
text text text
div
title
text text text
text text text
title title title
title title title
text text text

MTで記事の一覧を出すときのタグの記述例です。

<mt:Entries>
<!-- 記事の内容 -->
<div><$mt:EntryTitle$></div>
<p><$mt:EntryBody$></p>
<!-- //記事の内容 -->
</mt:Entries>

こちらの記事を2件ごとにdivで囲みながら出力するには、以下のように記述します。

<mt:Entries>

<mt:If name="__counter__" op="%" value="2" eq="1"><div></mt:If>

<!-- 記事の内容 -->
<div><$mt:EntryTitle$></div>
<p><$mt:EntryBody$></p>
<!-- //記事の内容 -->

<mt:If name="__counter__" op="%" value="2" eq="0"></div></mt:If>
<mt:If name="__last__">
<mt:If name="__counter__" op="%" value="2" ne="0"></div></mt:If>
</mt:If>

</mt:Entries>

 
 
記述の説明をしていきます。

【1】div 開始タグの出力

[ 3行目の mt:If ]
・”counter” はループで何番目かを表します。
・op=”%” は剰余を表し、value=”#” で割った余りを計算します。
3行目の意味は、ループの順番を”2”で割った余りが”1”の記事のとき出力する If 文になります。
つまり、2件ごとに区切る場合の1つ目に div 開始タグが出力されることになります。

【2】div 閉じタグの出力

[ 10行目の mt:If ]
eq=”0” ですので、”2”で割り切れる場合(偶数番目)のとき div閉じタグが出力されます。
これで、一列(2件)ごとに div で囲むことができます。

※しかし仮に記事が3件だった場合、
一列目の2件は div で囲むことができますが、2列目には記事が1件しかないため、
開始タグは表示されますが、閉じタグが表示されないままです。
そこで11行目の記述が必要になります。

[ 11行目の mt:If ]
・”last” はループ最後の記事を表します。
最後の記事の場合で、かつ ne=”0” なので”2”で割り切れる数以外のとき、div 閉じタグが出力されます。
これで、一番最後の記事のときに必ず div 閉じタグが出力されるようになります。
 

■ まとめ

今回の例では2件ずつ区切りましたが、上記 mt:If の value=”2” の値を value=”3” にすると3件ずつ区切りになります。
好きな値に変えることで何件ずつ区切るか調整が可能です。
 
 

[ mt:If name="" ]

今回は”__counter__”を使いましたが、 他にも役に立つ変数がいくつかあるので合わせて紹介します。
  • __first__ : ループで最初の1件目を表します。
  • __last__ : ループの最後の1件を表します。
  • __odd__ : ループ中で奇数番目を表します。
  • __even__ : ループ中で偶数番目を表します。
  • __counter__ : ループ中で何番目の記事かを表します。
これらを組み合わせることでいろいろな指定に対応できそうですね。
   

■ 補足

※”__counter__”を使うと好きな数ごとに区切りを入れることができて便利ですが、 問題点として、記事のループを別の mt:If で制限した場合に、出力がうまくいかないことがあります。 例えば、
<mt:Entries>
<mt:If name="__counter__" op="%" value="3" eq="1"><div></mt:If>

<mt:If tag="EntryBody"><!-- 本文が空のときは表示しない -->
<!-- 記事の内容 -->
<div><$mt:EntryTitle$></div>
<p><$mt:EntryBody$></p>
<!-- //記事の内容 -->
</mt:If>

<mt:If name="__counter__" op="%" value="3" eq="0"></div></mt:If>
<mt:If name="__last__">
<mt:If name="__counter__" op="%" value="3" ne="0"></div></mt:If>
</mt:If>
</mt:Entries>
4行目の mt:If で、本文の入力が無い記事は非表示になりますが、 このときの”__counter__” は非表示になっている記事も合わせて何番目かをカウントしており、 表示している記事だけの順番ではないため、意図した場所に div が出てくれないことになります。 【対応策】 記事の出力判定を mt:If ではなくカスタムフィールドで指定(例えばチェックボックスで指定)すると、
<mt:Entries field:entrycheck="1">
というように出力内容自体を先に制限することができるので、”__couter__” も表示分の記事のみカウントしてくれます。 ブログの作り方によっては、表示判定をカスタムフィールドにできない場合もあります。 もっと違う書き方で万能に対応できるようになればいいのですが、もし他の方法がわかりましたらまた記事にしたいと思います。     【参考サイト】 ・MTで2つのブログ記事ごとにdivで囲むようにテンプレート設定 | blog 【MT】エントリーをn個ずつdivで囲む - tacamyの日記
新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら