2013/10/04

MovableTypeで3日以内に投稿された記事に新着マークを付ける方法(オンリーMT版)

MovableTypeで3日以内に投稿された記事に新着マークを付ける方法(オンリーMT版)

前回ご紹介した『MovableTypeで3日以内に投稿された記事に新着マークを付ける方法』では、JavaScriptを利用して新着マークを付与していましたが、今回はJavaScriptを使用せずMTタグで実装する方法をご紹介します。

サンプルコード

<ul>
<mt:Entries lastn="10">
<li>
	<a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a>
	<$mt:SetVar name="threedays" value="3"$>
	<$mt:SetVar name="threedays" op="*" value="86400"$>
	
	{{capture name=nowdate}}<$mt:Date format="%x" language="en"$>{{/capture}}
	{{assign var=nowdate value="$smarty.capture.nowdate|strtotime}}
	<mt:SetVarBlock name="nowdate">{{$nowdate}}</mt:SetVarBlock>
	
	{{capture name="article"}}<$mt:EntryDate format="%x" language="en"$>{{/capture}}
	{{assign var=article value="$smarty.capture.article|strtotime}}
	<mt:SetVarBlock name="article">{{$article}}</mt:SetVarBlock>
	
	<$mt:SetVar name="nowdate" op="-" value="$article"$>
	
	<mt:If name="nowdate" le="$threedays">
	<span>NEW</span>
	</mt:If>
</li>
</mt:Entries>
</ul>

5,6行目

何日前までの投稿に新着マークを表示するか設定します。
86400は、1日を秒数に変換した値(60×60×24)です。これに3倍して3日としています。

<$mt:SetVar name="threedays" value="3"$>
<$mt:SetVar name="threedays" op="*" value="86400"$>

8~10行目

ユーザーがブラウザでページを表示した日付を取得し、「nowdate」に代入します。
その後、PHPのstrtotime()関数を使用して変数「nowdate」の値をUNIXスタンプに変換します。

{{capture name=nowdate}}<$mt:Date format="%x" language="en"$>{{/capture}}
{{assign var=nowdate value="$smarty.capture.nowdate|strtotime}}
<mt:SetVarBlock name="nowdate">{{$nowdate}}</mt:SetVarBlock>

12~14行目

記事の投稿日を取得して、「article」に代入します。
先程と同様にPHPのstrtotime()関数を使用して変数「article」の値をUNIXスタンプに変換します。

{{capture name="article"}}<$mt:EntryDate format="%x" language="en"$>{{/capture}}
{{assign var=article value="$smarty.capture.article|strtotime}}
<mt:SetVarBlock name="article">{{$article}}</mt:SetVarBlock>

16行目

先程の変数「nowdate」と変数「article」の値から投稿から何日経過しているかを計算します。

<$mt:SetVar name="nowdate" op="-" value="$article"$>

18~20行目

計算の結果、投稿からの経過時間が3日以内なら<mt:If></mt:If>内のHTMLを吐き出します。

<mt:If name="nowdate" le="$threedays">
<span>NEW</span>
</mt:If>

出力されるコード

<ul>
	<li><a href="記事01のURL">記事01</a><span>NEW</span></li>
	<li><a href="記事02のURL">記事02</a><span>NEW</span></li>
	<li><a href="記事03のURL">記事03</a><span>NEW</span></li>
	<li><a href="記事04のURL">記事04</a></li>
	<li><a href="記事05のURL">記事05</a></li>
	<li><a href="記事06のURL">記事06</a></li>
</ul>

まとめ

今回ご紹介した方法は、ユーザーがページにアクセスした際に処理されます。つまり動的生成で利用する必要がありますので、設定に注意するようにして下さい。少し難しいですが、変数を利用すればMovableTypeも自在にカスタマイズすることが出来るようになります。