「SimilarEntries」プラグインは、Movable TypeにJavaScriptで関連記事リストを表示するプラグインです。
https://github.com/bit-part/mt-plugin-SimilarEntries
- タグ・カテゴリー・キーワード・カスタムフィールドの値を複合的に参照できる
- MTML以外のプログラムが書けない人でも実装できる
- JSONで静的ファイルを生成するため、Movable Typeが公開サーバー外にある場合でも利用できる
導入には、複数のテンプレート追加・編集が必要となります。手順を解説します。
※この記事を書いている、2017年11月時点では、このプラグインのMT7対応は未定となっています。
全般の注意点
エンコードについて
JSON形式でテンプレートを生成する際、コードに改行・クオート・余分な空白が含まれているとシンタックスエラーとなります。このため、サンプルコードでも「trim」「encode_html」モディファイアでエンコードを行っています。
後半の関連記事リスト前後のHTMLは、JSONに直接値を渡すため、MT6.2から追加された「encode_json」モディファイアを使用しています。MT6.1以前に導入する場合は「encode_html」で代用してください。
再構築処理の影響を受ける
JSON形式のデータは、インデックステンプレートとして作成します。このため、むやみに複雑な関連性を持たせてしまうと、サイト更新時の再構築がとても遅くなってしまう可能性があります。公開キューを使用する、関連付ける条件を絞るなどの考慮をしてください。
1. 関連情報のテンプレートを作成する
最初に、関連情報のJSONファイルのテンプレートを作成します。
「SimilarEntries.relate.json」という名前のインデックステンプレートを作成し、出力ファイル名を「SimilarEntries/relate.json」としてください。
テンプレート名、出力ファイル名とも任意で構いません。ここではわかりやすく、既存ファイルとかぶりにくい内容にしています。公開設定は、cronが使えるのであれば「公開キュー」をお勧めします。
テンプレートには以下のコードを記述してください。
<mt:SimilarEntriesRelateJSON
include_blogs="1,2,3"
fields="tags,keywords,category" />
「include_blogs」モディファイア
関連付けチェックの対象とするブログIDをカンマ区切りで入力してください。MTMLの変数として渡すこともできます。
「fields」モディファイア
対象とする情報を指定します。タグ・キーワード・カテゴリーの他に、「field.カスタムフィールドのベースネーム」と記載することで、カスタムフィールドの値も参照できます。
2. 記事繰り返し部分のテンプレートを作成する
続いて、関連記事リストの記事繰り返し部分のテンプレートを作成します。
「SimilarEntries.template.json」という名前のインデックステンプレートを作成し、出力ファイル名を「SimilarEntries/template.json」としてください。 テンプレート名、出力ファイル名、公開設定とも先ほどと同じです。
テンプレートには以下のコードを記述してください。
<mt:SimilarEntriesTemplateJSON include_blogs="1,2,3">
<li><a href="<mt:EntryPermalink />"><mt:EntryTitle encode_html="1" /></a></li>
</mt:SimilarEntriesTemplateJSON>
「include_blogs」モディファイア
前項と同じ値を指定してください。
「mt:SimilarEntriesTemplateJSON」タグ内
繰り返し部分のMTMLを記述します。ここでは、Entries関連のタグをすべて利用でき、アセットやカスタムフィールドの値も参照できます。
3. 記事テンプレートをカスタマイズする
アーカイブテンプレートの「記事」の編集画面を開き、関連記事リストを表示したい箇所に以下のコードを記述してください。
モディファイアが多数あります。複雑なものは、事前に「SetVarBlock」タグで変数化することをお勧めします。
<mt:TemplateNote value="関連記事情報のJSONのURL" />
<mt:SetVarBlock name="__similar_relation_url__">
<mt:BlogURL />SimilarEntries/relate.json
</mt:SetVarBlock>
<mt:Var name="__similar_relation_url__" encode_html="1" trim="1" setvar="__similar_relation_url__" />
<mt:TemplateNote value="関連記事ループ部分のJSONのURL" />
<mt:SetVarBlock name="__similar_template_url__">
<mt:BlogURL />SimilarEntries/template.json
</mt:SetVarBlock>
<mt:Var name="__similar_template_url__" encode_html="1" trim="1" setvar="__similar_template_url__" />
<mt:TemplateNote value="関連記事開始前のHTML" />
<mt:SetVarBlock name="__similar_first__">
<div class="similar">
<div class="similar-header">
<h2 class="similar-title">関連記事</h2>
<!-- /.similar-header --></div>
<div class="similar-contents">
<ul>
</mt:SetVarBlock>
<mt:Var name="__similar_first__" encode_json="1" setvar="__similar_first__" />
<mt:TemplateNote value="関連記事終了後のHTML" />
<mt:SetVarBlock name="__similar_last__">
</ul>
<!-- /.similar-contents --></div>
<!-- /.similar --></div>
</mt:SetVarBlock>
<mt:Var name="__similar_last__" encode_json="1" setvar="__similar_last__" />
<mt:SimilarEntriesShow
fields="tags,keywords,category"
priority="tags:10,keywords:3,category:1"
relation_url="$__similar_relation_url__"
template_url="$__similar_template_url__"
target_selector="#similar-entries-01"
limit="5"
first="$__similar_first__"
last="$__similar_last__" />
<div id="similar-entries-01"></div>
「fields」モディファイア
「mt:SimilarEntriesRelateJSON」と同じ値で構いません。関連付けデータではすべての情報を取得しておき、表示部分ではタグの関連記事リスト、カスタムフィールドの関連記事リスト…と出し分けることも可能です。
「priority」モディファイア
関連度評価の優先度です。大きいほど一致したときにリストに出やすくなります。カテゴリーの優先度を高くすると、どの記事も同じリストになりがちです。1、もしくは指定しないことをお勧めします。
「relation_url」モディファイア
関連付けデータのJSONのURLを指定します。
「template_url」モディファイア
記事繰り返し部分のURLを指定します。
「target_selector」モディファイア
jQueryのセレクタの書式で、リストを表示する要素名を指定します。
「limit」モディファイア
表示件数を指定します。指定がなければ10件となります。
「first」モディファイア
開始前のHTMLを指定します。必ずエンコードしてください。
「last」モディファイア
終了後のHTMLを指定します。必ずエンコードしてください。
TIPS
プラグイン内のJavaScriptを移動したい場合
関連記事リストを表示する際は、「SimilarEntries」プラグインの下記ファイルを参照します。
（Movable Type管理画面のURL）mt-static/plugins/SimilarEntries/js/SimilarEntries.js
Movable Typeの設置URLを隠したい場合は、SimilarEntries.jsファイルを移動したうえで、script_urlモディファイアでパスを明示してください。
<mt:SimilarEntriesShow
・・・
script_url="（移動先のURL）" />
数件ごとにHTMLを挿入する
段組などで、エントリー数件ごとにHTMLを挿入したい場合は、以下の通り追加関数を指定することができます。
関数内の変数の「i」は件数、「text」はその時点での出力結果です。「odd」「even」は奇数、偶数の際にtrueとなります。
<mt:TemplateNote value="3件ごとにrowを閉じる" />
<mt:SetVarBlock name="__similar_function__">
function(i, text, odd, even){
if (i % 3 == 0) {
text += '<!-- /.row --></div><div class="row">'
}
return text;
}
</mt:SetVarBlock>
<mt:SimilarEntriesShow
・・・
each_function="$__similar_function__" />
より安全にJSONを生成したい場合
空白・改行の除去レベルを細かく指定できる「compress modifier」プラグインの併用をお勧めします。