トフでもできる!? Movabletype.netテーマ開発

もくじに戻る

mt:ifをつかって振り分けをしよう!

mt:Ifタグを使う

前ページでカスタムフィールドの設定をしたときに使ったタグを思い出してみましょう。

<img src="
  <mt:If tag="CustomFieldValue" identifier="news_image">
  <mt:CustomFieldAsset identifier="news_image">
    <$mt:AssetThumbnailURL$>
  </mt:CustomFieldAsset>
  <mt:Else>
    <mt:EntryAssets type="image" sort_order="ascend" limit="1">
      <$mt:AssetThumbnailURL$>
    <mt:Else>
      <$mt:BlogRelativeURL$>images/noimage.png
    </mt:EntryAssets>
  </mt:If>
"alt="">

ここで出てきたif。どういう意味だったのかな?

疑問を持つトフ

カスタムフィールドから関連画像を投稿した場合は、カスタムフィールドの画像を
無い場合は、記事の中に含まれる画像をそれも無い場合は
ファイルマネージャにある共通の画像を表示させる

と、先ほどは説明しました。

このように、テンプレートを作っていて「この条件ではAを表示、違う場合にはBを表示」といった表現をしたい場合があります。
そのような場合の一つの実現方法として<mt:If>タグがあります。

<mt:If>
条件文の対象となる mt:SetVar ファンクションタグに設定した変数、または mt:SetVarBlock,
mt:SetVarTemplateブロックタグの変数を利用して条件文を作成します。mt:If ブロックタグは条件を満たした場合にのみ実行します。mt:Unlessmt:Ifの逆で条件を満たさない場合にのみ実行します。
https://movabletype.net/tags/2007/08/if.html
tag="tagName"
指定したMTタグに値がある場合は true (真)。無い場合は false (偽) を返します。
<mt:ElseIf>
mt:Ifブロックタグで設定した条件式の値が false (偽) の場合、実行したい内容を囲むブロックタグmt:Elseにさらに条件式を追加できるブロックタグです。
<mt:Else>
条件タグの条件に合致しなかったときに、実行するブロックタグです。このMTタグの終了タグは省略することができます。

言葉にすると難しい感じがしますが、先ほどの動きを見ながら考えていきましょう!

ここで期待する動作は、
1.記事のカスタムフィールドで設定した画像がある場合はそれを表示し
2.なければ記事内の画像を表示する
3.それもなければ共通の画像を表示 です。

これをMTタグにすると…

①<mt:If tag="CustomFieldValue" identifier="識別子">
  <mt:CustomFieldAsset identifier="識別子">
    <$mt:AssetThumbnailURL width="1200"$>
  </mt:CustomFieldAsset>
②<mt:Else>
    <mt:EntryAssets type="image" sort_order="ascend" limit="1">
    <$mt:AssetThumbnailURL$>
③<mt:Else>
    <$mt:BlogURL encode_html="1"$>common/images/noimage.png
    </mt:CustomFieldAsset>
  </mt:If>

と、なります。

①:まず、<mt:If tag="CustomFieldValue" identifier="識別子">tag:カスタムフィールドを指定。identifer:カスタムフィールドに設定されている識別子を記述します。
これにより、そのカスタムフィールドに値があるかないかで条件分岐をしています

次に画像に値がある場合の処理をかきます。
<mt:CustomFieldAsset identifier="識別子">…ここではmt:CustomFieldAsset先程と同じ識別子のカスタムフィールドのアセット(アイテム)を呼び出しますよと宣言して、
<$mt:AssetThumbnailURL width="1200"$>…実際に画像のサムネイルを呼び出す<mt:AssetThumbnailURL>で幅1200pxで指定しています。

②:<mt:Else>の後は、カスタムフィールドに画像が入っていない場合の処理が続きます。
1つめは、「(カスタムフィールドには入っていないけど)記事には画像が入っている場合、1つだけ画像のアドレスを呼び出す」という処理です。

③:最後に<mt:Else>以降。
カスタムフィールドの値がない場合、画像が設定されていない場合の設定 は、<$mt:BlogURL encode_html="1"$>common/images/noimage-1200.pngで、imagesフォルダにある画像が表示されるようになっています

それを今回の画像やカスタムフィールド名にあてはめると…

<img src="<mt:If tag="CustomFieldValue" identifier="news_image">
    <mt:CustomFieldAsset identifier="news_image">
      <$mt:AssetThumbnailURL$>
    </mt:CustomFieldAsset>
    <mt:Else>
      <mt:EntryAssets type="image" sort_order="ascend" limit="1">
      <$mt:AssetThumbnailURL$>
    <mt:Else>
      <$mt:BlogRelativeURL$>images/noimage.png</mt:EntryAssets>
    </mt:If>
  " alt="">

となるわけです。

ううう〜、ちょっとむずかしいけど1つずつ考えればわかりそう!?

ちょっとこまるトフ

では別の例をつくってみましょう!
今度は、カスタムフィールドの絡まない、
公開されている記事が1件でもある場合は表示する」という動きを作ります。

<mt:If tag="EntriesCount" gt="0">
  <li>
    <a href="<$mt:BlogRelativeURL$>news.html">ニュース</a>
  </li>
</mt:If>
<mt:EntriesCount>
特定のコンテキストの中で、出力されるブログ記事の件数を返します。
https://movabletype.net/tags/2007/08/entriescount.html
gt="foo"
mt:SetVarファンクションタグに設定された変数、またはmt:SetVarBlock, mt:SetVarTemplateブロックタグの変数がfooよりも大きい場合にのみ実行します。

まず<mt:Ifにtag=mt:EntriesCount>を指定し、gtで0を指定しているので、公開されている記事が1件以上ある場合は表示する、という処理をしています。

変数を作って分岐

その他にも、変数で自分で作った内容を比較することもできます。

<mt:SetVarBlock>
ブロックタグで囲まれた内容を、変数として値を設定します。変数を呼び出すときは、<mt:Var>ファンクションタグを使います。
https://movabletype.net/tags/2007/08/setvarblock.html
eq="foo"
<mt:SetVar>ファンクションタグに設定された変数、または <mt:SetVarBlock>ブロックタグの変数がfooと一致する場合にのみ実行します。
name="name_foo"
値を代入する変数の名前を指定します。
<mt:SetVarBlock name="parent_folder">
    <mt:TopLevelFolder>
      <$mt:FolderLabel encode_html="1"$>
    </mt:TopLevelFolder>
  </mt:SetVarBlock>
  <div class="columns<mt:If name="parent_folder" eq="フォルダ名">classA<mt:Else>classB</mt:If>">

上の例では、変数を作る<mt:SetVarBlock>の名前をparent_folderとし、現在のウェブページの一番上のフォルダの名前を指定します。

次に<div class="columns medium-12 <mt:If name="parent_folder" eq="フォルダ名">ではname=”parent_folder”で先程つくった変数を呼び出します。
eq=”フォルダ名”「フォルダ名」という文字列と一緒だったら実行し、違う場合はmt:Else以降を実行します。
この場合、一番上のフォルダの名前が「フォルダ名」だったらclassAがクラス名に指定される、ということです。

他にも…
・記事のカスタムフィールドで設定した画像がある場合はそれを表示し、なければ共通の画像を表示する
・公開されている記事が1件でもある場合は表示する
・特定のフォルダ内のウェブページのレイアウトを変更する
MTタグ逆引き辞典

などなど…使い方次第でたくさん出番があります!

使いこなしておもしろいテーマを作ろう!!

タグをもって喜ぶトフ
サンプルを見る