评论楼层是很早就有的一个功能了,最早是研究出来的已经不可考,我今天带来的方法是几乎使用纯CSS来实现评论楼层。为什么说是几乎呢,因为CSS不能进行数学运算,所以当开启评论分页的时候我们需要一些辅助黑科技来实现“CSS 实现评论楼层”。
实现原理
主要是使用了CSS计数器counter-increment
和counter-reset
,本文重点并不是介绍这两个属性,所以就不做详细介绍了。利用CSS计数器再加上before
伪类,我们可以轻松实现评论楼层。
实现方法
查看你的评论结构,例如
<ol class="commentlist"> <li class="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
中即可,注意根据你的评论结构进行略微调整,和上面的一样。
function jimmy_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 '<style id="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的对象混存机制,这并不会造成额外的数据库查询,所以可以放心使用。
puma主题已经用上感觉挺好,本准备上次定制一款,现在看看用着很合适,感谢了!
xx
@a 盖楼
撸一下
既然如此,盖个楼哇
改完楼要刷新才能看到
看了好久终于看到了楼层显示在右侧背景……
黑科技
想在数字前面加上”#”怎么弄?试了几次没成功……
@synyan
content:"#" counter(b, decimal)
@Jimmy 原来如此简单,我写成了content:”#” . counter(b, decimal)
@synyan
连接符
谢谢博主分享,但css代码直接放头部那样个人不喜欢,我看博主自己用的都是统一放css文件里的,要怎么改呢?
@kaikai
我没分页。
@Jimmy 谢谢博主,再请教一个问题, 图片延迟加载有这样的吗?
,当图片没加载的时候div样式是display:block, 当图片加载出来后div样式变为display:none.
@kaikai
不明白你说的
原来出处是这里,才刚看到。。。
@林木木 。。。挖的这么深