• 开启全站HTTPS。2017-04-29
  • 本站为非盈利性站点,所得收入全部用于网站服务器及其他费用。2015-10-15
  •    2年前 (2016-04-22)  WordPress教程 |   抢沙发  17 
    文章评分 0 次,平均分 0.0

    评论楼层是很早就有的一个功能了,最早是研究出来的已经不可考,我今天带来的方法是几乎使用纯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的对象混存机制,这并不会造成额外的数据库查询,所以可以放心使用。

     

    除特别注明外,本站所有文章均为小浩博客原创,转载请注明出处来自https://www.xhsay.com/css-implementation-review-floor.html

    关于
    小浩博客(www.xhsay.com)是由Tovey建立的个人站点,主要致力于整合并分享各种互联网及网站建设的资源。

    发表评论

    表情 格式

    暂无评论

    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册