• 在WordPress中利用Jquery隐藏较旧留言

    分类：WordPress | 标签： ,,, | 浏览次数：2,163

    最近对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文件中的样式作例：

    1. 把模板中的<ol>样式改为message_list，即成为<ol class="message_list">；
    2. 在<li>标签内，增加一段用于隐藏留言内容后的显示标题，比如显示留言者的名字，留言时间等：
      <p class="message_head"><cite>留言者名字</cite> <span class="timestamp">留言时间</span></p>
      注意这里的样式是"message_head"。一般添加在留言内容之前则可。
    3. 然后把留言的内容（即要可隐藏的内容）用一个<div class="message_body">包括起来，在WordPress中代码可以如下：
      <div class="message_body"><?php echo comment_text();?></div>。
    4. 接着在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>
      增加这段是为了增加“显示/隐藏”留言的链接按钮。

    实现就是上述的几步。可能我说得简单点，但实现的方法不难， 效果也不错，试试不妨。

    或者收藏到 Delicious。建议通过 RSS 订阅本站更新。你还可以 follow me 谢谢！ — by Jinwen @ 2008/11/25 17:05