首页
统计
留言
友链
Search
1
关于人生的七个辩题
300 阅读
2
H3C华为路由器-内网主机通过公网地址访问内部服务器配置
208 阅读
3
H3C ComwareV7 OSPF 错误统计数据
157 阅读
4
I am no hero-Underwater Cities
145 阅读
5
With an Orchid
121 阅读
清风解语
什袭而藏
岁月留声
问天呵壁
学海无涯
桃花映红
登录
Search
标签搜索
散文随笔
励志
无线网络
杂谈
后摇
交换机
资料收集
专辑
华为
WLAN
电声音乐
钢琴曲
流行
VLAN
漫画
心灵鸡汤
信息安全
SDN
网络管理
VM
cych
累计撰写
91
篇文章
累计收到
0
条评论
首页
栏目
清风解语
什袭而藏
岁月留声
问天呵壁
学海无涯
桃花映红
页面
统计
留言
友链
搜索到
1
篇与
的结果
2014-12-19
小伙伴们,快到墙上来
自从加入WP的大家庭后,连玩游戏都给丢掉了。每天就逛逛大家的博客,也折腾下自己的。看到好看的模板,有华丽效果的模板也很爱不释手,也想给自己这个小站披上。经常逛大家的博客,看到好多人都有一个叫读者墙的页面,都挺好看也很炫酷。琢磨着自己也弄一个,于是就问问度娘了。发现折子戏发布的一个 CSS3 特效的读者墙博文,感觉还不错,就来折腾了。按照原来的码贴上后,GravatarLocalCache插件缓存到本地的Gravatar头像会失效,依然会从Gravatar服务器加载,页面加载非常慢,而且全是裂图。折腾半天,删了一个参数就行了。给和我一样都是外行的朋友们分享下。炫酷的读者墙马上登场。1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码<?php /* Template Name: 读者墙 */ ?> 2.接着改文件代码里找到< ?php the_content('');?>在它的前面添加下面的代码(我是加到后面的,根据自己想要放的位置来选择) <!-- 读者墙 --> <?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 28";//大家把管理员的邮箱改成你的,最后的这个28是选取多少个头像,大家可以按照自己的主题进行修改,来适合主题宽度 $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' ); $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文件中添加下面的css样式/**读者墙**/ .readers-list {line-height:18px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-o-text- } .readers-list li{width:179px;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:#DD3322;font:bold 12px/36px microsoft yahei} .readers-list a:hover strong{color:#DD3322;right:129px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px} 最终效果: http://cych.wang/rwtest
2014年12月19日
73 阅读
0 评论
0 点赞