MovableType 2021.04.15

MTブロックエディタで複数の入力項目があるブロックを作る方法（URLとファイル）

複数のブロックを使うカスタマイズ

MTブロックエディタで入力項目が複数ある場合にブロックを判別する方法を考えました。

前回に続き、複数のブロックを使用したサンプルテンプレートです。

今回はブロックの更新がないので専用ブロックとして問題ないと思います。

サンプルテンプレート

準備

MTブロックエディタをインストールしてください。
左メニューのMTブロックエディタからカスタムブロックを選択し、新規作成を選択します。
カスタムブロックの作成ページにブロック名をリンク、識別子をsample2とし、ブロックを追加のリンクから下記のブロックを登録します。
テキストを選択しラベルをリンクラベル、クラス名をlabel、ブロック要素をPとします。
テキストを選択しラベルをURL、クラス名をurl、ブロック要素をPとします。
ファイルを選択しラベルをファイル、クラス名をfile、ブロック要素をPとします。
最後にブロックの追加と削除を許可するのチェックボックスを外し、保存ボタンを押下してください。

サンプルテンプレート

<mt:BlockEditorBlocks tag="ContentFieldValue">
  <mt:ignore>リンク</mt:ignore>
  <mt:If name="type" eq="custom-sample2">
    <mt:BlockEditorBlocks>
      <mt:ignore>ブロック要素を有効にしクラス名を指定する</mt:ignore>
      <mtsetvarblock name="field_regex">/<.* class="(.*?)">(.*)<\/.*>/mg</mtsetvarblock>
      <mtsetvarblock name="field_classname"><mt:var name="__value__" regex_replace="$field_regex","$1"></mtsetvarblock>
      <mtsetvarblock name="field_contents"><mt:var name="__value__" regex_replace="$field_regex","$2"></mtsetvarblock>

      <mt:ignore>クラス名からブロックを判別し個別の設定を定義する</mt:ignore>
      <mt:SetVars>
        <mt:if name="field_classname" eq="label">
          <mt:ignore>テキスト：リンクラベル</mt:ignore>
        view_label=<mt:var name="field_contents">
        </mt:if>
        <mt:if name="field_classname" eq="url">
          <mt:ignore>テキスト：URL</mt:ignore>
        view_url=<mt:var name="field_contents">
        <mt:elseif name="field_classname" eq="file">
          <mt:ignore>ファイル：ファイル</mt:ignore>
          <mtsetvarblock name="field_regex_afref">/<a href="(.*?)">(.*)<\/a>/mg</mtsetvarblock>
        view_url=<mt:var name="field_contents" regex_replace="$field_regex_afref","$1">
        </mt:if>
      </mt:SetVars>
    </mt:BlockEditorBlocks>
    <mt:ignore>ブロックから出力されるHTMLを定義する</mt:ignore>
    <mt:if name="view_label">
      <p><a href="<mt:Var name="view_url">"><mt:var name="view_label"></a></p>
    </mt:if>

  </mt:If>
</mt:BlockEditorBlocks>

解説

MTブロックエディタからは下記のようにHTMLが出力されます。

<p class="label">リンクラベル</p>

このHTMLを正規表現で分解し、htmlのclassをfield_classname に、htmlタグの中身をfield_contentsに格納します。 field_classnameはブロックの作成で指定したクラス名、field_contentsは入力した値が設定されます。

<mt:ignore>ブロック要素を有効にしクラス名を指定する</mt:ignore>
<mt:SetVarBlock name="field_regex">/<.* class="(.*?)">(.*)<\/.*>/mg</mt:SetVarBlock>
<mt:SetVarBlock name="field_classname"><mt:var name="__value__" regex_replace="$field_regex","$1"></mt:SetVarBlock>
<mt:SetVarBlock name="field_contents"><mt:var name="__value__" regex_replace="$field_regex","$2"></mt:SetVarBlock>

field_classnameからどのブロックの処理かを判別し、field_contentsの値からどのような処理を行うか定義しています。この場合はテキストフィールドは入力された値をそのまま、ファイルは下記のHTMLが格納されているので、hrefの要素のみ取得します。

<a href="ファイルパス">ファイル名</a>

ファイル名を取得する場合は、$1を$2に変更し別の変数で利用してください。

<mt:ignore>クラス名からブロックを判別し個別の設定を定義する</mt:ignore>
<mt:SetVars>
  <mt:if name="field_classname" eq="label">
    <mt:ignore>テキスト：リンクラベル</mt:ignore>
  view_label=<mt:var name="field_contents">
  </mt:if>
  <mt:if name="field_classname" eq="url">
    <mt:ignore>テキスト：URL</mt:ignore>
  view_url=<mt:var name="field_contents">
  <mt:elseif name="field_classname" eq="file">
    <mt:ignore>ファイル：ファイル</mt:ignore>
    <mtsetvarblock name="field_regex_afref">/<a href="(.*?)">(.*)<\/a>/mg</mtsetvarblock>
  view_url=<mt:var name="field_contents" regex_replace="$field_regex_afref","$1">
  </mt:if>
</mt:SetVars>

最後にブロックエディタのHTMLとして出力したい内容を定義します。

<mt:ignore>ブロックから出力されるHTMLを定義する</mt:ignore>
<mt:if name="view_label">
  <p><a href="<mt:Var name="view_url">"><mt:var name="view_label"></a></p>
</mt:if>

複数のブロックを使うカスタマイズ

サンプルテンプレート

準備

サンプルテンプレート

解説

関連する記事