kanke

MTAppjQueryで管理画面を使いやすくするカスタマイズ6選

管理画面大好きの皆さんこんにちは！管理画面カスタマイズしてますか？

最近、MovableTypeの開発で管理画面のカスタマイズをよくするので、管理画面をCSSとJavaScriptでカスタマイズできる「MTAppjQuery」の簡単な紹介と、僕がよく行うカスタマイズを6個紹介します。

MTAppjQueryとは

MTAppjQueryは、Movable Typeの管理画面にオリジナルのCSSとJavaScriptを追加することが出来るようになるプラグインです。

最初からたくさんの便利なメソッドが用意されているので、jQueryのプラグインを使ったことがあるくらいのスキルがあれば、簡単に利用することが出来ると思います！

自分でオリジナルのCSSやJavaScriptが書ければ、さらに高度なカスタマイズが可能になるので、管理画面マニアの方々にはたまらないプラグインです！

ちなみにMTAppjQueryは、個人ライセンスであれば無料で使えますが、商用ライセンスのMTの場合は有料(1万円)になります。が、導入する価値はあると思っています！

公式サイト
http://www.bit-part.net/products/mtappjquery/

導入方法

プラグインをインストールすると、管理画面の「ツール」 → 「プラグイン」からMTAppjQueryの設定ができるようになります。

MTAppjQueryは、user.jsとuser.cssいうファイル、Movable Typeのテンプレート、またはプラグインの設定画面にJavaScriptやCSSを書いていくことで管理画面をカスタマイズできます。

この辺はMTAppjQueryでuser.jsの書き場所あれこれというブログ記事に詳しく書いてあるのですが、色んな所に書けるので逆に迷うかもしれません！(僕も最初は少し戸惑いました)

個人的には、テンプレートモジュールに記述して、プラグインの設定からMTタグを使用してインクルードするという形をとることが多いです！
テンプレートをGit管理していることが多く、管理しやすくなるのが主な理由です。

よく使うカスタマイズ

ここからは僕が個人的によく使っているカスタマイズを紹介していきます！
今回紹介するのは、記事の入力画面で行うカスタマイズです。

不要なフィールドを非表示にする

まずは軽いところですが、これだけで使い勝手がだいぶ変わります。

MT標準の本文フィールドは表示オプションから非表示に出来ないのですが、すべての入力をカスタムフィールドで行っていて、本文は必要ないというケースもあると思います。

そんな時に簡単に非表示にすることができます。

たとえば、「本文」「概要文」「タグ」「コメント」のフィールドを非表示にするとこんな感じ。

だいぶスッキリしました！

以下のようにHTMLのIDを指定して、 .hidden のクラスが当たるようにすればOKです。

JavaScript

$('#text-field, #excerpt-field, #tags-field, #feedback-field').addClass('hidden');

※ .hidden はMTの管理画面で最初から用意されています。

この中で「本文」以外はMTの表示オプションからも設定が出来ますが、ユーザー間で差異が出ることがあるので、この方法を使えば表示するフィールドを固定化することが出来ます。

フィールドのIDは、開発ツールなどを使って調べることができます。

フィールドの並べ替え

MTの管理画面では、ドラッグ&ドロップでフィールドを並べ替えができますが、ユーザー間で違う順番になってしまったり、必要なはずのフィールドが非表示になっていたりすることもあり、運用上デメリットになると判断した時に使ったりします。

MTAppjQueryに標準で用意されている、MTAppFieldSort というメソッドを使うと簡単に実現できます！

例えば、「本文」→「画像のカスタムフィールド」の順番を逆にしたい！という時には以下のように書きます。

JavaScript

// ブログ記事の作成・編集画面のみに適用させる
if($('body#edit-entry').length){
    $.MTAppFieldSort({
       sort: 'title,permalink,c:test_image,text'
    });
}

カスタムフィールドは、ベースネームの前に c:という接頭辞を付与します。
上記の例では、画像のカスタムフィールドは test_image というベースネームのカスタムフィールドになります。

これで順番の変更ができました！

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

カテゴリーをラジオボタンに変更する

通常、カテゴリはチェックボックスですが、運用上、1つしかチェック出来ないようにしたい場合などに、ラジオボタンに変更することが出来ます。

こちらも、用意されている MTAppOtherTypeCategories を使用して、下記のように書くだけです。

JavaScript

$.MTAppOtherTypeCategories({
    type: 'radio'
});

ちなみに radio のところを select にするとドロップダウンリストに変更できます。

参考
MTAppjQuery v1.2.0 リリース - $.MTAppOtherTypeCategories() を追加ほか

フィールドをグループ分けして見やすくする

カスタムフィールドの入力項目が多いときなど、グループ分けして見やすくすることが出来ます！

項目が少ないので少しわかりにくいかもしれませんが、CSSを組み合わせて、下記の画像のようにすることが出来ます。

JavaScript

var $section01 = $('<div class="cf-section"></div>');
var $section02 = $('<div class="cf-section"></div>');

$section01
    .append( $('<h2>コンテンツ</h2>') )
    .append( $('#customfield_test_image-field') )
    .append( $('#text-field') )
    .insertBefore( $('#tags-field') );

$section02
    .append( $('<h2>アイコン</h2>') )
    .append( $('#customfield_test_check01-field') )
    .append( $('#customfield_test_check02-field') )
    .append( $('#customfield_test_check03-field') )
    .insertBefore( $('#tags-field') );

JavaScriptでHTMLを整形していきます。

カスタムフィールドのHTMLは、customfield_ベースネーム-field というIDが付与されるのでそれを使用します。
例えば、上記の #customfield_test_image-field は、test_image というベースネームのカスタムフィールドを指定しています。

insertBefore( $('#tags-field') ) は、整形したHTMLをタグフィールドの前に挿入しています。
ここは挿入したい場所によって変更してください。

css

.cf-section {
    padding: 0 10px 15px;
    margin: 20px 0 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.cf-section h2 {
    background: #eee;
    padding: 10px 15px;
    margin: 0px -10px 25px;
    border-bottom: 1px solid #ccc;
    font-size: 120%;
    color: #333;
}
.cf-section .sort-enabled {
    border: none;
    margin-bottom: 12px;
}
.cf-section .sort-enabled .field-header {
    padding: 0;
    border-bottom: 1px solid #fff;
    background-image: none;
    pointer-events: none;
}
.cf-section .sort-enabled .field-header label {
    margin-left: 5px;
}
.cf-section #text-field {
    margin: 0 10px;
}

CSSで見た目を調整します。

これは簡単な例ですが、組み合わせれば、テーブルのような見た目や出力されるページのレイアウトに近いものを作ったりすることが可能かと思います！

チェックボックスを連結させる

例えば、チェックされたらアイコンを表示するようなカスタムフィールドがある場合、それぞれにフィールドを用意しますが、縦に並んで場所を取ってしまうので、連結させて横並びにします！

こんな感じにスッキリしました！

JavaScript

/**
 * カスタムフィールドのチェックボックスを連結
 * @param {String} name - 連結したチェックボックスの上部に表示させたいテキスト
 * @param {Array} cfs - 連結したいチェックボックスのカスタムフィールドのIDを配列で渡す
 */
var joinCheckBox = function(name, cfs){
    jQuery.each(cfs, function(i){

        if( i === 0 ){
            $('<div class="field-header" style="margin-bottom: 8px">' + name + '</div>').insertBefore( this );
        }

        $(this).addClass('cf-checkbox');
        $(this).find('.field-content').after( $(this).find('.field-header') );
    });
};

joinCheckBox('アイコン', [
    $( '#customfield_test_check01-field' ),
    $( '#customfield_test_check02-field' ),
    $( '#customfield_test_check03-field' )
]);

css

.cf-checkbox {
    display: inline-block;
    margin-right: 25px;
}
.cf-checkbox .field-header {
    display: inline-block;
    margin-left: -6px;
}
.cf-checkbox .field-content{
    display: inline-block;
    margin-left: -6px;
}

標準で用意されている、MTAppMultiCheckbox というメソッドも使いやすいです。

参考
$.MTAppMultiCheckbox() の使い方 - MTAppjQuery でマルチチェックボックスも簡単に作成

フィールドを増やせるようにする(擬似的に)

ページ内に画像を入れたいんだけど、最大で何枚になるかわからない!

・・・あるあるですね！

こんな時のために、カスタムフィールドを多めに用意しておいたりするわけですが、最大で20枚なんて言われた日にはフィールドがとんでもないことになってしまいます。

こんな時に、入力されている分だけ表示して、追加ボタンを押すと非表示になっているフィールドを表示するようにします。

via GIPHY

これは画像3つの例ですが、最初は一つだけ表示されていて、追加のボタンで隠されているフィールドが表示されてるのがわかるかと思います。

JavaScript

/**
 * カスタムフィールドの画像を増やせるようにする(擬似的に)
 * @param {Array} cfs - 擬似的に増やせるようにしたいカスタムフィールドのIDを配列で渡す
 * @param {String} appendArea - 追加したいエリアをid(#hoge)やclass(.hoge)で指定
 */
var MultipleImg = function(cfs, appendArea){
    var self = this;
    this.list  = cfs;
    this.max   = cfs.length;
    this.show  = 0;
    this.$area = $('<div></div>');

    this.init = function(){
        jQuery.each(self.list, function(i, item){
            item.addClass('cf-MultipleItem').appendTo(self.$area);
            if (item.find('.customfield_preview a').length > 0) self.show = i + 1;
        });

        // 最後に入力されたアイテム以降を非表示にする
        self.$area.find('.cf-MultipleItem:gt(' + self.show + ')').addClass('hidden');

        // 最大数表示されていなかったら追加のボタンを表示
        if( self.show < self.max - 1){
            self.$area.append( $('<p class="js-add-field btn-add-field">フィールドを追加(最大' + self.max + ')</p>') );
            self.$area.on('click', '.js-add-field', self.add);
        }

        self.$area.appendTo( $('.cf-section-cnt') );
    };

    // 非表示のフィールドを順番に表示
    this.add = function(){
        self.show++;
        self.$area.find('.cf-MultipleItem:eq(' + self.show + ')').removeClass('hidden');
        if( self.show >= self.max - 1 ){
            self.$area.find('.btn-add-field').addClass('hidden');
        }
    }
};

var entryImages = new MultipleImg([
    $( '#customfield_test_image-field' ),
    $( '#customfield_test_image02-field' ),
    $( '#customfield_test_image03-field' )
], '.cf-section-cnt');

entryImages.init();

css

.btn-add-field {
    width: 300px;
    margin: 20px auto;
    padding: 15px 40px;
    border: 1px solid #0076BF;
    border-radius: 5px;
    text-align: center;
    color: #0076BF;
    cursor: pointer;
}
.btn-add-field:hover {
    background: #f9f9f9;
}

もちろん画像以外のフィールドでも可能です！

入力されているかどうかを if (item.find('.customfield_preview a').length > 0) で判断していますが、これは画像だからで、テキストフィールドの場合はvalue値など、ここはフィールドによって変わることになります。

まとめ

今回紹介したカスタマイズは1例で、オリジナルのCSSやJavaScriptが書ければ、色んなカスタマイズが可能です！

個人的な経験ですが、管理画面のUIを見やすく使いやすくすることで、運用が楽になったり、誰でも投稿できるようになって属人性が減ったなど、クライアントに喜ばれることが多いです！

表に見えないところだから疎かになりがちな部分ですが、気になった人は是非使ってみてください！

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら

Recommend

WordPressプラグイン「Advanced custom field」の基本的な使い方と用例

WordPressプラグイン「Advanced custom field」の基本的な使い方と用例
WordPress で HTML とデータ取得ロジックを分離させる方法

WordPress で HTML とデータ取得ロジックを分離させる方法
SassとPostCSSを組み合わせて作るCSS開発環境

SassとPostCSSを組み合わせて作るCSS開発環境
Movable Typeの構築や運用時によく使うプラグイン8選

Movable Typeの構築や運用時によく使うプラグイン8選