なんてタイトルの長い記事なんでしょう。。。 さて、以前「Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ ( jQuery 版)」という方法を紹介しました。 その記事に「あとカスタムフィールドを使いたいのですが可能でしょうか?」というコメントを頂いたので、このカスタマイズをカスタムフィールドに適用する方法を紹介します。...
なんてタイトルの長い記事なんでしょう。。。
さて、以前「Movable Type の記事投稿画面の UI をカテゴリごとに変えるカスタマイズ ( jQuery 版)」という方法を紹介しました。
その記事に「あとカスタムフィールドを使いたいのですが可能でしょうか?」というコメントを頂いたので、このカスタマイズをカスタムフィールドに適用する方法を紹介します。
ダウンロードや基本的な使い方は、以下の記事を参照してください。
この UI チェンジャーは、ui_changer.tmpl をカスタマイズすることで、カスタムフィールドにも適用することができます。
まず、カスタムフィールドの設定画面で、UI チェンジャーを適用させたいカスタムフィールドの「ベースネーム」を確認します。ここでは例として「publicdate」となっています。
次に、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です。
以上です。