MTAppjQueryを使って記事ごとに表示するカスタムフィールドを変える

Movable Type ユーザーコミュニティの MTQ に「ブログ記事編集画面のカスタムフィールの項目をカスタマイズしたい。」という投稿を見つけました。藤本さんも MTAppjQuery プラグイン の出番だとおっしゃってるので、その方法を紹介します。

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

今回のサンプルの仕様

ブログに、次の3つの1行テキストのカスタムフィールドがあります。

  • ベースネーム : cf01
  • ベースネーム : cf02
  • ベースネーム : cf03

そして、次の2つの特定の記事で、表示するカスタムフィールドを変えます。

  • 記事ID : 72 => カスタムフィールド cf01、cf02 を表示
  • 記事ID : 73 => カスタムフィールド cf01、cf02、cf03 を表示

user.js の作成

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

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

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

(function($){
if (mtappVars.entry_id == 72) {
$.MTAppCustomize({
basename: "cf01",
custom: true,
showField: "show"
});
$.MTAppCustomize({
basename: "cf02",
custom: true,
showField: "show"
});
$.MTAppCustomize({
basename: "cf03",
custom: true,
showField: "hide"
});
}
else if (mtappVars.entry_id == 73) {
$.MTAppCustomize({
basename: "cf01",
custom: true,
showField: "show"
});
$.MTAppCustomize({
basename: "cf02",
custom: true,
showField: "show"
});
$.MTAppCustomize({
basename: "cf03",
custom: true,
showField: "show"
});
}
})(jQuery);

少し解説します。

if (mtappVars.entry_id == 72) { }

このようにすることで、記事のIDでカスタマイズを分岐することができます。ただし、一度記事を保存する必要があります。

showField: "show" or "hide"

MTAppCustomize メソッドに showField オプションを設定することで、表示・非表示を変えることができます。これは、「表示オプション」のチェックボックスよりも優先して適用されます。

参考

MTAppCustomize() を使わずに、以下のようにシンプルに書くこともできます。ただし、要素のID等は、Firebug等で調べてください。

(function($){
if (mtappVars.entry_id == 72) {
$("#customfield_cf01-field").removeClass("hidden");
$("#customfield_cf02-field").removeClass("hidden");
$("#customfield_cf03-field").addClass("hidden");
}
else if (mtappVars.entry_id == 73) {
$("#customfield_cf01-field").removeClass("hidden");
$("#customfield_cf02-field").removeClass("hidden");
$("#customfield_cf03-field").removeClass("hidden");
}
})(jQuery);
  • このエントリーをはてなブックマークに追加
Just a second...