アドバン レーシング GT ビヨンド アルミホイール 18×9.5J　5/114.3　+45 レーシングコッパーブロンズ V5351

MT7のMTContentNextタグ、MTContentPreviousタグを出力ファイル名（ベースネーム）でソートする方法を紹介します。

１．問題点

MTContentNextタグ、MTContentPreviousタグは、デフォルトの機能では「出力ファイル名」でソートすることができないようです。

公式ページでは、MTContentNextタグ、MTContentPreviousタグに設定できるdate_fieldモディファイアの説明として次のようになっています。

'modified_on', 'authored_on', 'created_on' または 日付/時刻型のフィールドの ID, ユニークID, または名前を指定すると、指定されたフィールドの日時よりも新しいコンテンツデータを呼び出します。指定がない場合は、authored_onが利用されます。

ということで、別の手段を使って出力ファイル名でソートする方法を紹介します。

２．出力ファイル名でソートする

ここではMTContentNextタグ、MTContentPreviousタグの代わりに、テンプレートタグを使ってソートする方法を紹介します。

テンプレートは下記になります。このテンプレートをコンテンツタイプアーカイブの任意の位置に設定してください。赤字の「コンテンツタイプ名」には自コンテンツタイプ名を設定してください。

<mt:ContentIdentifier setvar="identifier">
<mt:setvar name="flag" value="0">
<mt:Contents content_type="コンテンツタイプ名" lastn="0" sort_by="identifier" sort_order="ascend">
  <mt:if name="flag" eq="1">
    <mt:setvarblock name="prev_page"><a href="<mt:ContentPermalink>">前のページ</a></mt:setvarblock>
    <mt:setvar name="flag" value="2">
  <mt:elseif name="flag" eq="0">
    <mt:if tag="ContentIdentifier" eq="$identifier">
      <mt:setvar name="flag" value="1">
    <mt:else>
      <mt:setvarblock name="next_page"><a href="<mt:ContentPermalink>">次のページ</a></mt:setvarblock>
    </mt:if>
  </mt:if>
</mt:Contents>
<mt:var name="next_page"> | <mt:var name="prev_page">

３．解説

まず、コンテンツアーカイブページの出力ファイル名をsetvarモディファイアで変数identifierに保持します。

<mt:ContentIdentifier setvar="identifier">

フラグとして使う変数flagに0を設定します。

<mt:setvar name="flag" value="0">

コンテンツデータの情報を取得するブロックタグを実行します。「sort_by="identifier"」を設定しているので、出力ファイル名でソートされます。

<mt:Contents content_type="コンテンツタイプ名" lastn="0" sort_by="identifier" sort_order="ascend">
    :
</mt:Contents>

ブロックタグ内部でMTIfタグを実行します。フラグはまだ0なのでブロック内は実行されません。

  <mt:if name="flag" eq="1">

次にMTElseIfタグを実行します。

  <mt:elseif name="flag" eq="0">

フラグは0なので、MTElseIfブロック内部を実行します。

MTElseIfブロック内部はさらにMTIf文になっています。

    <mt:if tag="ContentIdentifier" eq="$identifier">
      <mt:setvar name="flag" value="1">
    <mt:else>
      <mt:setvarblock name="next_page"><a href="<mt:ContentPermalink>">次のページ</a></mt:setvarblock>
    </mt:if>

MTContentsブロックタグ内で実行している出力ファイル名（tag="ContentIdentifier"の部分）が、現在再構築中のページの出力ファイル名（変数identifier）と等しいか判定します。

    <mt:if tag="ContentIdentifier" eq="$identifier">

等しくなければ、MTElseタグのブロックを実行し、MTContentsブロックタグ内で実行している出力ファイル名を使ったリンクを変数next_pageに保持します。この処理はMTIfタグの出力ファイル名がマッチするまで毎回実施します。つまりマッチする直前のリンクを取得している訳です。

    <mt:else>
      <mt:setvarblock name="next_page"><a href="<mt:ContentPermalink>">次のページ</a></mt:setvarblock>

出力ファイル名がマッチすると、変数flagに1を設定します。

    <mt:if tag="ContentIdentifier" eq="$identifier">
      <mt:setvar name="flag" value="1">

このMTIf文は変数flagが0の場合しか実行されないので、これでMTIf文の処理を終了します。

変数flagが1となったので、外側のMTIfタグブロックが実行され、MTContentsブロックタグ内で実行している出力ファイル名をリンクとして変数prev_pageに保持します。このリンクはつまり、マッチした直後のリンクとなります。さらに変数flagに2を設定します。

  <mt:if name="flag" eq="1">
    <mt:setvarblock name="prev_page"><a href="<mt:ContentPermalink>">前のページ</a></mt:setvarblock>
    <mt:setvar name="flag" value="2">

これでMTContentsブロックタグ内の処理は行われなくなります。

MTContentsブロックタグを抜け、最後に、変数next_pageと変数prev_pageの内容（前後ページのリンク）を出力します。

<mt:var name="next_page"> | <mt:var name="prev_page">

前後ページのリンクはMTContentsブロック内部で表示する方法もあると思いますが、出力ファイル名が最後にマッチした場合など制御が複雑になりそうなので、MTContentsブロック終了後に表示するようにしました。

Movable Typeで本文・追記フィールドの動作をカスタマイズする「BodyFieldCustomizerプラグイン」を公開します。

このプラグインは以前公開した「BodyFieldCustomizerプラグイン」のMT7版です。

１．機能

ブログ記事またはウェブページの本文・追記フィールドの表示オプションを有効にします。

プラグイン適用前

プラグイン適用後

また、本文・追記フィールドをドラッグできるようにします。

プラグイン適用前（クリックで拡大）

プラグイン適用後（クリックで拡大）

それぞれの機能は独立して選択できます。両方を同時に利用することも可能です。

２．価格

価格：\5,000-（税別）/1インストールMT（購入前に必ず動作確認してください）

上記リンクよりご購入後、プラグイン製品版のダウンロードURLをメールにてご連絡致します。

３．ダウンロード・インストール

展開した中にあるBodyFieldCustomizerフォルダをpluginsディレクトリにアップロードしてください。

システム管理画面の「ツール」→「プラグイン」で「BodyFieldCustomizer～」が表示されればインストール完了です。

４．プラグインの設定

プラグインを適用したいウェブサイト・ブログの「ツール」→「プラグイン」をクリックし、「BodyFieldCustomizer」→「設定」をクリックして、利用したい機能を選択し、「変更を保存」をクリックします。

これは「Movable Type Advent Calendar 2021」7日目の記事です。

MT7のTinyMCE5にボタンを追加する方法を紹介します。

注：プラグインではなく、ファイルを直接編集しています。

ここでは、wysiwygモードではなく、HTML編集モードに切り替えた場合のh2要素および、h3要素用のボタンを追加してみます。

変更前

変更後

たまにはこういうエレガントでない、ゴリゴリのカスタマイズもいいんじゃないかと（笑）。

カスタマイズの前提として、TinyMCE5のプラグインを有効にしておいてください。

１．ボタン表示の設定

まず、ボタンを表示する設定です。

mt-static/plugins/TinyMCE5/lib/js/adapter.js

に"plugin_mt_source_buttons2"を追加します。

　　　　　　　:
            // Buttons using in source mode.
            plugin_mt_source_buttons1:'mt_source_bold mt_source_italic mt_source_blockquote mt_source_unordered_list mt_source_ordered_list mt_source_list_item | mt_source_link mt_insert_file mt_insert_image | mt_fullscreen',
            plugin_mt_source_buttons2:'mt_source_h2 mt_source_h3',
            // Buttons using in wysiwyg mode.
            plugin_mt_wysiwyg_buttons1:'bold italic underline strikethrough | blockquote bullist numlist hr | link unlink | mt_insert_html mt_insert_file mt_insert_image | table',
　　　　　　　:

追加する名前（mt_source_h2、mt_source_h3）は任意の名称でOKです。

複数のボタンを追加する場合、半角スペースで区切ります。区切り線を入れたい場合は、パイプ"|"を記述します（こちらも半角スペース区切り）。

また、同じファイルの変数suffixへの代入をコメントアウトします。

    var suffix = '';
    if(jQuery('script[src*="tinymce.min"]').length){
        // min
//        suffix = '.min';
    }

この設定をしておかないと、次項で設定するファイルのファイル名がplugin.min.jsになってしまいます。

２．ボタン定義の追加

１項で追加しようとしているボタンの定義を追加します。具体的には、

mt-static/plugins/TinyMCE5/lib/js/tinymce/plugins/mt/plugin.js

の"ed.addMTButton"が並んでいる一番最後に、下記の赤色部分を追加します。

　　　　　　　:
          ed.addMTButton('mt_source_h2', {
              tooltip : 'source_h2',
              text : '<h2>',
              mtButtonClass: 'text',
              toggle: true,
              onclickFunctions : {
                  source: 'h2'
              }
          });
          ed.addMTButton('mt_source_h3', {
              tooltip : 'source_h3',
              text : '<h3>',
              mtButtonClass: 'text',
              toggle: true,
              onclickFunctions : {
                  source: 'h3'
              }
          });
/*
          var filterd_attrs = [];
          var regexp = new RegExp(/^on|action/);
　　　　　　　:

addMTButton()の第1パラメータには１項で設定した名称を指定します。

第2パラメータのハッシュの意味は次の通りです。

• tooltip：ツールチップ（指定した名称を使って、さらに３項のファイルで表示内容を定義）
• text：表示するボタン
• mtButtonClass：ボタンのクラス。ここでは"text"固定
• toggle："true"にすると、終了タグを挿入するまでボタン色が反転
• onclickFunctions：クリックしたときの動作。指定した名称で別ファイルに定義

３．ツールチップの設定

mt-static/plugins/TinyMCE5/lib/js/tinymce/plugins/mt/langs/plugin.js

に、下記の赤色部分を追加します。

　　　　　　　:
    // HTML mode
    "source_bold": trans('Strong Emphasis'),
    "source_italic": trans('Emphasis'),
    "source_blockquote": trans('Block Quotation'),
    "source_unordered_list": trans('Unordered List'),
    "source_ordered_list": trans('Ordered List'),
    "source_list_item": trans('List Item'),
    "source_h2": 'h2要素',
    "source_h3": 'h3要素',
　　　　　　　:

キーは２項の"tooltip"の内容を設定し、値には表示させたい文字列を設定します。

値の部分は、本来、

trans('...')

と記述してローカライズに対応すべきですが、ここでは表示させたい文字列を直接記述しています。

４．クリック時の動作を追加

準備が少し面倒です。

編集するファイルは、

mt-static/js/editor.js

なのですが、改行やスペース文字が除去されていて、編集がやや難しいです。

ということで、私は、editor.jの内容を

https://beautifier.io/

で一旦整形し、editor.jsに上書きしてから作業しました（元の内容はバックアップしておいてください）。

ここではその前提で話を進めます。

mt-static/js/editor.js

に、下記の赤色部分を追加します。追加位置は"MT.EditorCommand.Source.prototype.commands['default']"がある行の直後です。

　　　　　　　:
    MT.EditorCommand.Source.prototype.commands['default'] = {
        h2: function(command, userInterface, argument, text) {
            this.execEnclosingCommand(command, '<h2>', '</h2>', text);
        },
        h3: function(command, userInterface, argument, text) {
            this.execEnclosingCommand(command, '<h3>', '</h3>', text);
        },
        fontSizeSmaller: function(command, userInterface, argument, text) {
            this.execEnclosingCommand(command, '<small>', '</small>', text);
        },
　　　　　　　:

ハッシュのキー"h2"や"h3"は、２項の"onclickFunctions"のハッシュキー"source"の値と対応させてください。

"function(command, userInterface, argument, text)"の部分は何も考えずにそのまま使ってください。編集が必要なのはexecEnclosingCommand()の第2、第3パラメータの開始タグ名と終了タグ名のみです。

execEnclosingCommand()は、選択文字列がある場合は自動的にタグで括り、選択文字列がない場合は開始タグを挿入（ボタンが反転）、文字を入力してもう一度ボタンをクリックすれば終了タグを挿入してくれるという、便利関数です。

この関数は、

mt-static/js/editor.js

に実装されています。

クリック時の挙動を変更したい場合は、独自関数をここに書いてもいいでしょう。

これでブラウザをリロードしてHTML編集モードに切り替えれば、冒頭のボタンが表示されると思います。

５．その他

TinyMCEをカスタマイズするときはブラウザの開発者モード（F12）を有効にしておくと、typo等はコンソールにエラーが表示されるので便利です。