Movable Type 4へアップグレードする方法(テンプレートの変更)

Movable Type 3からMovable Type 4へアップグレードした場合、Movable Type 4で新しく追加された機能等は反映されません。

ということで、本エントリーではMovable Type 4の新機能を利用する為の設定方法をご紹介します。

なお、本エントリーの内容をテンプレートに反映する場合、インデックステンプレートのmt.js(Movable Type 3のmt-site.jsの後継)の利用が前提になります。しかし、以前のバージョンからアップグレードした場合はmt.jsが生成されません。

なので、mt.jsの生成の仕方から順に紹介したいと思います。

注意！

このエントリーによって貴方自身に損害を受けても、本ブログのオーナーは一切保証をしないものとします。

また、テンプレートのバックアップはなるべくしておきましょう。

1.mt.jsの取得

まず、「インデックステンプレートを作成」をクリックします。

そして、名前を「JavaScript」、テンプレートの種類を「JavaScript(javascript)」、出力ファイル名を「mt.js」にそれぞれ設定して、最後に「保存」をクリックします。

そこまでいったら、インデックステンプレートの一覧に戻って、「JavaScript(mt.js)」のテンプレートのチェックボックスにチェックを付けます。

そしたら、上の部分に「アクション...」と書かれているプルダウンメニューがあるはずなので、そこを「テンプレートの初期化」に変えてから「Go」ボタンをクリックします。

すると、mt.jsのコードをゲットできます！

2.テンプレートの変更

注意！

これをやる前にmt-site.jsを読み込むようにしている要素はmt.jsを読み込むように変更してください。そうしないと、反映することが出来ません。

（1）認証表示用JavaScript

以前のバージョンまではTypeKeyでの認証のみでしたが、Movable Type 4からは、Movable Type/OpenID/LiveJournal/Vox/TypeKeyと、複数の認証方法に対応するようになりました。

そのため、TypeKey認証用JavaScriptをそれに対応出来るように変更します。

Movable Type 3

<script type="text/javascript">
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
</script>

Movable Type 4

<MTIfRegistrationAllowed>
   <div id="comment-form-external-auth">
        <script type="text/javascript">
        <!--
        writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
        //-->
        </script>
    </div>
</MTIfRegistrationAllowed>

Movable Type 4 (コメントプレビュー)

<MTIfRegistrationAllowed>
    <div id="comment-form-external-auth">
        <script type="text/javascript">
        <!--
        is_preview = true;
        writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
        //-->
        </script>
    </div>
</MTIfRegistrationAllowed>

また、コメントプレビューテンプレートには「is_preview = true;」が追加されていますので、注意してください。

！重要！

このJavaScriptはMovable Type 3ではform要素の中にありましたが、Movable Type 4ではform要素の直前に移動するようにしてください。

理由は、Movable Type 4では、コメントフォームがデフォルトで非表示になって、認証が必要な場合はサインインすることによってコメントフォームが表示されるようになったからです。

また、ブログ管理画面の「設定」→「登録・認証」にて、「認証なしコメント」をチェックすることによって認証なしでもコメントすることが可能ですが、その場合は下図のように、コメントフォームの代わりに「匿名でコメントすることもできます。 」というリンクが表示されて、それをクリックする事によってコメントフォームが表示されます。

（2）form要素

コメントフォームのform要素にid 属性comments-formを追加します。

またinput要素をひとつ追加します。

Movable Type 3

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />

Movable Type 4(コメントプレビューも同じ)

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />

（3）コメントフォーム

Movable Type 3までは「名前」と「メールアドレス」がdiv要素で囲ってあって、TypeKey サインインの時にid属性name-emailを非表示にしていましたが、Movable Type 4では「名前」と「メールアドレス」に新たに与えられたid属性comment-form-nameとcomment-form-emailによって表示・非表示を切り替えられるようにしています。

また、コメントプレビューには、value要素が追加されているので確認してください。

Movable Type 3

<div id="comments-open-data">
   <div id="name-email">
      <p>
         <label for="comment-author">名前:</label>
         <input id="comment-author" name="author" size="30" />
      </p>
      <p>
         <label for="comment-email">メールアドレス:</label>
         <input id="comment-email" name="email" size="30" />
      </p>
   </div>
   <p>
      <label for="comment-url">URL:</label>
      <input id="comment-url" name="url" size="30" />
   </p>
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
         この情報を登録しますか?</label>
   </p>
</div>

Movable Type 4

<div id="comments-open-data">
    <div id="comment-form-name">
        <label for="comment-author">名前</label>
        <input id="comment-author" name="author" size="30" />
    </div>
    <div id="comment-form-email">
        <label for="comment-email">メールアドレス</label>
        <input id="comment-email" name="email" size="30" />
    </div>
    <div id="comment-form-url">
        <label for="comment-url">URL</label>
        <input id="comment-url" name="url" size="30" />
    </div>
    <div id="comment-form-remember-me">
        <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
            ログイン情報を記憶</label>
    </div>
</div>

Movable Type 4(コメントプレビュー)

<div id="comments-open-data">
    <div id="comment-form-name">
        <label for="comment-author">名前</label>
        <input id="comment-author" name="author" size="30" value="<$MTCommentAuthor encode_html="1"$>" />
    </div>
    <div id="comment-form-email">
        <label for="comment-email">メールアドレス</label>
        <input id="comment-email" name="email" size="30" value="<$MTCommentEmail encode_html="1"$>" />
    </div>
    <div id="comment-form-url">
        <label for="comment-url">URL</label>
        <input id="comment-url" name="url" size="30" value="<$MTCommentURL encode_html="1"$>" />
    </div>
    <div id="comment-form-remember-me">
        <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
            ログイン情報を記憶</label>
    </div>
</div>

（4）CAPTCHA入力フィールド

Movable Type 4では下図のようなCAPTCHA入力フィールドを表示できるようになりました。これにより、コメントスパムをかなり軽減することが出来るようになります。

表示させるには、下記の赤色部分のタグを追記してください。

この設定とは別に、ブログ管理画面の「設定」→「コメント」にて、CAPTCHAプロバイダの設定が必要になります。

　　　　　：
<p id="comments-open-text">
   <label for="comment-text">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
   <textarea id="comment-text" name="text" rows="15" cols="50"></textarea>
</p>
<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>
<div id="comments-open-footer" class="comments-open-footer">
　　　　　：

はい、こんなもんでしょう。

ちなみに、変えてはいけないid属性は以下の通りになっています。

comment-form-name

comment-form-email

comments-open-data

comments-open-text

comments-open-footer

何故変えてはいけないのか、というと、mt.jsで参照されるid属性だからです。

そんなこといっても、mt.jsの中身をちょっといじればすぐに出来るとは思いますけれど、かえって時間がかかってしまいそうなのでおすすめはしません。

ここまでいって、問題がなければおめでとう！ということで。

失敗してしまったら、分かる範囲ならアドバイスします。