MTで公開前にエントリーのプレビューを行うプラグイン｜caraldo.net

2007年7月25日

コメント（0）トラックバック（0） Posted by ; k.

MTで公開前にエントリーのプレビューを行うプラグイン

Movable Typeのエントリーのプレビューは「確認」をクリックで出来栄えを見ることができますが、
管理用のCSSを用いているため実際に公開した際にとんでもない事になっていたりします。

公開後に慌てて直すのは嫌ですね。

このプラグインは、所謂『隠しページ』なるものを作成し
公開前に表示を確認するというものです。

実際に表示される通りになりますので全体的なデザインのチェックまでできます。

いつもお世話になっております小粋空間: エントリーのプレビューを行うプラグインを参照させて頂きました。

とても親切丁寧な説明なのですが、情報が古かった（若しくはバージョンの差異）があったため
一部ソースを変更しました。

ちなみに今回は個別エントリーアーカイブの確認を行う形にしております。
バージョンはMovable Type3.35です。

1.プラグインのダウンロード

The blog of H.Fujimoto：エントリーのプレビューを行うプラグイン(その1）
より mt-rebuild-preview.zip のリンクをクリックしてプラグインアーカイブをダウンロードします。

2.ファイルのアップロード

1.のZIPファイルを解凍すると、「mt-rebuild-preview」のフォルダができ、その中に以下のファイルができます。

mt-rebuild-preview.cgi
/extlib/FJ/RebuildPreview.pm
/plugins/TagsForPreview.pl
/tmpl/cms/rebuild_preview.tmpl

なお、ファイルの文字コードはutf-8(MTデフォルト)になっている為
他の文字コードを使用している方はこの時点で文字コードを変換して保存し直して下さい。

文字コード - Wikipedia

これらのファイルを、MTCGIPath(Movable TypeのCGIスクリプトがあるディレクトリのURLパス) を
ルートパスとして、同じ名称のディレクトリ配下にそれぞれアップロードします。
存在しないディレクトリ（FJ）は新たに作成してください。

mt-rebuild-preview.cgi のパーミッションは 755 等に変更してください。

より詳しいパーミッションについての説明はパーミッションについてを参照下さい。

3.個別エントリーアーカイブプレビュー用テンプレートの作成

Movable Typeの管理画面（mt.cgi）に入り、個別エントリーアーカイブテンプレートを開いて、その内容をすべてコピーします。

インデックステンプレートに戻り「インデックステンプレートの作成」をクリックします。

↑の画像クリックで拡大表示します。

次のページでそれぞれ以下のように設定します。

テンプレートの名前：エントリープレビュー（任意）
出力ファイル名：preview.html（任意、他の方に参照されない名称）
再構築オプション：チェックを外す
テンプレートの中身：個別エントリーアーカイブの中身を丸ごとコピー
　

4.テンプレートの修正

コピーまで完了したら全体を

<MTPretendIndividualTemplate>～</MTPretendIndividualTemplate>

上記タグで括ります。xml宣言より上からで構いません。

修正が終わったら、保存・再構築します。
出力ファイル名を指定して表示されていればここまでの設定はOKです。

5.プレビュー用テンプレートの関連付け

作成したテンプレートをプレビュー用テンプレートとして関連づける作業を行います。

Movable Typeの管理画面（mt.cgi）のトップに戻りシステムメニューの中のプラグインを選択します。

インストールしているプラグインの一覧から『Tags For Preview 0.02』をクリックします。

クリックするとインデックステンプレート一覧表示画面に遷移します。ここでプレビュー用のテンプレートを選択し、「保存」ボタンをクリックします。

6.管理画面にプレビュー用の設定を追加

/tmpl/cms/edit_entry.tmpl を任意のエディタで開き修正を加えます。
ここが小粋空間様での紹介と一部異なりました。

edit_entry.tmplの137行目辺りに青色部分を足します。

function doRebuildPreview (){
window.open('mt-rebuild-preview.cgi?__mode=start_rebuild&blog_id=<TMPL_VAR NAME=BLOG_ID>&entry_id=<TMPL_VAR NAME=ID>','doRebuildPreview','width=400,height=250,resizable=yes,scrollbars=yes');
}

function listPreviousPings () {
window.open('<TMPL_VAR NAME=SCRIPT_URL>?__mode=pinged_urls&entry_id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>','urls','width=370,height=250,resizable=yes,scrollbars=yes');
}

次にエントリー画面にボタンを作成していきます。
edit_entry.tmplの427行目辺りに下記ソースがあります。

<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<TMPL_INCLUDE NAME=entry_actions.tmpl>
</TMPL_IF>

entry_actions.tmplファイルを読み込んでいるようなので
同階層にあるentry_actions.tmplを開きます。

1行目に青色部分を足します。

<div class="list-actions">
<div class="button-bar">
<TMPL_IF NAME=IS_POWER_EDIT>
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">"> 
</TMPL_UNLESS>

9行目辺りに青色部分を足します。

<TMPL_IF NAME=ENTRY_EDIT>
<input accesskey="s" type="button" value="<MT_TRANS phrase="Save">" title="<MT_TRANS phrase="Save this entry (s)">" onclick="clearDirty(); 
submitForm(this.form, 'save_entry'); return true" />
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doRebuildPreview()" type="button" value="<MT_TRANS phrase="Preview on Blog">">
</TMPL_UNLESS>

ここまでの作業が終われば個別エントリーアーカイブのプレビューができる状態になります。