Movable Type の記事のタイトル欄で改行できるようにしてみよう

Movable Type の記事のタイトル欄をテキストエリアに変更して擬似的に改行できるようにしてみました。

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

Movable Type の 記事 のタイトル欄は input:text です。このタイトル欄をテキストエリアにして改行できるようにしたいという要望はたまにあるので、擬似的に実現できるようにカスタマイズしてみます。

line-brake-title-min.png

MTAppjQuery の利用が前提となります。

user.js

まず user.js に下記のように書きます。

(function($){
 'use strict';

 if (mtappVars.screen_id === 'edit-entry') {
 // タイトル要素のカスタマイズ
 const $title = $('#title').hide();
 const title = $title.val().replace(/\[br\]/g, "\r\n");
 $title.after('<textarea class="form-control text title low" id="title-dummy">' + title + '</textarea>');
 $('#entry_form').on('submit', function () {
 const $textareaTitle = $('#title-dummy');
 const textareaTitle = $textareaTitle.val().replace(/(\r\n|\n)/g, '[br]');
 $title.val(textareaTitle);
 });
 }
})(jQuery);

input#title の後に擬似的なタイトル欄の textarea を挿入します。保存の際に、そのテキストエリアの値の中の改行を [br] に変更し、本来のタイトル欄にセットします。

テンプレート

テンプレートでは、下記のように replace モディファイアで改行タグに置換して出力します。

<mt:EntryTitle replace="[br]","<br>" />

以上です。

Published 2019-01-17
Updated 2019-06-25

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