一行代码实现WordPress评论折叠
写博客的愉悦总是会伴随很多的烦恼。
流量小的时候看着寒碜的统计曲线心情沮丧,流量大的时候看着限定的带宽越来越小忧心忡忡。没评论的时候觉得博客冷清得只有自己自言自语,评论多的时候又觉得评论太多以至于别人或者自己要添加一个新的评论都要把鼠标滚半天才能到回复框。聪明点的按下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
about 9 months ago
我也来测试一下哈
about 9 months ago
这是更换了域名后的新博客新模板- -还没有添加
about 9 months ago
好久没见到你了,这主题字体太大了
about 9 months ago
我自己修改的=..=
about 9 months ago
非常好的方法,而且博主的字体看着很舒服。
about 9 months ago
多谢啦,如果你的电脑上有微软雅黑字体,那么你看见的将是微软雅黑
about 11 months ago
@妖娆盛唐, 了解“
about 11 months ago
1.=..=半夜写的,没精力去检查,多谢指错
2.害怕在展示的时候所需功能尚未加载?有专门的插件把很多的JS都放到底部……
about 11 months ago
@Mac, 呃……代码被转换掉了,写入html传到网上了:
点击这里查看
about 11 months ago
@Mac, =..=话说我不做前台……对JS所知甚少,囧
我会啥捏……
about 11 months ago
@妖娆盛唐, 话说有兴趣交换链接么,我已经添了挨踢八卦的了 =v=
about 11 months ago
@绯, =。。=整天改名字……我都不知道你是谁了……
yo2没玩过,听说不错,面向需求不同罢了。对于只想写博客的人来说,这个挺好。花点钱,绑个域名。只管写。而且已经成型了的社区也方便了博客的交流。
对于喜欢折腾的人来说……还是虚拟主机比较好。最大的自定义性。整天折腾来折腾去。大部分时间甚至是在修改博客上……
貌似我现在不太清楚网民的路线是什么……大部分是喜欢折腾呢,还是大部分懒懒的只想磨叽几句……
所以么
YO2.CN,有前途,但是前途不大
about 11 months ago
@绯, 还有,我WP玩得并不转,必须的CSS、JS、PHP我都只是知道,会涂涂改改。自己写新功能从来不会……