●コメントを開閉式にする
作製中の別ブログにおいて、コメントの投稿欄を開閉式にするカスタマイズを行ってみました。
ちょっとやってみたい事があり、そのためにはコメントフォーム部分が開閉できた方が都合がよい事と、絵文字用のアイコンのせいで、ページの表示に時間がかかる事を避けるためです。
(実際はアイコン数が少ないので、そこまでもしなくていいのですが……)
後日談現在はこの改造は使用していません
続きを読む
思った以上に手こずりました(笑)
当初は、CROSSBREED クロスブリード!さんのフォームメールの導入と、サイドメニューの開閉の応用で何とかなると思ったのですが、ダメでした。
上手くいったかのようには見えたのですが、メインインデックスやアーカイブファイルなどで、複数の記事が1ページに存在する場合、2つ目移行の記事の「コメントを投稿する」をクリックすると、一番上にあるエントリーの「コメントを投稿する」が開かれてしまうのです。
簡単ですね。この「C1」に当たるID(?)を、ページ内の複数の「コメントを投稿する」が共有してしまった事が原因ですね。
ここで注意するのが、「C1」の部分です。これはクリックしたときにどのメニューをオープンするかという目印みたいなもので、もう一つ設置する場合は「C2」のように数字を変えましょう。わかりましたか?
複数記事が存在するのであれば、「C2」「C3」……と割り振らなければならない訳ですが、私にはその方法がまったくわかりませんため、この方法は諦める事となりました。
他にも、ネットで公開されている開閉(折り畳み)に関するjavascriptを色々と組み込んでみましたが、同じ原理でどうする事もできませんでした。
そのため、一度は諦めた「コメントを投稿する」の開閉ですが、なんと、まさにそのための方法が紹介されているエントリーをついに発見しました!!
正確には、「コメント欄を開閉式にする方法」ですが、もちろん、「コメントを投稿する」にも応用ができましたので、ご紹介致します。
このエントリーに従ってテンプレートを書き換えて見たところ、無事にコメント投稿欄を開閉式にする事ができました。<script type="text/javascript">また、私はやっていませんが、コメントも隠したり表示したりしたい場合は、以下のように
function showHide(entryID, entryLink, htmlObj, type) {
if (type == "comments") {
extTextDivID = ('comText' + (entryID));
extLinkDivID = ('comLink' + (entryID));
} else {
extTextDivID = ('extText' + (entryID));
extLinkDivID = ('extLink' + (entryID));
}
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
</script>
"ext" を "com"に変えて Individualテンプレートの
<MTEntryIfAllowComments>
から
</MTEntryIfAllowComments>
の間を書き換えればいいようです。(中略)
一応私もこのコメント部分の動作を確認してみたんですが、このままではコメントを投稿する「Add your comment」の部分が正常に動かなかったので、以下のように修正してみました。
<MTEntryIfAllowComments>
<div class="posted" id="comLink<$MTEntryID$>">
<a href="<$MTEntryPermalink$>" name="com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,'<$MTEntryPermalink$>',this,'comments');return false;">Comments read & write(<$MTEntryCommentCount$>)</a>
</div>
<div class="posted" id="comText<$MTEntryID$>" style="display: none">
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a><MTComments>
<a name="<$MTCommentID$>"></a>
<div class="comments-body">
<$MTCommentBody$>
<span class="comments-post">Posted by: <$MTCommentAuthorLink spam_protect="1"$> at <$MTCommentDate$></span>
</div>
</MTComments>
<MTEntryIfCommentsOpen>
<div class="comments-head">Post a comment</div>
<div class="comments-body">
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<div style="width:180px; padding-right:15px; margin-right:15px; float:left; text-align:left; border-right:1px dotted #bbb;">
<label for="author">Name:</label><br />
<input tabindex="1" id="author" name="author" /><br /><br />
<label for="email">Email Address:</label><br />
<input tabindex="2" id="email" name="email" /><br /><br />
<label for="url">URL:</label><br />
<input tabindex="3" id="url" name="url" /><br /><br />
</div>
Remember personal info?<br />
<input type="radio" id="bakecookie" name="bakecookie" /><label for="bakecookie">Yes</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">No</label><br style="clear: both;" />
<label for="text">Comments:</label><br />
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"></textarea><br /><br />
<input type="submit" name="preview" value=" Preview " />
<input style="font-weight: bold;" type="submit" name="post" value=" Post " /><br /><br />
</form>
<script type="text/javascript" language="javascript">
<!--
document.comments_form.email.value = getCookie("mtcmtmail");
document.comments_form.author.value = getCookie("mtcmtauth");
document.comments_form.url.value = getCookie("mtcmthome");
if (getCookie("mtcmtauth")) {
document.comments_form.bakecookie[0].checked = true;
} else {
document.comments_form.bakecookie[1].checked = true;
}
//-->
</script>
</div>
</MTEntryIfCommentsOpen>
<div class="posted">
<a href="#com<$MTEntryID pad="1"$>" onclick="showHide(<$MTEntryID$>,0,this,'comments');return true;">Hide Comments</a>
</div>
</MTEntryIfAllowComments>
【覚え書き】
このカスタマイズをしていて見つけたプラグイン・MTIfEmpty。
詳しい使い方はClumsyKen: MTIfEmpty というプラグインを使って。