Movable Typep の記事投稿画面で、複数のフィールドをグループ化し、そのグループ化した中身のフィールドを２列で表示する方法を紹介します。
完成した見た目は下図のようになります。
このカスタマイズは、MTAppjQuery の user.js と user.css にちょっとしたコードを書けば完成です。
user.js
user.js に書くのは以下のコードです。
(function($){
/* ==================================================
Inline-block fields into a container
================================================== */
$('#sortable').sortable({
disabled: true
});
var containerHTML = '<div id="mtapp-column-container"></div>';
var columnList = ['keywords','customfield_text01','customfield_top_webpage','tags'];
$('#text-field').after(containerHTML);
var $container = $('#mtapp-column-container');
for (var i = 0, l = columnList.length; i < l; i++) {
$('#' + columnList[i] + '-field').removeClass('sort-enabled').appendTo($container);
}
/* Inline-block fields into a container [end] */
})(jQuery);
簡単に解説すると、まずドラッグ＆ドロップのソートを無効にします。
$('#sortable').sortable({
disabled: true
});
コンテナとなる div 要素と、その div 要素の中に入れるフィールドのベースネームを配列で定義します。
var containerHTML = '<div id="mtapp-column-container"></div>';
var columnList = ['keywords','customfield_text01','customfield_top_webpage','tags'];
コンテナ div を DOM に挿入します。ここでは、本文欄の後に入れています。
$('#text-field').after(containerHTML);
DOM に入れた div 要素を取得して変数に入れておきます。
var $container = $('#mtapp-column-container');
div 要素の中に入れるフィールドのベースネームの配列ループで回して、コンテナ div の中に入れていきます。
for (var i = 0, l = columnList.length; i < l; i++) {
$('#' + columnList[i] + '-field').removeClass('sort-enabled').appendTo($container);
}
user.css
user.css に書くのは以下のコードです。
/* ==================================================
Inline-block fields into a container
================================================== */
#mtapp-column-container {
margin-bottom: 15px;
border: 1px solid #c0c6c9;
border-radius: 3px;
}
#mtapp-column-container .field {
display: inline-block !important;
width: 50%;
vertical-align: top;
border: none;
}
#mtapp-column-container .field .field-header{
height: 1.2em;
padding: 10px 10px 0;
}
#mtapp-column-container .field .field-content {
padding: 0 10px 10px;
}
/* Inline-block fields into a container [end] */
CSS の解説は省略しますが、ポイントはコンテナ div の中に入れた .field を inline-block !important にすることと、width を設定することでしょうか。
今は、width: 50% にしているので２列になりますが、25% にすれば４列になります。
以上です。意外と使えそう？
