なんてタイトルの長い記事なんでしょう。。。

さて、以前「Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ （ jQuery 版）」という方法を紹介しました。

その記事に「あとカスタムフィールドを使いたいのですが可能でしょうか？」というコメントを頂いたので、このカスタマイズをカスタムフィールドに適用する方法を紹介します。

ダウンロードと基本的な使い方

ダウンロードや基本的な使い方は、以下の記事を参照してください。

カスタムフィールドにも適用させる方法（カスタマイズ編）

この UI チェンジャーは、ui_changer.tmpl をカスタマイズすることで、カスタムフィールドにも適用することができます。

まず、カスタムフィールドの設定画面で、UI チェンジャーを適用させたいカスタムフィールドの「ベースネーム」を確認します。ここでは例として「publicdate」となっています。

uichanger_custom_001.png

次に、ui_changer.tmpl の 11〜16行目の後に、次のような形式でカスタムフィールドのボックスに関する設定を追加します。

var title       = jQuery('div#title-field');
var content     = jQuery('div#editor');
var tags        = jQuery('div#tags-field');
var excerpt     = jQuery('div#excerpt-field');
var keywords    = jQuery('div#keywords-field');
var authored_on = jQuery('div#authored_on-field');
var ベースネーム = jQuery('div#customfield_ベースネーム-field');

「ベースネーム」の部分を先ほど確認したベースネームに差し替えてください。ここでは「publicdate」だったので、次のようになります。

var title       = jQuery('div#title-field');
var content     = jQuery('div#editor');
var tags        = jQuery('div#tags-field');
var excerpt     = jQuery('div#excerpt-field');
var keywords    = jQuery('div#keywords-field');
var authored_on = jQuery('div#authored_on-field');
var publicdate  = jQuery('div#customfield_publicdate-field');

続いて、上記変更後の 62〜68行目付近の後に以下のように挿入します。

【62〜68行目付近】

    // 公開日
    authored_on
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#authored_on-label').text('公開日');

【68行目付近の後に次のように挿入】

    // カスタムフィールド名
    ベースネーム
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#customfield_ベースネーム-label').text('カスタムフィールド名');

この「カスタムフィールド名」をカスタムフィールドの「名前」に、「ベースネーム」の部分を先ほど確認したベースネームに差し替えてください。ここでは「カスタムフィールド名」は「公開日時」（紛らわしくてすみません）、「ベースネーム」は「publicdate」だったので、次のようになります。

    // 公開日時
    publicdate
//        .removeClass('hidden')/*  表示  */
//        .addClass('hidden')   /* 非表示 */
//        .insertBefore()
//        .insertAfter()
        .find('label#customfield_publicdate-label').text('公開日時');

次に、95行目あたりに次のように挿入します。

jQuery('label#authored_on-label').text('公開日');【95行目あたり】
jQuery('label#customfield_ベースネーム-label').text('カスタムフィールド名');

これまでと同様に書き換えると次のようになります。

jQuery('label#authored_on-label').text('公開日');【95行目あたり】
jQuery('label#customfield_publicdate-label').text('公開日時');

最後に、100行目あたりに次のように挿入します。

jQuery('div#tags-field').insertAfter('div#editor-content');【100行目あたり】
jQuery('div#customfield_ベースネーム-field').insertAfter('div#editor-content');

ここも同様に書き換えると次のようになります。

jQuery('div#tags-field').insertAfter('div#editor-content');【100行目あたり】
jQuery('div#customfield_publicdate-field').insertAfter('div#editor-content');

これで、UI チェンジャーをカスタムフィールドにも適用させる準備が整いました。あとは他のフィールドと同様に設定すればOKです。

以上です。