TopMovable Typeカスタムフィールド > 2010年5月
2010年5月 5日

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

May 5,2010 11:55 PM
Tag:[, ]
Permalink

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

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>

この中で、変数requiredを判定しています(青色部分)が、テンプレートタグリファレンスのMTCommentCustomFieldsでは、コメント投稿フォームへのカスタムフィールドの設定に変数requiredが引き継がれていません(下)。

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

変数requiredを引き継ぐには、「コメント用カスタムフィールドの投稿フォームのカスタマイズ(その1)」の修正後のサブテンプレートに、青色の変更を加えると良いでしょう。

<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:SetVarBlock name="required"><mt:CustomFieldIsRequired>1<mt:Else>0</mt:CustomFieldIsRequired></mt:SetVarBlock>
  <$mt:Include module="フォームフィールド" id="$custom_field_id" class="" label="$custom_field_name"$>
</mt:CommentCustomFields>
Comments [0] | Trackbacks [0]
2010年5月 4日

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

May 4,2010 11:55 PM
Tag:[, ]
Permalink

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

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

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2022年
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3