最近对blog的主题再更改了一下,检查时候觉得当某页面的留言多了,查看起来不太方便,而且页面也会被弄得过长呢,自己不太喜欢。那就想干脆把旧的留言收起来,或者做成留言分页好了。
对于即将到来的WordPress 2.7,我们可以通过修改模板实现留言分布,具体教程可以看这篇《WordPress 2.7 的评论分页》。但当我看到Sofish介绍的这篇《写给设计人的10个jQuery特效》后,我决定还是用伟大的JQuery隐藏旧留言吧,需要查看效果的请直接到本站查看留言吧,因为贴个图看不出
实现不难,首先在<header>标签内调用JQuery,我是直接拿来主义的:http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js,你直接链接这个地址就好了,好处不用多说。
然后在<header>标签内再增加一段javascript:
$(document).ready(function(){
//只展开第一条留言,数字0代表。
$(".message_list .message_body:gt(0)").hide();
//隐藏第5条后的所有留言,数字4代表。
$(".message_list li:gt(4)").hide();
//隐藏和展开留言效果
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});
//收起所有留言
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});
//显示所有留言
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
//显示最近留言(留言条数可通过上面设置)
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});
});
然后就是打开你的comment.php文件,修改一下留言的<ol><li>标签的样式定义,当然你也可以修改上面js语句中的样式定义使其符合你原来的comment样式。这里我以修改comment.php文件中的样式作例:
- 把模板中的<ol>样式改为message_list,即成为<ol class="message_list">;
- 在<li>标签内,增加一段用于隐藏留言内容后的显示标题,比如显示留言者的名字,留言时间等:
<p class="message_head"><cite>留言者名字</cite> <span class="timestamp">留言时间</span></p>
注意这里的样式是"message_head"。一般添加在留言内容之前则可。 - 然后把留言的内容(即要可隐藏的内容)用一个<div class="message_body">包括起来,在WordPress中代码可以如下:
<div class="message_body"><?php echo comment_text();?></div>。 - 接着在comment.php内查找</ol>这个结束标签,在其后面加上如下代码:
<p class="collapse_buttons"><a href="#" class="show_all_message">Show all comments (<?php echo $countComments; ?>)</a> <a href="#" class="show_recent_only">Show 5 only</a> <a href="#" class="collpase_all_message">Collapse all</a></p>
增加这段是为了增加“显示/隐藏”留言的链接按钮。
实现就是上述的几步。可能我说得简单点,但实现的方法不难, 效果也不错,试试不妨。