応用

記事一覧で最初の3件は違うhtml構造にする

カスタムブロックの出力テスト

カスタムブロックBlockEditorBlocksのテスト

記事の一覧などで、一部だけhtml構造を変えたい場合の方法です。
例えば記事一覧で
最初の3件はサムネイル画像と記事タイトルを、他の記事は記事タイトルだけを表示
としたい場合があります。
このような場合はmt:Ifで対応します。

使用するMTタグ

• mt:Entries
• mt:If
• mt:EntryAssets
• mt:AssetThumbnailURL
• mt:EntryTitle
• mt:EntryBody
• mt:EntryLink

mt:Ifは条件分岐に使用するブロックタグです。
mt:Ifに、特殊な予約変数「__counter__」を使うことによって、mt:Entriesでループする毎に、１ずつ変数内の数値を増やすことができます。
同時にleでループする回数を指定します。
指定した件数以下の場合に、mt:If内の記述を実行する仕組みです。
ループ回数の変数設定は以下のものがあります。

• __first__ ... ループ出力の最初である場合 true (1) となる
• __last__ ... ループ出力の最後である場合 ture (1) となる
• __odd__ ... ループ出力の奇数回目の場合 ture (1) となる
• __even__ ... ループ出力の偶数回目の場合 ture (1) となる
• __index__ ... ループのインデックスを格納する
• __counter__ ... ループした回数を格納する

下記のサンプルでは「記事を5件取得して、最初の3件だけサムネイル画像を表示する」という記述をしています。

記述サンプル

記述例

<mt:Entries lastn="5">
  <div>
    <mt:If name="__counter__" le="3">
    <mt:EntryAssets lastn="1">
      <div><img src="<$mt:AssetThumbnailURL width="160"$>" /></div>
    </mt:EntryAssets>
    </mt:If>
      <h1><$mt:EntryTitle$></h1>
      <p><$mt:EntryBody words="100"$>...</p>
  </div>
</mt:Entries>

出力例

記事タイトル1

記事タイトル1の本文...

記事タイトル2

記事タイトル2の本文...

記事タイトル3

記事タイトル3の本文...

記事タイトル4

記事タイトル4の本文...

記事タイトル5

記事タイトル5の本文...

※スタイルシートは別途用意してください。