MTAppjQuery で Movable Type 8 の記事編集画面のフィールドの間に小見出しを追加したい

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

今日は、Movable Type 8 の記事編集画面のフィールドの間に小見出しを追加する方法をご紹介します。下図の「住所」と「交通」という見出しがそれです。

フィールドの並べ替えとドラッグ&ドロップの無効化

見出しを挿入する前に、mtapp.sortDisabled() を使ってフィールドのドラッグ&ドロップによる並べ替え機能を無効化し、mtapp.fieldSort() を使って、フィールドを指定通りに並べます。

(function ($) {
    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // ドラッグ&ドロップの並べ替えを無効化
        mtapp.sortDisabled();
        // フィールドの並べ替えと使わないフィールドを非表示
        mtapp.fieldSort({
            sort: 'title,text,excerpt,customfield_post_code,customfield_prefecture,customfield_city,customfield_street,customfield_stations',
            otherFieldHide: true
        });
    }
})(jQuery);

小見出しを挿入する関数を作成

続いて下記のように指定した要素の手前に小見出しを挿入する関数を作ります。

(function ($) {
    /**
     * 指定したセレクタの前に見出しを挿入する
     * @param string selector 見出しを挿入する場所の要素のセレクタ
     * @param string heading 見出しのテキスト
     */
    const insertHeading = (selector, heading) => {
        const targetElement = document.querySelector(selector);
        if (!targetElement) {
            alert(`${selector} が見つかりません。`);
            return;
        }
        targetElement.insertAdjacentHTML('beforebegin', `<div class="h3">${heading}</div>`);
    };

    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // 省略
    }
})(jQuery);

この関数の第一引数に指定したセレクタの要素の手前に、第二引数で指定したテキストの見出しが挿入されます。

第一引数のセレクタは、input 要素などのセレクタではなく、それを囲む div.field のIDを指定します。

小見出しを挿入

最後に mtapp.fieldSort() を使ってフィールドを並べ替えた後で insertHeading 関数を実行して小見出しを挿入します。

(function ($) {
    const insertHeading = (selector, heading) => {
        // 省略
    };

    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // ドラッグ&ドロップの並べ替えを無効化
        mtapp.sortDisabled();
        // フィールドの並べ替えと使わないフィールドを非表示
        mtapp.fieldSort({
            sort: 'title,text,excerpt,customfield_post_code,customfield_prefecture,customfield_city,customfield_street,customfield_stations',
            otherFieldHide: true
        });
        // 小見出しを挿入
        insertHeading('#customfield_post_code-field', '住所');
        insertHeading('#customfield_stations-field', '交通');
    }
})(jQuery);

完成したコード

まとめると下記のようなコードになりました。これを user.js に書けばOKです。

(function ($) {
    /**
     * 指定したセレクタの前に見出しを挿入する
     * @param string selector 見出しを挿入する場所の要素のセレクタ
     * @param string heading 見出しのテキスト
     */
    const insertHeading = (selector, heading) => {
        const targetElement = document.querySelector(selector);
        if (!targetElement) {
            alert(`${selector} が見つかりません。`);
            return;
        }
        targetElement.insertAdjacentHTML('beforebegin', `<div class="h3">${heading}</div>`);
    };

    // 記事編集画面のみ動くようにする
    if (mtappVars.screen_id === 'edit-entry') {
        // ドラッグ&ドロップの並べ替えを無効化
        mtapp.sortDisabled();
        // フィールドの並べ替えと使わないフィールドを非表示
        mtapp.fieldSort({
            sort: 'title,text,excerpt,customfield_post_code,customfield_prefecture,customfield_city,customfield_street,customfield_stations',
            otherFieldHide: true
        });
        // 小見出しを挿入
        insertHeading('#customfield_post_code-field', '住所');
        insertHeading('#customfield_stations-field', '交通');
    }
})(jQuery);

その他の方法

なお、MTAppjQuery では mtapp.tabs() というメソッドで下図のように複数のフィールドをタブのUIで表示することも可能です。こちらも併せてご検討ください。

フィールドの並べ替えとドラッグ&ドロップの無効化

小見出しを挿入する関数を作成

小見出しを挿入

完成したコード

その他の方法

「MTAppjQuery」カテゴリの記事一覧