Pure Kei

カスタマイズ（コメントエリア②）

Feb152008
Author: Kei
Categories: Customize
Tags: Customize, MovableType

Prev Page: カスタマイズ（追記の折りたたみ）

コメント投稿エリアカスタマイズの続きどぇ～す

コメントをAjaxで投稿する（これが時間かかりました
とりあえず各ブラウザーで投稿できるようにはなっています

参考にさせていただいたサイト様
Movable Type備忘録様MovableTypeのコメントをAjaxで投稿する
prototype.js、scriptaculous.js、effect.jsの３つはエントリー続きの折りたたみとサイドバー折りたたみで同じスクリプトを使用していたため今回はダウンロードしていません
ajaxcomments.jsをMovableTypeのコメントをAjaxで投稿するで入手し設置します

ajaxcomments.jsをテキストエディタで開き「mt-comments.cgi」のパスを変更
絶対パスにしました

コメントフォームのカスタマイズは、説明されているまま設置します
<div id="comment_posted"></div>は、プレビュー表示したい箇所（コメントテキストエリアの下部）に設置しました
当ブログのコメントフォームテンプレート（見づらいです
テンプレートテンプレートモジュールコメント入力フォーム

<div id="comment_form_block">
<MTEntryIfCommentsOpen>
<div class="comments-open" id="comments-open"> <h2 class="comments-open-header">コメントする</h2> <div class="comments-open-content"> <MTIfRegistrationAllowed>
<a id="comment-form"></a> <div id="comment-form-external-auth"> <script type="text/javascript">  </script> </div>
</MTIfRegistrationAllowed> <MTIfCommentsModerated>
<p class="comments-open-moderated"> (初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください) </p>
</MTIfCommentsModerated>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>"
name=" color=#990099>comments_form" id="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"> <fieldset>
<MTIgnore>
<input type="hidden" name="static" value="1" /> </MTIgnore>
<input type="hidden" name="entry_id" value="<$MTEntryID$>" /><input type="hidden" name="__lang" value="<$MTBlogLanguage$>" /> <div id="comments-open-data"> <div id="comment-form-name"> <p>
<label for="comment-author">Name:</label>
<input id="comment-author" name="author" tabindex="1" accesskey="n" size="30"
value="<MTIf name="comment_preview_template"><$MTCommentAuthor$></MTIf>" /> </p> </div>
<div id="comment-form-email"> <p>
<label for="comment-email">Mail:</label>
<input id="comment-email" name="email" tabindex="2" accesskey="m" size="30"
value="<MTIf name="comment_preview_template"><$MTCommentEmail$></MTIf>" /> </p> </div>
<div id="comment-form-url"> <p>
<label for="comment-url">URL:</label>
<input id="comment-url" name="url" tabindex="3" accesskey="u" size="30"
value="<MTIf name="comment_preview_template"><$MTCommentURL$></MTIf>" /> </p> </div>
<div id="comment-form-remember-me"> <p>
<label for="comment-bake-cookie">
<input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4"
accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)"
value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" /> ログイン情報を記憶する？</label> </p> </div>
</div> <p id="comments-open-text"> <label for="comment-text">Comment:<MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" tabindex="5" accesskey="t" rows="10" cols="30"
onfocus="if (this.value == '') this.value = '';" onblur="if (this.value == '') this.value = '';">
<MTIf name="comment_preview_template">
<$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$><MTElse>
</MTIf></textarea></p>
<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse>
<$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha"></div> </MTIfNonEmpty> <p id="comments-open-footer" class="comments-open-footer">
color=#808040><MTIgnore> <input type="submit" id="comment-preview" accesskey="v"
name="preview" value="Preview" /> <input type="submit" id="comment-post" accesskey="s" name="post" value="Post" />
</MTIgnore> <input type="submit" id="comment-preview" accesskey="v"
value="Preview" onclick="return ajax_comment_preview('comment_posted', 'progress');" />
<input type="submit" id="comment-post" accesskey="s" value="Post"
onclick="return ajax_comment_post('comment_posted', 'progress');" />
<br /> color=#ff00ff>
<img id="progress" style="display:none;" src="<$MTBlogURL$>images/ajax-loader.gif"
alt="Loading..." />
</p> <div id="comment_posted"></div> </fieldset>
</form> </div> </div>
</MTEntryIfCommentsOpen>
</div>

comments_formの部分は修正してます、元はcomments-formです
<br />は、ローディング画像を下に落としたいので改行を入れました

コメントプレビューテンプレート
デフォルトのままだとプレビュー画面がおかしくなりますので
MovableTypeのコメントをAjaxで投稿するよりコピーペーストしました
テンプレートシステムテンプレートコメントプレビュー

コメントエラー、保留ページ
これもデフォルトだとおかしくなるので変更しました
必要のない箇所を削除しました
テンプレートシステムテンプレートコメント完了
当ブログのテンプレートです

<MTIf name="body_class" eq="mt-comment-confirmation">
<MTSetVarBlock name="page_title">投稿されたコメント</MTSetVarBlock>
<MTSetVar name="heading" value="確認">
<MTSetVarBlock name="message">
<p>コメントを投稿しました。</p>
</MTSetVarBlock>
</MTIf>
<MTIf name="body_class" eq="mt-comment-pending">
<MTSetVarBlock name="page_title">コメント保留中</MTSetVarBlock>
<MTSetVar name="heading" value="コメントありがとうございます。">
<MTSetVarBlock name="message">
<p>コメントは現在承認されるまで公開を保留されています。</p>
</MTSetVarBlock>
</MTIf>
<MTIf name="body_class" eq="mt-comment-error">
<MTSetVarBlock name="page_title">コメント投稿エラー</MTSetVarBlock>
<MTSetVar name="heading" value="$page_title">
<MTSetVarBlock name="message">
<p>コメントの投稿に失敗しました:</p>
<blockquote>
<$MTErrorMessage$>
</blockquote>
</MTSetVarBlock>
</MTIf>

<MTIf name="body_class" eq="mt-comment-pending">
<div class="comments-header">コメントありがとうございます</div>
<div class="comment">
<div class="comment-content">
<p>コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。</p>
<p><a href="<MTEntryLink>">元のエントリーに戻る</a></p>
</div>
</div>
</MTIf>

<MTIf name="body_class" eq="mt-comment-confirmation">
<div class="comments-header">コメントありがとうございます</div>
<div class="comment">
<div class="comment-content">
<p>コメントを受け付けました。<a href="<MTEntryLink>">元のエントリーに戻る</a></p>
</div>
</div>
</MTIf>

<MTIf name="body_class" eq="mt-comment-error">
<div class="comments-header">コメントの登録エラー</div>
<div class="comment">
<div class="comment-content">
<p>コメントの登録が失敗しました:</p>
<blockquote><p style="margin:0;"><strong><$MTErrorMessage$></strong>
</p></blockquote>
</div>
</div>
</MTIf>

カスタマイズ（コメントエリア②）

Trackback Pings(0)

Comments(0)

Post a Comment