• Home
  • MTAppjQuery
  • MTAppjQueryを使ってMTEntriesが使えるドロップダウンリストのカスタムフィールドを疑似的に作る

MTAppjQueryを使ってMTEntriesが使えるドロップダウンリストのカスタムフィールドを疑似的に作る

Movable Type ユーザーコミュニティの MTQ に「カスタムフィールド作成(編集)画面のMTタグ使用について」という投稿を見つけました。

MTAppjQuery プラグインを利用すれば疑似的に実現することができるので、その方法を紹介します。

MTAppjQuery プラグインのインストールはこちらのページ(ちょっと古いです(>_<))をご覧ください。最新の情報はドキュメントも販売しております。

さて、本題です。

今回の内容を実現するためには、1行テキストのカスタムフィールドを作成し、それを MTAppjQuery の「MTAppMultiForm」というメソッドを使って実現します。

カスタムフィールドの作成

今回は、「entrydropdown」というベースネームの1行テキストフィールドを作成しました。

user.js の作成

MTAppjQuery がインストールできたら、テンプレートの一覧画面の右側のウィジェットにある「user.jsとuser.cssをインストール」をクリックします。

すると、インデックステンプレートに user.js と user.css が作成されます。今回は user.css は利用しませんので削除してしまって構いません。

次に、user.js の編集画面を開き、以下の内容を書いて保存します。

(function($){
<mt:SetVarBlock name="entrydropdown_item">
<mt:Entries lastn="0">
'<mt:EntryTitle escape="javascript">(ID:<mt:EntryID>)'<mt:EntriesFooter><mt:Else>,</mt:EntriesFooter>
</mt:Entries>
</mt:SetVarBlock>
$('#customfield_entrydropdown').MTAppMultiForm({
type: 'select',
items: [<mt:Var name="entrydropdown_item" compress="3">]
});
})(jQuery);

少し解説します。

$(foo).MTAppMultiForm()

MTAppMultiForm() を使うと、テキストフォームをチェックボックス、ラジオボタン、ドロップダウンリスト、複数選択セレクトボックスに変更できます。type、items 等のオプションを指定して利用します。

MTEntries で取り出した値を渡す

変数 entrydropdown_item に、MTEntries で取り出した値を入れます。その値を、MTAppMultiForm の items オプションに渡します。渡すときに、compress="3" のモディファイを付けて、余分な改行や余白を取り払います(compress モディファイアは MTAppjQuery の機能です)。

デモ

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。