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:Unless
はmt: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タグ逆引き辞典
などなど…使い方次第でたくさん出番があります!
使いこなしておもしろいテーマを作ろう!!