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

好易之 • 2020-05-27 00:35 • 技术文档 • 阅读 1035

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

实现原理

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

实现方法

查看你的评论结构，例如

<olclass=”commentlist”>
<liclass=”comment”>XXXX</li>
</ol>

然后CSS代码如下

.commentlist{
counter-reset:comment-floor;
}
.commentlist>.comment{
position:relative;
}
.commentlist>.comment:before{
content:counter(comment-floor,decimal);
counter-increment:comment-floor;
font-size:48px;
position:absolute;
top:40px;
right:0;
color:rgba(0,0,0,0.05);
font-style:italic;
font-weight:700;
}

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

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

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

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

functionjimmy_comment_floor_css(){
global$wp_query;
if(is_singular()){
global$post;
$comments=get_comments(array(
‘post_id’=>get_the_ID(),
‘orderby’=>‘comment_date_gmt’,
‘order’=>‘ASC’,
‘status’=>‘all’,
));
$page=get_query_var(‘cpage’)?get_query_var(‘cpage’):get_comment_pages_count($comments);
echo‘<styleid=”cooment”>
.commentlist{
counter-reset:comment-floor‘.($page–1)*get_query_var(‘comments_per_page’).‘
}
.commentlist>.comment{
position:relative;
}
.commentlist>.comment:before{
content:counter(comment-floor,decimal);
counter-increment:comment-floor;
font-size:48px;
position:absolute;
top:40px;
right:0;
color:rgba(0,0,0,0.05);
font-style:italic;
font-weight:700;
}</style>’;
}
}
add_action(‘wp_head’,’jimmy_comment_floor_css’,10);

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

百度已收录

本文由【好易之】整理自网络！
原创文章，作者:【好易之】如转载请注明出处：https://www.zhengjiaxi.com/zxwd/jswd/69791.html
如有侵权，请邮件联系 aoduoye@qq.com 删除。
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途，否则后果请用户自负。
本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。
如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。