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

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

Posted at May 4,2010 11:55 PM
Tag:[CustomField, MovableType]

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属性のフォームがアクティブになります。

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)