wordpress 读者墙实现程序代码 - WordPress

wordpress 读者墙实现程序代码

1:复制PAGE.php页面,改名为readerwall.php,然后在其顶部添加如下代码:

<?php  /*   Template Name: Reader wall   */   ?> 

提示: 你可以先修改部分代码再运行。

2.在需要添加读者墙的位置添加以下代码:

<!-- start 读者墙  Edited By iSayme-->  <?php       $query = "SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != '改成你的邮箱账号' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 39" ; //?>  

大家把管理员的邮箱改成你的,最后的这个39是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度,代码如下:

<?php  $wall  =  $wpdb ->get_results( $query );       $maxNum  =  $wall [0]->cnt;       foreach  ( $wall   as   $comment )      {           $width  =  round (40 / ( $maxNum  /  $comment ->cnt),2); //此处是对应的血条的宽度            if (  $comment ->comment_author_url )           $url  =  $comment ->comment_author_url;           else   $url = "#" ;     $avatar  = get_avatar(  $comment ->comment_author_email,  $size  =  '36' ,  $default  = get_bloginfo( 'wpurl' ). '/avatar/default.jpg'  );           $tmp  =  "<li><a target=" _blank " href=" ".$comment->comment_author_url." ">" . $avatar . "<em>" . $comment ->comment_author. "</em> <strong>+" . $comment ->cnt. "</strong></br>" . $comment ->comment_author_url. "</a></li>" ;           $output  .=  $tmp ;       }       $output  =  "<ul class=" readers-list ">" . $output . "</ul>" ;       echo   $output  ;  ?>  <!--  end  读者墙 --> 

提示: 你可以先修改部分代码再运行。

3.在主题目录中style.css添加以下样式:

.readers-list{ line-height : 18px ; text-align : left ; overflow : hidden ;_zoom: 1 }  .readers-list li{ width : 200px ; float : left ;* margin-right : -1px }  .readers-list a,.readers-list a:hover strong{ background-color : #f2f2f2 ; background-image :-webkit-linear-gradient( #f8f8f8 , #f2f2f2 ); background-image :-moz-linear-gradient( #f8f8f8 , #f2f2f2 ); background-image :linear-gradient( #f8f8f8 , #f2f2f2 )}  .readers-list a{ position : relative ; display : block ; height : 36px ; margin : 4px ; padding : 4px   4px   4px   44px ; color : #999 ; overflow : hidden ; border : #ccc   1px   solid ;border-radius: 2px ;box-shadow: #eee   0 0   2px }  .readers-list img,.readers-list em,.readers-list strong{-webkit-transition: all  . 2 s ease-out;-moz-transition: all  . 2 s ease-out;transition: all  . 2 s ease-out}  .readers-list img{ width : 36px ; height : 36px ; float : left ; margin : 0 8px   0   -40px ;border-radius: 2px }  .readers-list em{ color : #666 ; font-style : normal ; margin-right : 10px }  .readers-list strong{ color : #ddd ; width : 40px ; text-align : right ; position : absolute ;right: 6px ;top: 4px ; font : bold   14px / 16px  microsoft yahei}  .readers-list a:hover{ border-color : #bbb ;box-shadow: #ccc   0 0   2px ; background-color : #fff ; background-image : none }  .readers-list a:hover img{opacity:. 6 ; margin-left : 0 }  .readers-list a:hover em{ color : #EE8B17 ; font : bold   12px / 36px  microsoft yahei}  .readers-list a:hover strong{ color : #EE8B17 ;right: 150px ;top: 0 ; text-align : center ; border-right : #ccc   1px   solid ; height : 44px ; line-height : 40px } 

提示： 你可以先修改部分代码再运行.

查看更多关于wordpress 读者墙实现程序代码 - WordPress的详细内容...