• Home
  • MTAppjQuery
  • $.MTAppSlideMenuV2() を使って管理画面左上▼メニューを並び順を変えるには

$.MTAppSlideMenuV2() を使って管理画面左上▼メニューを並び順を変えるには

$.MTAppSlideMenuV2() は管理画面左上のスコープメニュー(▼メニュー)を、スライドメニューに変更するメソッドです。

このスライドメニューは mtappVars の中の can_access_blogs_json というプロパティにセットされている JSON を元に作られています。

したがって、このメニューの並び順は、 $.MTAppSlideMenuV2() を実行する前に mtappVars.can_access_blogs_json の並び順を変更することで調整出来ます。

手動で並び順を変更する

下記のようにして手動で並び順を変更します。このとき、元の JSON の形(プロパティ名や階層など)が変わらないように注意してください。

入れ子のブログの順序は、各ウェブサイトが持つ children プロパティの中身の順序を変更することで調整できます。

(function($){
mtappVars.can_access_blogs_json = {
    // 手動で並び順を変更したJSON
};
$.MTAppSlideMenuV2();
})(jQuery);

なお、管理画面のソースで確認できる mtappVars.can_access_blogs_json は1行で表示されているので、JSONLint などのツールで整形してから変更することをお勧めします。

何かのキーを元に自動で並び順をソートする

ウェブサイト/ブログの名前やIDで一気にソートしたい場合には、下記のようなコードで実現できます。

コードの解説はコメントをご確認ください。

(function($){
// 長いので一旦変数に入れる
var sortedWebsites = mtappVars.can_access_blogs_json.website;
// ウェブサイトのソート
// 名前順でソートするときは 'name'、IDでソートするときは 'id'
// 昇順は 'ascend'、降順は 'descend'
objectSort(sortedWebsites, 'name', 'ascend');
// 子ブログのソート
for (var i = 0, l = sortedWebsites.length; i < l; i++) {
    if (sortedWebsites[i].children.length > 0) {
        // 名前順でソートするときは 'name'、IDでソートするときは 'id'
        // 昇順は 'ascend'、降順は 'descend'
        objectSort(sortedWebsites[i].children, 'name', 'ascend');
    }
}
// 配列をオブジェクトの入れ子をソートする関数
function objectSort (array, key, order, type) {
    order = (order === 'ascend') ? -1 : 1;
    array.sort(function(obj1, obj2){
        var v1 = obj1[key];
        var v2 = obj2[key];
        if (type === 'numeric') {
            v1 = v1 - 0;
            v2 = v2 - 0;
        }
        else if (type === 'string') {
            v1 = '' + v1;
            v2 = '' + v2;
        }
        if (v1 < v2) {
            return 1 * order;
        }
        if (v1 > v2) {
            return -1 * order;
        }
        return 0;
    });
}
// MTAppSlideMenuV2を実行
$.MTAppSlideMenuV2();
})(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 です。