MovableTypeで記事ページに関連記事一覧5件を表示する方法

関連記事矢印MovableTypeで記事ページに関連記事一覧5件を表示できるようにカスタマイズした。参考にしたのはMovableTypeのカスタマイズでは定評ある藤本さんのブログ。
https://www.h-fj.com/blog/archives/2013/01/16-120356.php
カスタマイズ内容は
・同じカテゴリ5件を関連記事として表示
・サムネール画像を左右200ピクセルで表示
である。

▼実際にカスタマイズしたテンプレートの例

<mt:If name="entry_archive">
<$mt:EntryID setvar="entryid"$>
<$mt:SetVar name="count" value="0"$>
<mt:EntryIfTagged>
<mt:SetVarBlock name="Sametags"><mt:EntryTags glue=' OR '><$mt:TagName$></mt:EntryTags></mt:SetVarBlock>
<mt:Entries lastn="6" tags="$Sametags" setvar="related_entries">
<mt:If tag="EntryID" ne="$entryid">
<mt:If name="count" lt="5">

<p style="clear: left"><a href="<$mt:EntryPermalink$>?related_entries">
<MTEntryAssets type="image" lastn="1">
<img class="eyes" src="<$MTAssetThumbnailURL width="200"$>" alt="<$MTEntryTitle$>" style="float: left; margin: 0 20px 20px 0;" />
<mt:Else>
<img class="eyes" src="/img/migiyajirui.jpg" alt="<$MTEntryTitle$>" style="float: left; margin: 0 20px 20px 0;" />
</MTEntryAssets>
<$mt:EntryTitle$></a><!--タグによる関連記事--></p>

<$mt:SetVar name="count" op="++"$>
</mt:If>
</mt:If>
</mt:Entries>
<mt:Else>
<$mt:EntryCategory setvar="Samecat"$>
<mt:Entries lastn="6" category="$Samecat" setvar="related_entries">
<mt:If tag="EntryID" ne="$entryid">
<mt:If name="count" lt="5">

<p style="clear: left"><a href="<$mt:EntryPermalink$>?related_entries">
<MTEntryAssets type="image" lastn="1">
<img class="eyes" src="<$MTAssetThumbnailURL width="200"$>" alt="<$MTEntryTitle$>" style="float: left; margin: 0 20px 20px 0;" />
<mt:Else>
<img class="eyes" src="/img/migiyajirui.jpg" alt="<$MTEntryTitle$>" style="float: left; margin: 0 20px 20px 0;" />
</MTEntryAssets>
<$mt:EntryTitle$></a><!--カテゴリによる関連記事--></p>

<$mt:SetVar name="count" op="++"$>
</mt:If>
</mt:If>
</mt:Entries>
</mt:EntryIfTagged>
<mt:If name="count">
<div class="widget-related-entries widget-archives widget">
【この記事のカテゴリ】<br />
<mt:ParentCategories glue=" &raquo; ">
<a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
</mt:ParentCategories>
<h3 class="widget-header">関連記事(同じカテゴリまたはタグの記事)</h3>
<div class="widget-content">
<ul>
<$mt:GetVar name="related_entries"$>
</ul>
</div>
</div>
</mt:If>
</mt:If>
<p style="clear: left"></p>
<hr />

さて、このような関連記事を表示するそもそもの理由はなにか?

目的は、サイト内の回遊性を高めることである。
目標は、直帰率を改善すること。

当サイト内には4000件以上の記事があるが、ほとんどのサイト訪問者はその記事だけを読んで直帰していしまう。関連する記事もぜひとも読んでみてほしい。


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  
 

この記事のURL「https://dm2.co.jp/2018/04/relatedentries.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2018/04/relatedentries.html」をQRコードで表示「https://dm2.co.jp/2018/04/relatedentries.html」
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。