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

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

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>" />

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。