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

2018.04.22
この記事は約5分で読めます。

関連記事矢印MovableTypeで記事ページに関連記事一覧５件を表示できるようにカスタマイズした。参考にしたのはMovableTypeのカスタマイズでは定評ある藤本さんのブログ。
https://www.h-fj.com/blog/archives/2013/01/16-120356.php
カスタマイズ内容は
・同じカテゴリ５件を関連記事として表示
・サムネール画像を左右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件以上の記事があるが、ほとんどのサイト訪問者はその記事だけを読んで直帰していしまう。関連する記事もぜひとも読んでみてほしい。