博华网络科技,点击查看详情

WordPress教程:纯CSS实现评论楼层

评论楼层是很早就有的一个功能了,最早是研究出来的已经不可考,我今天带来的方法是几乎使用纯CSS来实现评论楼层。为什么说是几乎呢,因为CSS不能进行数学运算,所以当开启评论分页的时候我们需要一些辅助黑科技来实现“CSS 实现评论楼层”。

实现原理

主要是使用了CSS计数器counter-increment和counter-reset,本文重点并不是介绍这两个属性,所以就不做详细介绍了。利用CSS计数器再加上before伪类,我们可以轻松实现评论楼层。

实现方法

查看你的评论结构,例如

  1. <ol class=”commentlist”>
  2. <li class=”comment”>XXXX</li>
  3. </ol>

然后CSS代码如下

  1. .commentlist{
  2. counter-reset: comment-floor;
  3. }
  4. .commentlist > .comment{
  5. position:relative;
  6. }
  7. .commentlist > .comment:before{
  8. content:counter(comment-floor, decimal);
  9. counter-increment:comment-floor;
  10. font-size: 48px;
  11. position:absolute;
  12. top:40px;
  13. right:0;
  14. color:rgba(0,0,0,0.05);
  15. font-style: italic;
  16. font-weight: 700;
  17. }

commentlist是评论列表父容器,comment就是评论的class了。使用>选择器避免子评论污染。

这是最简单的只有一页评论的情况,如果是有多页评论该如何解决就是一个问题了,可喜可贺的是counter-reset可以指定从几开始计数,所以我们只要知道我们处于第几页评论就可以轻松的实现计数了,因为不同人的设置可能不同,所以这里我们使用wp_head这个动作直接内链CSS样式。

要注意的是并不是所有主题都是用了wp_head函数,很多劣质主题都没有遵循wp标准,所以可能出现代码无效的情况。

下面的代码加入到functions.php中即可,注意根据你的评论结构进行略微调整,和上面的一样。

  1. function jimmy_comment_floor_css(){
  2. global $wp_query;
  3. if ( is_singular() ) {
  4. global $post;
  5. $comments = get_comments( array(
  6. ‘post_id’ => get_the_ID(),
  7. ‘orderby’ => ‘comment_date_gmt’,
  8. ‘order’ => ‘ASC’,
  9. ‘status’ => ‘all’,
  10. ) );
  11. $page = get_query_var(‘cpage’) ? get_query_var(‘cpage’) : get_comment_pages_count($comments);
  12. echo ‘<style id=”cooment”>
  13. .commentlist{
  14. counter-reset:comment-floor ‘. ($page – 1) * get_query_var(‘comments_per_page’) . ‘
  15. }
  16. .commentlist > .comment{
  17. position:relative;
  18. }
  19. .commentlist > .comment:before{
  20. content:counter(comment-floor, decimal);
  21. counter-increment:comment-floor;
  22. font-size: 48px;
  23. position:absolute;
  24. top:40px;
  25. right:0;
  26. color:rgba(0,0,0,0.05);
  27. font-style: italic;
  28. font-weight: 700;
  29. }</style>’;
  30. }
  31. }
  32. add_action(‘wp_head’,’jimmy_comment_floor_css’, 10);

在实现过程中发现4.4 wp_query中无法获取最大评论页数,所以只能模拟一下wp_list_comment来获取总页数,由于wp的对象混存机制,这并不会造成额外的数据库查询,所以可以放心使用。

人已赞赏
wordpress教程

WordPress教程:获取今日和本周更新文章数量

2020-5-26 12:41:02

wordpress教程

WordPress教程:更换安装目录

2020-5-26 12:41:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索