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