Movable Type における管理画面のカスタマイズ

ここでは AS3 ネタを主にメモしようと思っていたのだけど、
CMS でもメモしときたいことが多くあるので、
CSS Nite 参加表明を機に書くことにした。

管理画面をカスタマイズするには MT フォルダ内の
editor.tmpl というテンプレートをいじらなくてはいけない。
つまり、複数ブログを使用している場合、
これをいじってしまうと全ブログでこの修正が反映されてしまう。
ブログ毎の管理画面でテンプレートを変更するためには、
CMSContext というプラグインを利用する。

インストール方法は、通常のプラグインと同じく上記から
該当 ZIP をダウンロードし、解凍した CMSContext フォルダを
そのまま plugins ディレクトリにアップロードする。
今回サンプルとして、以下のカスタマイズを行う。

• タイトル部分のラベルを”タイトル”から”会社名”へ変更
• 本文のテキストエリアを非表示にする

まず下準備として、MTディレクトリ/tmpl/cms にある
管理画面のテンプレートファイル edit_entry.tmpl を一旦ローカルにコピー。
それを元にカスタマイズしていく。

タイトル部分のラベルを”タイトル”から”会社名”へ変更

1049行目のlabel部分を”タイトル”を“会社名”に置き換える

    " maxlength="255" mt:watch-change="1" onkeyup="rebasename(this)" />

本文のテキストエリアを非表示にする
最初、それらしき部分をコメントアウトするなどして試みるが、
どうやら必要な hidden タグなど設定に必要なものも消してしまっているらしくうまくいかない。
スクリプト部分など解析する気にもならないにはちょっとやっかいなので、
ここを生かしつつ、フィールドをデザイン上から消すのに、
それらしき DIV 内に display:none を設定することでうまくいった。
ここでは1059行目と1090行目の DIV を display:none にすることで対応。
display: none; で対応してみたところ、IE では問題ないのだが、Firefox で挙動がおかしい。
エントリー時は問題ないが、登録された記事に修正をかけようとすると、
右の「表示オプション」や上部のブログの切り替えタブが利かない。
色々試して結局落ち着いたのは、こんな感じ。 1059行目と1090行目の DIV に以下のスタイルを指定する。
ソース的には美しくないが…。

visibility:hidden; height:0; overflow:hidden;

Firefox だと、visibility:hidden; height:0; の指定だけで大丈夫なのだけど、
IE だと表示オプションなどのプルダウンメニューを動作させると、
hidden した箇所が表示されてしまうという現象が見られたので、
overflow 指定でも hidden しておくというちょっと強引な手段で。

    

    

    //～省略～
    
    

    

MT ディレクトリ /plugins/CMSContext/tmpl に適当なディレクトリを作り、
カスタマイズした edit_entry.tmpl をアップする。
ここでは alt-tmpl というディレクトリにアップしている。

[ツール]→[プラグイン]のCMSContext 設定で、
プラグイン有効にチェックし、代替テンプレートのパスを設定し変更を保存する。
ここでは alt-tmpl と入れる。

ヘッダーの[ブログを書くボタン]でブログ作成画面へ遷移すると、
以下イメージのように修正が反映されている（ハズ）。
※ PDF というボタンはカスタムフィールドで追加したボタンです。

これを各ブログの管理画面に合わせて繰り返し設定する。

追記）
ちなみに複数ブログを利用せず管理画面をひとつしか使用しない場合は、
CMSContext プラグインを使用しなくてもよい訳だけど、
その場合、MTディレクトリ/tmpl/cms/edit_entry.tmpl を直接いじってしまうと、
アップデートなどの際に動作が保証されないので、
MTディレクトリ/alt-tmpl/cms/edit_entry.tmpl にコピーして、これを編集する。

これは管理画面のテンプレートは MT ディレクトリ/tmpl/ より、
MTディレクトリ/alt-tmpl/ の方が優先されて反映されるため。