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

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

实现原理

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

实现方法

查看你的评论结构,例如

  1. <olclass=”commentlist”>
  2. <liclassn C ? ` 4=”comment”>XXXX</li>
  3. </ol>

然后CSS代码如下

  1. .commentlist{
  2. counter-reset:comment-floor;
  3. }
  4. .commy a y n q S |entlist>.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了。使用>选择器避免子评论污染。

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

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

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

  1. functionjimmy_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‘<styleid=”cooment”>
  13. .commentlist{
  14. counter-reset:comment-floor‘.($page–1)*get_query_var(‘comments_per_page’).‘
  15. }
  16. .commentlist>.commA z v a X –4 e $ i , 1 F 8 # 6 w 1ent{
  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教程:获取今日和本周更新文章数量

2020-12-5 11:57:28

技术教程

WordPress教程:更换安装目录

2020-12-5 11:57:32

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