• Home
  • MTAppjQuery
  • $.MTAppFieldSort() の使い方 - MTAppjQuery でフィールドを簡単に並び替える

$.MTAppFieldSort() の使い方 - MTAppjQuery でフィールドを簡単に並び替える

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.MTAppFieldSort()」について説明します。

$.MTAppFieldSort() とは

$.MTAppFieldSort() とは、ブログ記事の作成・編集画面内のメインカラムの各フィールドを簡単に並べ替えることができる jQuery プラグインです。

フィールドの並べ替えについては、Movable Type 5 から標準の機能でもできるようになりましたが、タイトル、本文には対応していません。このプラグインを使えば、タイトル、本文も含めて並べ替えることができます。カスタムフィールドにも対応しています。

使い方

基本的な書き方は次のようになります。

if($('body#edit-entry').length){
    $.MTAppFieldSort({
        sort: 'title,text,tags,excerpt,keywords'
              // title,text,tags,excerpt,keywords またはカスタムフィールドのbasenameを並び順にカンマ区切りで書く
    });
}

なお、この if($('body#edit-entry').length){} は、ブログ記事の作成・編集画面のみに適用させるための記述になります。この if 文を入れないと、他のページで不具合が発生しますのでご注意ください。

もし、他のページにも適用させる場合は、$.MTAppDebug() の機能を使って、条件分岐文を書き出すと便利です(後日説明文を公開します)。

オプションの設定は以下のとおりです。

sort : string(必須)

並べ替えたい順番に、各フィールドのベースネームをカンマ区切りで設定します。ここで指定したフィールドが、メインカラムの頭から順番に並び、指定しなかったフィールドがその後ろに続きます。

デフォルトのフィールドのベースネームは、以下のようになります。「本文」「続き」のベースネームが $.MTAppCustomize() の使い方とは違うので注意してください。

  • title : タイトル
  • text : 本文・続き
  • tags : タグ
  • keywords : キーワード
  • excerpt : 概要

カスタムフィールドの場合は、ベースネームの頭に「 c: 」を付けてください。

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

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

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

なお、ここで説明しているベースネームは、ブログ記事の作成・編集画面のものですが、他の管理画面のページでも、ベースネームを指定すれば基本的には同様に並べ替えることができます。

ただし、他の管理画面のページでフィールドを並べ替える場合は、次に説明する insertID オプションの設定をする必要があります。

insertID : string(任意)

$.MTAppFieldSort() は、基本的にはブログ記事の作成・編集画面に利用することを前提としています。しかし、それ以外の管理画面のページでも、$.MTAppFieldSort() を利用してフィールドを並べ替えることができます。

その場合は、この insertID オプションで、並べ替えたいフィールドを包含するボックスの id 属性を指定します。例えば、テンプレートの編集画面のフィールドを並べ替えたいときは、以下のように記述します。

// テンプレートの編集
if($('body#edit-template-index').length){
    $.MTAppFieldSort({
        sort: 'revision-note,outfile,title',
        insertID: 'template-listing-form'
    });
}

サンプル

例えば、メインカラムを以下の順番に並べたいとします。

  1. キーワード( keywords )
  2. テキストフィールドというカスタムフィールド( c:textfield )
  3. タイトル( title )

この場合は次のように書きます。

$.MTAppFieldSort({
    sort: 'keywords,c:textfield,title'
});

MTAppFieldSort-01.png

【2010-08-13 追記】
ブログ記事の作成・編集画面以外の管理画面のページに適用する場合の記述と、insertID オプションについての説明を追加しました。

以上です。

MTAppjQuery について

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

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

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

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

Craft CMS

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