$.MTAppCustomize() | MTAppjQuery v1 ドキュメント

Last modified date : 2019/01/31

カスタマイズできる内容は、次のとおりです。

フィールドのラベルの変更
マウスオーバーしたときのポップアップヒントの表示
えんぴつアイコンのクリックでフィールドを表示・非表示
「表示オプション」に依存しない強制表示

対応しているフィールドは、メインカラムにあるデフォルトのフィールドとカスタムフィールド、右サイドバーのデフォルトのウィジェットです。

使い方

$.MTAppCustomize({
    basename: '',
    label: '',
    addClass: '',
    hint: '',
    showField: '',
    showParent: '',
    custom: false,
    widget: false,
    edit: false
});

basename のみが必須で、他のオプションは必要に応じて設定します。

オプション

basename（Type : String, Default : ''）

カスタマイズするフィールドのベースネームを設定します。デフォルトのフィールドのベースネームは次のようになります。ただし、「本文」「続き」については２つに分けているので注意してください。

title : タイトル
body : 本文（のタブの部分）
more : 続き（のタブの部分）
tags : タグ
keywords : キーワード
excerpt : 概要
status : 更新状態（ウィジェット）
publishing : 公開（ウィジェット）
category : カテゴリ（ウィジェット）
feedback : コメント（ウィジェット）
assets : アセット（ウィジェット）

カスタムフィールドのベースネームは、カスタムフィールドの編集画面で確認できます。

もし Firebug などで直接ソースで確認する場合は、そのフィールドの一番親の div 要素の id 属性から確認できます。以下の例で言えば「price」がベースネームになります。

<div id="customfield_price-field" class="field field-top-label ">
    省略
</div>

label（Type : String, Default : ''）

変更後のラベルを設定します。

「タイトル」フィールドのラベルはデフォルトでは非表示になっていますが、ここで変更後のラベルを設定すると表示されるようになります。

$.MTAppCustomize({
  basename: 'title',
  label: '商品価格'
});

addclass（Type : String, Default : ''）

フィールドに class 名を追加することができます。

$.MTAppCustomize({
  basename: 'title',
  label: '商品名',
  addClass: 'mtappcustomize-01 product-name'
});
【追加前】
<div id="title-field" class="field field-no-header first-child">
【追加後】
<div id="title-field" class="field field-no-header  mtappcustomize-01 product-name first-child">

hint（Type : String, Default : ''）

マウスオーバーしたときに表示させるヒントを設定します。

$.MTAppCustomize({
  basename: 'title',
  label: '商品名',
  hint: 'ここに入力された値がそのまま表示されます'
});

なお、「本文」「続き」については、どちらか後に設定した方が適用されます。それぞれのタブにマウスオーバーしたときにヒントを分けたい場合は、MTAppToolTip を利用してください。

$.MTAppCustomize({
  basename: 'body',
  label: '特長',
  hint: '商品に関する詳細情報'
});
$.MTAppCustomize({
  basename: 'more',
  label: '備考'
});
$('#editor-header div.tab:eq(0)').MTAppTooltip({
  text: '商品の特長を詳細に記入'
});
$('#editor-header div.tab:eq(1)').MTAppTooltip({
  text: '備考がある場合のみ記入'
});

showField（Type : String, Default : ''）

表示オプションの設定より優先して表示・非表示の制御ができます。'show' を設定する表示され、'hide' 非表示になります。

$.MTAppCustomize({
  basename: 'title',
  showField: 'hide'
});
$.MTAppCustomize({
  basename: 'more',
  showField: 'hide'
});

なお、ここでフィールドの表示・非表示を設定する場合、デフォルトの表示オプションが残っていると紛らわしいので、user.js の先頭に以下の１行を入れて、表示オプション自体を非表示にしておくといいでしょう。

 $('#display-options').hide();

これを CSS でやる場合は、user.css に、次の設定を書きましょう。

#display-options {
    display: none !important;
}

showParent（Type : String, Default : ''）

'hide' を設定すると、本文・続きのテキストフィールドを非表示にできます。showParent オプションの設定は、basename オプションに 'body' または 'more' を設定したときのみ有効になります。

$.MTAppCustomize({
  basename: 'body',
  showParent: 'hide'
});

custom（Type : Boolean, Default : false）

カスタマイズするフィールドがカスタムフィールドの場合のみ true を設定します。なお、custom オプションを設定せずに、basename オプションで次のように直接設定することもできます。

$.MTAppCustomize({
  basename: 'customfield_hoge',
  showField: 'show'
});

widget（Type : Boolean, Default : false）

カスタマイズするフィールドがウィジェットの場合のみ true を設定します。

$.MTAppCustomize({
  basename: 'status',
  widget: true,
  label: 'この投稿のステータス'
});
$.MTAppCustomize({
  basename: 'category',
  widget: true,
  label: '商品ジャンル'
});

edit（Type : Boolean, Default : false）

true を設定すると、下図のようにフィールドが隠されて、ラベルの横に鉛筆アイコンが表示されます。クリックするとフィールドが開きます。利用頻度の低いフィールドなどに便利です。

$.MTAppCustomize({
  basename: 'keywords',
  showField: 'show',
  edit: true
});