小粋空間  -  a cheap joke and a play on words site

コメント用カスタムフィールドの投稿フォームのカスタマイズ（その1）

Movable Typeの、コメント用カスタムフィールドの投稿フォームのカスタマイズについてのTipsです。

テンプレートタグリファレンスのMTCommentCustomFieldsでは、コメント投稿フォームへのカスタムフィールドを、次のように設定するよう解説しています。

<input type="hidden" name="blog_id" value="<MTBlogID>" />
<input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" />
<mt:CommentCustomFields>
  <mt:SetVarBlock name="custom_field_name"><$mt:CustomFieldName$></mt:SetVarBlock>
  <mt:SetVarBlock name="field-content"><$mt:CustomFieldHTML$></mt:SetVarBlock>
  <mt:SetVarBlock name="custom_field_id">profile_<$mt:CustomFieldName dirify="1"$></mt:SetVarBlock>
<$mt:Include module="フォームフィールド" id="$custom_field_id" class="" label="$custom_field_name"$>
</mt:CommentCustomFields>

Includeタグで呼び出しているフォームフィールド（グローバルテンプレート）の内容は、次の通りです。

<div id="<$mt:Var name="id"$>-field" class="field-top-label field pkg <$mt:Var name="class"$>">
  <div class="field-inner">
    <div class="field-header">
      <label type="text" id="<$mt:Var name="id"$>-label" for="<$mt:Var name="id"$>"><$mt:Var name="label"$><mt:If name="required"> *</mt:If></label>
    </div>
    <div class="field-content ">
      <$mt:Var name="field-content"$>
    </div>
  </div>
</div>

変数custom_field_idの値は、「"profile_"+CustomFieldNameタグの内容」となっており（1つめのリストの赤色部分）、フォームフィールドでは変数idとして扱われ、label要素のfor属性値として使われます（2つめのリストの青色部分）。

ただし、変数field-content（CustomFieldHTMLタグの内容）で展開されるid属性は、次のように「"customfield_"+ベースネーム」となるので、

…前略…
    <div class="field-content ">
      <input type="text" name="customfield_cf_1" id="customfield_cf_1" value="" class="full-width ti" />
    </div>
…後略…

変数custom_field_idの値は、「"customfield_"+ベースネーム」としておけば、label要素のfor属性が本来の動作が可能になります（青色部分）。

<input type="hidden" name="blog_id" value="<MTBlogID>" />
<input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" />
<mt:CommentCustomFields>
  <mt:SetVarBlock name="custom_field_name"><$mt:CustomFieldName$></mt:SetVarBlock>
  <mt:SetVarBlock name="field-content"><$mt:CustomFieldHTML$></mt:SetVarBlock>
  <mt:SetVarBlock name="custom_field_id">customfield_<$mt:CustomFieldBasename$></mt:SetVarBlock>
<$mt:Include module="フォームフィールド" id="$custom_field_id" class="" label="$custom_field_name"$>
</mt:CommentCustomFields>

つまり、label要素のテキストをクリックしたとき、label要素のfor属性で指定したid属性のフォームがアクティブになります。

分かりにくい説明ですいませんが以上です。

• 
• Tweet