网站建设实习目的

网站建设实习目的

前几日在大前端看到他站点中最新的CSS3读者墙代码，一看效果绚丽的不得鸟，立刻就开始研究了，多次研究未果，可终究是研究出来了，昨天刚成功，今天啊和童鞋来我站说读者墙头像显示不对，我一看，还真是，头像都显示了可都和博友们的不对呢，研究好了好久还是没有结果。

由于大前端没有写具体的代码教程，于是乎我这里就共享出来，教大家怎么制作这非常绚丽的读者墙。

演示地址可见：http://zhezixi.com/index.php/reader-wall

一：制作reader-wall读者墙页面

1：复制PAGE.php页面，改名为readerwall.php，然后在其顶部添加代码

?php
/*
Template 盐城网站建设公司 Name: Reader wall
*/
?

2：打开刚创建插入读者墙页面，搜索

?php the_content('');?

在它前面加入以下代码设置好读者墙！

!-- 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是选取多少个头像，大家可以按照自己的主题进行修改,来适合主题宽度

$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 = "lia 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 读者墙 --

二：添加超酷CSS3代码美化读者墙页面

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 .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s 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}

好了，到此教程结束了！刷新你的读者墙页面，看看是不是出现效果咯！！！