JavaScript
MovableType
CMS

Movable Typeで関連記事を表示するプラグイン「SimilarEntries」を導入する場合の注意点

「SimilarEntries」は、カテゴリー・カスタムフィールド・タグなどが一致している記事を自動表示するMovable Type用プラグインです。

https://github.com/bit-part/mt-plugin-SimilarEntries

商用目的では有償となります(1サーバーあたり10,000円)。
実装手順についてはリポジトリのReadmeが詳しいので、割愛します。

Ajaxを利用しているため、MT本体に負担をかけない・静的なページでも表示できるなどのメリットがあります。
回遊率を上げるなら検討すべきプラグインですが、実装の際はいくつか注意点があります。

表示順を指定できない

関連記事の抽出後の結果は、表示順が固定となります(投稿日かID降順?)。このため、昇順やランダム表示はできません。

実は、以下にあるコアのJavaScriptファイルには、表示順のパラメータがありますが未実装となっています。
メンテナンス性が落ちますが、このファイルを参考にオリジナルのスクリプトを書くことで、表示順のコントロール自体は可能です。

https://github.com/bit-part/mt-plugin-SimilarEntries/blob/master/mt-static/plugins/SimilarEntries/js/SimilarEntries.js

とりあえずランダムにする方法は、以下を参照ください。

Movable Typeで関連記事を表示するプラグイン「SimilarEntries」をランダム表示にする
https://qiita.com/webbingstudio@github/items/d20ecd0abcb42fb237d8

条件に合致する記事が少ない場合、他の記事で埋めることができない

例えば、以下の条件で関連記事の設定をしていたとします。

  • 同じカテゴリーの記事を表示する
  • 10件まで表示する

にも関わらず、同じカテゴリーの記事が5件しかなかった場合は、その5件しか表示しません。

「必ず10件表示したいので、残りの5件は条件に合致しなかった記事で適当に埋めてほしい」ということはできないので、エントリーの件数が大きく影響する場合や、ウェブサイトの立ち上げ時には注意してください。

コールバックがない

コードを見た限りでは、ないようです。
「関連記事のロードが完了した段階で、FONTPLUSやTypekitのリロードを行いたい」という場合は、先述の方法でコアファイルの末尾に直接メソッドを書いてください。

管理画面の場所がバレる

これはMovable Typeに限らず、どのCMSにも言えることですが、デフォルトの状態で実装すると、Movable Type本体からJavaScriptファイルを呼び出すため、ソースコードにインストール先のURLが書き出されてしまいます。

関連記事をロードする箇所に記述する「SimilarEntriesShow」タグには、スクリプトのURLを指定する属性があります。これを利用すると、公開サイト内を起点としたサーバーパスに書き換えることができます。

similarEntries_show.mtml
<mt:SimilarEntriesShow
・・・
    script_url="/SimilarEntries/SimilarEntries.js"
・・・
/>

この指定を行ったうえで、以下のいずれかの対応をしてください。

メンテナンス性重視の場合
/SimilarEntries/SimilarEntries.jsへのリクエストを、.htaccessでMovable Type本体へリダイレクトする
セキュリティ重視の場合
Movable Type本体のSimilarEntries.jsを公開ディレクトリへ移動する

first, lastに改行を含むHTMLを指定するとエラーになる

関連記事をロードする箇所に記述する「SimilarEntriesShow」タグには、合致する関連記事が合った場合に、最初と最後に表示するHTMLを指定する属性があります。
しかし、この属性に長いHTMLタグを書くと、シンタックスエラーとなり表示されません。

以下の通り、改行コードをすべて詰めたHTMLを変数に代入すれば表示できます。
(変数名の前後のアンダーバーは、一時変数であるという意味で個人的に入れています。なくても構いません)

similarEntries_show_html.mtml
<mt:SetVarBlock name="__related_first__"><div class="widget widget-related"><div class="widget-header"><h2 class="widget-title">この記事もおすすめ!</h2></div><div class="widget-contents"></mt:SetVarBlock>

<mt:SetVarBlock name="__related_last__"></div><!-- /.widget --></mt:SetVarBlock>

<mt:SimilarEntriesShow
・・・
    first='$__related_first__'
    last='$__related_last__'
・・・
/>
<div id="similar-entries"></div>

補足

なんとなくわかると思いますが、基本はJSとJSONなので、同じコードを書くことができれば、他のCMSでも実装できます。
関連記事機能がないCMSを導入してお困りの方は、こちらをフォークしてみてはどうでしょう。
同じ作者さんがAjax検索ライブラリも公開しています。

https://github.com/tinybeans/jq-plugin-flexibleSearch

関連記事楽しいですね\(^o^)/良い関連記事ライフを。