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

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);

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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