写博客的愉悦总是会伴随很多的烦恼。

流量小的时候看着寒碜的统计曲线心情沮丧,流量大的时候看着限定的带宽越来越小忧心忡忡。没评论的时候觉得博客冷清得只有自己自言自语,评论多的时候又觉得评论太多以至于别人或者自己要添加一个新的评论都要把鼠标滚半天才能到回复框。聪明点的按下END,可是经常看到的是花样繁复的广告,还得往回滚,如此折腾。虽然这属于“幸福的烦恼”(小晴MM语)。鼠标也有生命,请君手下留情。

话说WordPress2.7增加了回复分页的功能,省掉了一点距离。但是不但没有省去多少,还带来了看所有评论(有人就是喜欢这样)还得点分页的新麻烦。更何况很多人依然在使用不支持分页的旧模板。

啰嗦一大堆,这次分享两种很简单实用的,在让访客在浏览你的WordPress网站时候节省鼠标的方法。算是一种贴心服务。

方法一:利用锚标记跳至评论框

在你的模板的comments.php里找到你的留言列表标题(就像挨踢八卦的这个“网友评论”一样)。在旁边合适的位置添加如下代码:

<a href=”#jumptocomments”>跳至回复框</a>

然后在你回复框的标题代码上边添加如下代码(这个标题是指如挨踢八卦的“想说什么就写下面吧Leave a comments”):

原来的代码是这样:<h3>想说些什么就写下面吧Leave a Comment</h3>

修改成这样:<h3 id=”jumptocomments”>想说些什么就写下面吧Leave a Comment</h3>

可以看出,这个方法只用了html标记。这是最简单、没有什么花样同时又不影响性能的方法。非常实用。以上展示的代码中“jumptocomments”可以修改成自己喜欢的。

方法二:利用jQuery收放(折叠/展开)评论列表

这个方法才是今天介绍的重点。

还是在comments.php里,首先找到你的评论列表布局样式定义名称。一般都是在评论列表标题下边。大部分WordPress模板都是采用<ol></ol>标记来列出评论列表。因此找到<ol class=”xxxx”>引号中的内容(绝大多数WordPress模板也都是comments)。

然后在适当的地方,比如在评论列表标题下边,加入以下代码:

<a style=”cursor:pointer” onclick=”jQuery(‘#comments‘).toggle();”>折叠评论</a>

其中红色粗体部分,你需要根据你的模板的具体情况来更改,也就是我们在一开始要找的那个东西。一般都是comments。“折叠评论”四个字也可以根据自己的喜欢修改。在其周围还可以添加上一些样式来使用特殊的字体、颜色等修饰。

行了,去前台找个回复比较多的文章来体验一下这句简单代码带来的方便、强大而又花哨的功能吧。看着一长串的列表和奇形怪状的头像被你一次点击就全部隐藏起来,消失掉了,你心爱的回复框立刻出现了,不用拼命拨鼠标滚轮了,是不是非常爽?

有些人可能会遇到代码无效的问题。这可能是由于你的网站没有载入jQuery api导致。这时候就要用到我在上一篇《WordPress提速优化13招》里提到的方法:使用Google Ajax language API来让Google帮我们载入jQuery API了。方法是在comment.php的任意空白地方加入以下代码(建议加在最底部,这样会减少页面展现时间。你甚至可以像我一样把下边的代码放进footer.php里,并且我也推荐这样做)。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script> <script type=”text/javascript”>google.load(“jquery”, “1.3.2″);</script>

好了。可以感受一下这个有多么好用了。你也可以现在就在挨踢八卦就感受。不要吝惜鼠标,点一下下边的“折叠评论”链接吧。

有什么问题请留言。

update:关于使用JavaScript隐藏div层的方法还可以参考这个链接(不过代码就多了很多):How to hide a div

这里相关的八卦不止此文哈....