Movable Type の記事投稿画面で、各入力フォームのラベルや位置などのインターフェースを、カテゴリごとに変えられるように管理画面をカスタマイズしてみました。 カスタマイズといっても、管理画面のテンプレートはほとんどいじらずに、jQuery で書いた JavaScript テンプレートを読み込むだけです。もう少し正確に言えば、本体のテンプレートは一切いじらず、コピーをカスタマイズして、別のデ...
Movable Type の記事投稿画面で、各入力フォームのラベルや位置などのインターフェースを、カテゴリごとに変えられるように管理画面をカスタマイズしてみました。
カスタマイズといっても、管理画面のテンプレートはほとんどいじらずに、jQuery で書いた JavaScript テンプレートを読み込むだけです。もう少し正確に言えば、本体のテンプレートは一切いじらず、コピーをカスタマイズして、別のディレクトリに置くだけです。
カスタムフィールドのない MTOS や、マルチブログにするほどでもないけどちょっとインターフェースを変えたいんだよなーってときに役立つと思います。
ブログ記事の作成・編集画面に、あらかじめ設定したカテゴリごとにインターフェースを変えるボタンを追加します。
例えば、「スケジュール」カテゴリ専用のインターフェースを作る場合、編集画面に次のようなボタンが表示されます。
これをクリックすると、ボタンが次のように変わり、各入力フォームのラベル名や位置が「スケジュール」カテゴリ専用のインターフェースに変わります。新規作成の場合は該当するカテゴリが自動的に選択されます。
もう一度ボタンをクリックすると、ボタンがグレーになり、該当するカテゴリの選択も解除されます。
下のボタンをクリックしてみてください。少しイメージがつかめると思います。
管理画面のカスタマイズについては以前の記事(Movable Type のブログ記事の出力ファイル名を変更する管理画面のカスタマイズ)でも書きましたが、『Movable Type プロフェッショナル・スタイル MT4.1対応』の Track B の「 5 ユーザー指向の管理画面をつくる」がとても参考になります。
今回カスタマイズするのは、ブログ記事やウェブページの編集画面用のテンプレートファイル「 edit_entry.tmpl 」です。このファイルは以下の場所にあります。
このファイルをローカルにコピーして同名で保存したファイルをカスタマイズします。
さて、このカスタマイズの内容を解説しようと思っていたのですが、結局ほぼすべてが jQuery の解説になってしまうのでここでは割愛します。その代わりと言ってはなんですが、カスタマイズしたファイルを置いておくので「使用方法」という形で解説します。
なお、jQuery については、『jQueryで作る Ajaxアプリケーション』という書籍で勉強しています。初心者の僕でも非常に分かりやすいです。
ここにあるファイルは Movable Type 4.22 用です。それ以外の MT 4.x で使用する場合はページの最後の方の説明を参考にしてください。
ダウンロードしたファイルを解凍します。解凍して出来たフォルダの中に次のファイルとフォルダが入っています。
これらのファイルの内、ui_changer.tmpl を UTF-8 で保存できるテキストエディタ等で開いて編集します。
まず、このファイルの 2 ~ 5 行目の、「スケジュール」と「3」の部分を変更します。
<mt:Ignore><!-- ▼ Must Edit ▼ --></mt:Ignore>
<mt:setvarblock name="change_cat">スケジュール</mt:setvarblock>
<mt:setvarblock name="change_cat_id">3</mt:setvarblock>
<mt:Ignore><!-- ▲ Must Edit ▲ --></mt:Ignore>
「スケジュール」部分にはユーザーインターフェース(以下「 UI 」)を変更する対象となるカテゴリ名を、「3」部分にはそのカテゴリ ID を入れます。カテゴリ ID は、各カテゴリ編集ページの URL の最後の「 id=3 」の部分の数字です。
次に、26 行目の 「 // ▼ Edit ▼ 」から 82 行目の「 // ▲ Edit ▲ 」までの間を編集します。
// ▼ Edit ▼
// タイトル
title
// .insertBefore()
// .insertAfter()
.find('label#title-label').text('タイトル');
// 本文
content
// .insertBefore()
// .insertAfter()
.find('div#editor-inner div label:eq(0)').text('本文');
// 続き
content
// .insertBefore()
// .insertAfter()
.find('div#editor-inner div label:eq(1)').text('続き');
// タグ
tags
// .removeClass('hidden')/* 表示 */
// .addClass('hidden') /* 非表示 */
// .insertBefore()
// .insertAfter()
.find('label#tags-label').text('タグ');
// 概要
excerpt
// .removeClass('hidden')/* 表示 */
// .addClass('hidden') /* 非表示 */
// .insertBefore()
// .insertAfter()
.find('label#excerpt-label').text('概要');
// キーワード
keywords
// .removeClass('hidden')/* 表示 */
// .addClass('hidden') /* 非表示 */
// .insertBefore()
// .insertAfter()
.find('label#keywords-label').text('キーワード');
// 公開日
authored_on
// .removeClass('hidden')/* 表示 */
// .addClass('hidden') /* 非表示 */
// .insertBefore()
// .insertAfter()
.find('label#authored_on-label').text('公開日');
});
// 公開日をメインコンテンツ(左カラム)に移す場合のスタイル設定
/* ← この行を削除
jQuery('div#authored_on-field').each(function(){
jQuery(this).find('div.field-header')
.css({'float':'none','width':'auto'});
jQuery(this).find('div.field-content')
.css('margin-left','0');
jQuery(this).find('label#authored_on-label')
.css('text-align','left');
});
この行を削除 → */
// ▲ Edit ▲
それぞれのフォームの「 ~.text('タイトル'); 」の部分を変更します。デフォルトのラベル名が入っているので分かりやすいと思います。
(例) デフォルトのラベル名「タイトル」を「場所」に変更する場合
// タイトル
title
// .insertBefore()
// .insertAfter()
.find('label#title-label').text('場所');
それぞれのフォームの次のどちらかの(かっこ)内に値を入れて、行頭の「 // 」を削除します。
// .insertBefore()
// .insertAfter()
この 2 行の役割は次のとおりです。少しややこしいですが、慣れれば簡単です。
title の前に挿入(移動)します。
title の後に挿入(移動)します。
(かっこ)内に入れる値は、コメントアウトしてある各フォーム名の直下にある変数名です。「本文」と「続き」は、場所的には 2 つで 1 セットなので同じ変数名になっています。
// タイトル
title
// .insertBefore()
// .insertAfter()
.find('label#title-label').text('タイトル');
// 本文
content
// .insertBefore()
// .insertAfter()
.find('div#editor-inner div label:eq(0)').text('本文');
「タグ」、「概要」、「キーワード」、「公開日」に関しては、強制的に表示・非表示を切り替えることができます。
次のどちらかの行頭の「 // 」を削除すればOKです。
// .removeClass('hidden')/* 表示 */
// .addClass('hidden') /* 非表示 */
ラベルを変更する可能性のあるフォームの中で、「公開日」だけが右カラムにあります。これを左カラムに移動する場合はスタイルを変更する必要があります。
その場合、次の 2 行目の「 /* ← この行を削除 」と最後の「 この行を削除 → */ 」を削除します。
// 公開日をメインコンテンツ(左カラム)に移す場合のスタイル設定
/* ← この行を削除
jQuery('div#authored_on-field').each(function(){
jQuery(this).find('div.field-header')
.css({'float':'none','width':'auto'});
jQuery(this).find('div.field-content')
.css('margin-left','0');
jQuery(this).find('label#authored_on-label')
.css('text-align','left');
});
この行を削除 → */
ここまでで設定したファイルを上書きし、解凍したをフォルダとファイルを丸ごと、Movable Type 本体がインストールしてあるディレクトリ内の alt-tmpl ディレクトリにアップロードすればOKです。
使用を中止したいときは、ここでアップロードしたファイルを削除すればOKです。
2 つ以上のカテゴリを、個別のインターフェースで使用したい場合、上記の方法で ui_changer.tmpl ファイルを編集し、別名で保存します。ここでは ui_changer_2.tmpl として保存したとします。
次に、edit_entry.tmpl を編集します。
edit_entry.tmpl の 983 ~ 986 行目に次の記述があります。
<mt:include name="include/jQuery.tmpl">
<mt:include name="include/ui_changer_setup.tmpl">
<mt:include name="include/ui_changer.tmpl">
<mt:include name="include/header.tmpl" id="header_include">
この 3 行目の下に、先ほど別名で保存したファイルをインクルードする 1 行を加えればOKです。
<mt:include name="include/jQuery.tmpl">
<mt:include name="include/ui_changer_setup.tmpl">
<mt:include name="include/ui_changer.tmpl">
<mt:include name="include/ui_changer_2.tmpl">
<mt:include name="include/header.tmpl" id="header_include">
サンプルとして、「スケジュール専用 UI 」と「試合結果専用 UI 」を作ってみました。
使い方は以上です。
ここに置いてあるファイルは Movable Type 4.22 用ですが、以下のようにすればそれ以外の MT 4 でも使えると思います。
まず、本体の edit_entry.tmpl をコピーして開きます(ページ中ほどのカスタマイズするファイルの準備参照)。
開いたファイルのだいたい 980 行付近に次の 1 行があると思います。
<mt:include name="include/header.tmpl" id="header_include">
この行の直前に、次の 3 行を挿入すればOKです。
<mt:include name="include/jQuery.tmpl">
<mt:include name="include/ui_changer_setup.tmpl">
<mt:include name="include/ui_changer.tmpl">
カテゴリにチェックを入れる動きを少し修正しました。
UI チェンジャーをクリックすると、自動的に対象カテゴリにチェックが入り、もう一度クリックすると対象カテゴリのチェックが外れる動作を、新規投稿時も編集時も安定して行うようになりました。
※ご利用は自己責任でお願いします。