Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズをカスタムフィールドにも適用させる

なんてタイトルの長い記事なんでしょう。。。 さて、以前「Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ ( jQuery 版)」という方法を紹介しました。 その記事に「あとカスタムフィールドを使いたいのですが可能でしょうか?」というコメントを頂いたので、このカスタマイズをカスタムフィールドに適用する方法を紹介します。...

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

さて、以前「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です。

以上です。

Published 2009-02-26
Updated 2019-06-25

「Movable Type」カテゴリの記事一覧