• Home
  • Movable Type
  • MTAppjQuery
  • MTAppjQuery で選択されたカテゴリごと、かつフィールドごとにアイテムのアップロード先ディレクトリを変更する(記事編)

MTAppjQuery で選択されたカテゴリごと、かつフィールドごとにアイテムのアップロード先ディレクトリを変更する(記事編)

今日は MTAppjQuery を利用したカスタマイズとして、 記事に設定した複数のアセット系フィールドについて、選択されたカテゴリによって、それぞれのフィールドのアップロード先ディレクトリを変更する方法をご紹介します。

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

例として下記のような3つのコンテンツフィールドを作成します。

  • アセット
  • 画像
  • ビデオ
Clean Shot 2022 02 16 23 05 02

カテゴリを作成

次に下記のような3つのカテゴリを作成します。

  • entry_category_01(ID: 9)
  • entry_category_02(ID: 10)
  • entry_category_03(ID: 11)
Clean Shot 2022 02 16 23 06 33

user.js でカスタマイズ

下記のコードを user.js に追記します。コードの内容はコード中にコメントとして書き込みました。

(function($){
  'use strict';

  // 記事に限定
  if (mtappVars.screen_id === 'edit-entry') {
    // リンクボタンにパラメーを追加するための jQuery プラグイン
    $.fn.MTAppAddExtraPath = function(options){
      const op = $.extend({
        value: ''
      }, options);
      if (op.value === '') {
        return;
      }
      return this.each(function(){
        let href = $(this).attr('href');
        if (!href) {
          return;
        }
        href = href.replace(/&extra_path=[^&]*/gi, '');
        href += ('&extra_path=' + op.value);
        $(this).attr('href', href);
      });
    };
    // END リンクボタンにパラメーを追加するための jQuery プラグイン

    // MTAppInCats で選択されたカテゴリごとに処理を変える
    $.MTAppInCats({
      categories: null,
      code: function(categories){
        // entry_category_01(ID: 9)が選択された場合
        if ($.inArray('9', categories) !== -1) {
          // アセットフィールド
          $('#customfield_asset01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'files/cat01'
          });

          // 画像フィールド
          $('#customfield_image01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'images/cat01'
          });

          // ビデオフィールド
          $('#customfield_video01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'videos/cat01'
          });
        }
        // entry_category_02(ID: 10)が選択された場合
        else if ($.inArray('10', categories) !== -1) {
          // アセットフィールド
          $('#customfield_asset01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'files/cat02'
          });
          // 画像フィールド
          $('#customfield_image01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'images/cat02'
          });
          // ビデオフィールド
          $('#customfield_video01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'videos/cat02'
          });
        }
        // entry_category_03(ID: 11)が選択された場合
        else if ($.inArray('11', categories) !== -1) {
          // アセットフィールド
          $('#customfield_asset01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'files/cat03'
          });
          // 画像フィールド
          $('#customfield_image01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'images/cat03'
          });
          // ビデオフィールド
          $('#customfield_video01-field a.mt-open-dialog').MTAppAddExtraPath({
            value: 'videos/cat03'
          });
        }
      }
    });
    // END MTAppInCats で選択されたカテゴリごとに処理を変える
  }
  // END 記事に限定

  // アセットのダイアログ内で下記のコードを実行する
  if (mtappVars.params.dialog) {
    // 上段のコードでセットした extra_path を取得
    const extraPath = mtappVars.params.extra_path || '';
    if (extraPath) {

      $('#extra_path').val(extraPath);
    }
  }
  // END アセットのダイアログ内で下記のコードを実行する

})(jQuery);

これで下図のようにフィールドごとに、かつ選択されたカテゴリにごとに別のアップロード先ディレクトリがセットされました。

Clean Shot 2022 02 16 23 23 33
Clean Shot 2022 02 16 23 24 38
Clean Shot 2022 02 16 23 36 11

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

MTAppjQuery