类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> wordpress主题:增加最多评论功能

wordpress主题:增加最多评论功能

发表日期:2011-08-01 作者:DH分类:编程技术 标签: wordpress php
索引[隐藏]

1 源起

终于搞完了这个功能,现在上线了。这几天非常忙,在休息的时候,看看自说Me话的代码,自己随便搞搞,终于成功了。 最初版:CSS3动画-wordpress读者墙 改进版:css3读者墙 源代码 我盗用版:本文描述 功能看点: a.css3效果 b. 激起评论者的兴趣 c.数字显示评论者数量,血条显示评论者生命力,简单明了。

2 预览

在我的右边侧侧边栏的最多评论,提醒浏览器的支持情况为:

3 源码

3.1 php代码
comments WHERE comment_author_email != 'aa@bb.com' AND comment_approved='1' GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 15";
//大家把管理员的邮箱aa@bb.com改成你的,最后的这个15是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度
    $wall = $wpdb->get_results($query);	
    $maxNum = $wall[0]->cnt;
    foreach ($wall as $comment)
    {
        $width = round(36 / ($maxNum / $comment->cnt),2);//此处是对应的血条的宽度
        if( $comment->comment_author_url )
        $url = $comment->comment_author_url;
        else $url="#";
        $tmp = '
  • pic'.$comment->cnt.''.$comment->comment_author.'
  • '; $output .= $tmp; } $output = '
    '.$output.'
    '; echo $output ; } ?>
    3.2 css代码
    body{overflow-x: hidden;}
    
    .readerwall{
    padding:5px 0 5px 5px;
    font-size:12px;
    overflow:visible;
    }
    
    .readerwall li{
    margin:0;
    padding:3px;
    float:left;
    list-style:none;
    border: 1px solid #DFDFDF;
    -moz-border-radius:2px;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    }
    
    .readerwall .active-bg{
    height:2px;
    font-size:0;
    margin:2px 0 2px 0px;
    background:#DFDFDF; 
    }
    
    .readerwall .active-degree{
    background:red;
    height:2px;
    font-size:0;
    }
    
    .readerwall a{
    display:inline-block;
    width:36px;
    height:36px;
    position:relative;
    padding:0;
    text-decoration:none
    }
    
    .readerwall .pic{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:36px;
    height:36px;
    display:block;
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    border-radius:4px; 
    text-indent:-9999px
    }
    
    .readerwall .num{
    position:absolute;
    top:0;
    left:0;
    z-index:99;
    width:35px;
    height:35px;
    line-height:36px;
    color:#E02523;
    font-size:18px;
    font-weight:bold;
    display:block;
    background:#fff;
    text-align:center;
    border:#bbb 1px solid;
    box-shadow:0 0 4px #ccc;
    -webkit-transform:rotateY(-180deg);
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
    transition:all .4s ease-in-out;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    border-radius:4px
    }
    
    .readerwall .name{
    position:absolute;
    top:0;
    left:0;
    color:#333;
    display:block;
    width:1px;
    height:1px;
    overflow:hidden;
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    text-align:center
    }
    
    .readerwall a:hover .pic{
    z-index:100;
    border-color:#eee;
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg)
    }
    
    .readerwall a:hover .num{
    z-index:101;
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    opacity:.8
    }
    
    .readerwall a:hover .name{
    top:-28px;
    left:-38px;
    z-index:101;
    padding:4px 6px;
    height:20px;
    line-height:20px;
    overflow:hidden;
    background:#fff;
    border-radius:2px;
    box-shadow:0 0 3px #000;
    min-width:100px;
    opacity:.8
    }
    

    4 使用注意点

    1. 将psp代码部分放入到functions.php中(注意前面的php代码的前后标记符,有时候需要去掉的),css部分添加到style.css中。 2. 在需要显示的地方 输入

    5 我和自说Me话的不同点

    5.1 php改为函数调用 5.2 修改了SQL语句,为所有评论中的排序 vs 自说Me话的 近30天的评论 5.3 修改了大小,使能适应我的侧边栏的大小 5.4 修改了图像的个数为15个

    除非注明,文章均为灯火部落原创,转载请注明出处:wordpress主题:增加最多评论功能-灯火部落
    相关文章:
  • wordpress ajax之一:一个简单的例子
  • 域名空间:域名被劫持,恐怖啊
  • wordpress主题:增加帅哥认证标识(续)
  • 友情推荐:知蚁博客站长助手软件
  • wordpress ajax之二:首页ajax分页
  • 博客总结(2011年上半年总结篇)
  • ∧回到顶部∧