今すぐ使えるMovable Typeのテンプレートカスタマイズにおける条件分岐事例

どうも、チャイナドレスはロングしか許さないエンジニアのしょごです、こんにちわ。

今回はMovableTypeのテンプレートカスタマイズにて条件分岐を行う事例をご紹介します。

まずは登録された記事を出力する(<MTEntries>～</MTEntries>)

前提として記事データを出力するタグを紹介します。
このタグで囲ってあげたソースを記事の数分繰り返すタグで、MovableTypeでは使わないことがないとも言えるほどのタグですね。
使い方は、1記事の要素となる部分をブロック要素のようにそのまま囲ってあげればOK。

<MTEntries>
	<article>
		<h3><a href="#">記事のタイトルをここに入れたいな</a></h3>
		<div>
			<div>記事の本文をここに入れたいな</div>
			<time datetime="YYYY.MM.DD">記事の投稿日付をここに入れたいな。</time>
		</div>
	</article>
</MTEntries>

MTEntriesタグで囲われたarticleタグが記事の数分複製される形になります。
記事に登録されたデータを取得する代表的なタグは下記のものです。

• <MTEntryTitle> … 記事のタイトルを出力する。
• <MTEntryBody> … 記事の本文に入力されたデータを出力する。
• <MTEntryDate> … 記事の投稿日付を出力する。
• <MTEntryMore> … 記事の追記に入力されたデータを出力する。
• <MTEntryExcerpt> … 記事の概要に入力されたデータを出力する、入力されてない場合は本文から抜粋出力する。
• <MTEntryKeywords> … 記事のキーワードに入力されたデータを出力する。
• <MTEntryPermalink> … 記事のパーマリンクを出力する。

これらを利用して

<MTEntries>
	<article>
		<h3><a href="<MTEntryPermalink>"><MTEntryTitle></a></h3>
		<div>
			<div><MTEntryBody></div>
			<time datetime="<MTEntryDate format="%Y.%m.%d">"><MTEntryDate format="%Y.%m.%d"></time>
		</div>
	</article>
</MTEntries>

と記述すれば記事の数分登録データを利用してデータ一覧ページなどを作ることが出できます。

数値や文字列を変数化・出力する(<MTSetVar><MTGetVar>)

ただエントリーされたデータを出力するだけならもちろん簡単ですが、デザインによっては登録データを参照し、表現・レイアウトを変えたい、という要望がでてきます。
これに対応すべく入力データを変数化し、条件分岐を与えます。

<MTSetVar name="ChinaDress" value="1">

まずは条件分岐を与える値を変数に格納します。
name属性に記述したものが変数名、value属性に記述したものが格納する値になります。
phpでいうことの、

$ChinaDress = 1

になります。
文字のとおりSETなので指定名の変数に値を格納するだけです。
格納したものを出力する場合は、

<MTGetVar name="ChinaDress">

とすると記述箇所に変数に格納された値が出力されます。
このタグのvalue値には文字列を格納していますが、MTタグの値を格納することもできます。
その場合は、

<MTEntryTitle setvar="ChinaDress">

のように記述することでMTタグで取得した値をChinaDressという変数に格納できます。

【応用】変数を用いて四則演算を行う

変数に格納した値を用いて四則演算をすることができます。
例えばMTEntries中に変数に格納した数字を1つずつ増やしていく場合、

<MTSetVar name="ChinaDress" value="1">
<MTEntries>
	<article>
		<MTEntryTitle>(<MTGetVar name="ChinaDress">着目)
	</article>
	<MTSetVar name="ChinaDress" value="1" op="+">
</MTEntries>

このようにMTSetVarのop属性に+,-,*,/,%,++,–を記入することで四則演算を行うことができます。
上記はnameの名前の変数にvalueの値を足すという意味です。
MTEntriesの中にあるので繰り返すほどChinaDressに1が足されていく形です。
変数に格納された値同士を四則演算することも可能です。

<MTSetVar name="ChinaDress" value="1">
<MTSetVar name="NurseWare" value="1">
<MTEntries>
	<article>
		<MTEntryTitle>(<MTGetVar name="ChinaDress">着目)
	</article>
	<MTSetVar name="ChinaDress" value="$NurseWare" op="+">
</MTEntries>

ここで気をつけたいのは、valueに変数を設定する場合は「$NurseWare」のように$マークをつけることです。忘れないように注意してください。

ちなみに、nameとvalueに割り当てる文字は全角文字にすることも可能です、valueはともかくname属性に全角文字を割り当てるのはあまりオススメはしませんが…

<MTSetVar name="メイド服" value="萌え">
<MTGetVar name="メイド服">

条件判定を行う(<MTIf>)

変数の値が偶数だった場合や特定の文字列が入っていた場合などに条件判定を行うことができます。

<MTIf name="ChinaDress" eq="青">
	実行内容
</MTIf>

phpなどであるif文と同じですね、nameに変数名、その後に記述する属性で変数にどのような条件を与えるかが決まります。
ちなみに上記は変数「ChinaDress」に格納されている値が「青」という文字列だった場合に実行されます。
eqつまりイコールってことですね、かなり直感的記述です。
他の判定方法として、

ne=”膝上”　　変数に格納されている値が「膝上」ではなかった場合
like=”China”　変数に格納されている値に「China」が含まれている場合
lt=”5″　　　　 変数に格納されている値が「5」より小さい場合（5は含まない）
gt=”5″　　　　 変数に格納されている値が「5」より大きい場合（5は含まない）
le=”5″　　　　 変数に格納されている値が「5」以下の場合
ge=”5″　　　　 変数に格納されている値が「5」以上の場合

などがあります。
さらに、複数の条件分岐を設定することができます。

<div>
	<MTIf name="ChinaDress" eq="膝上">
		チャイナドレスはロングじゃないと。。
	<MTElseIf eq="赤">
		チャイナドレスは赤でもいいんだけどさ。。
	<MTElse>
		やっぱりチャイナドレスはロングで青だよね！！
	</MTIf>
</div>

と記載することで変数「ChinaDress」に対して条件分岐を複数あてることができ、divタグ内の値を切り替えることができます。
さらに、変数に格納してある値を計算した結果から判定することももちろんできます。

<MTIf name="ChinaDress" value="3" op="+" eq="6">
	実行内容
</MTIf>

変数「ChinaDress」に格納されてる値にvalue「3」をop「+」つまり足し、結果がeq「6」だった場合は実行する、という形になります。

まとめ

これらを用いるとエントリーを順番に表示させる際に条件に応じてHTMLを切り替えることができます。
例えば、記事一覧で偶数番目の記事のみarticleタグに特定classを付与して背景色を入れ替えるようなレイアウトを実現したい場合、

<MTSetVar name="ChinaDress" value="1">
<MTEntries>
	<article<MTIf name="ChinaDress" value="2" op="%" eq="0"> class="secound"</MTIf>>
		<h3><a href="<MTEntryPermalink>"><MTEntryTitle></a></h3>
		<div>
			<div><MTEntryBody></div>
			<time datetime="<MTEntryDate format="%Y.%m.%d">"><MTEntryDate format="%Y.%m.%d"></time>
		</div>
	</article>
<MTSetVar name="ChinaDress" value="1" op="+"></MTEntries>

のように記述すればOK。
キモの部分は、

<MTIf name="ChinaDress" value="2" op="%" eq="0"> class="sec"</MTIf>

で、変数「ChinaDress」にvalue「2」の値をop「%（余算）」をし、その結果がeq「0」だった場合にタグ内の記述を有効にします。
このような記述を行うことで要素の2つ目で折り返すレイアウトをしたり、背景色を色違いにしてみたりなどのソース調整も可能です。

さいごに

いかがでしたでしょうか。

データ出力以外にも条件分岐を加えることで、レイアウトも細かく調整することができます。
大体この辺理解してると後は応用とひらめきでなんとでもできちゃうので是非挑戦してみてください。

ちなみに今回用いた変数名に特に他意はありません、任意の名前を設定してご利用ください。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。