为你的WordPress博客添加CSS3炫酷读者墙
为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧:
1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码
1
2
3
4
5
|
< ?php /* Template Name: Reader wall */ ?> |
2.接着改文件下面找到
1
|
< ?php the_content( '' );?> |
在它的前面添加下面的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 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 = "<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样式(我修改过,你也可以根据你自己的主题修改相应的代码)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
.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-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; font-size:12px; 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 } .readers-list { line-height: 18px; text-align: left; _zoom: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis; } |
4.新建一个页面,模板选择readerwall.php,内容不填,标题填“读者墙”,然后把页面添加到菜单中即可。
搞定!
为你的WordPress博客添加CSS3炫酷读者墙的更多相关文章
- 简单CSS3实现炫酷读者墙
如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...
- 简单使用CSS3实现炫酷读者墙效果
读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...
- 将你的wordpress博客添加到百度个性首页
当你登陆百度账号后,进入百度首页会显示新的个性首页,不仅仅有搜索框,下面还有一个小型导航,放着你经常去的网站. 百度提供了一键添加到百度首页的按钮代码. 首先,先打开分享到百度新首页代码申请页面:ht ...
- 20款时尚的 WordPress 博客主题【免费下载】
在这篇文章中,我们收集了20款时尚的 WordPress 博客模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单 ...
- 烂泥:使用nginx利用虚拟主机搭建WordPress博客
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近开始打算学习nginx web服务器,既然是学习还是以实用为目的的.我们在此以搭建WordPress博客为例. 搭建WordPress博客,我们需要 ...
- WordPress博客教程:博客赚钱
稍有关注独立博客的人都应该知道,中文博客实现盈利非常艰难,至少对于大部分中文博客来说是这样的.但很多时候我们不得不往赚钱的方向前进,至少要交得起域名和空间的租用费吧.不过期待赚钱前,你必须思考下如何提 ...
- Coding.net代码托管空间申请与使用-安装并运行WordPress博客
参考: http://www.freehao123.com/coding-net/ Coding.net这是一个国内新兴的代码托管平台,功能主要包括:代码托管.在线运行环境.监控代码质量,兼有一定的社 ...
- 多作者wordpress博客彻底屏蔽可视化编辑
如果你的wordpress博客支持多作者,但是难免有些作者会加入过多的链接,怎么办呢?可以考虑屏蔽可视化编辑 在 functions.php 添加如下代码即可: add_filter('user_ca ...
- 小白用linode VPS搭建wordpress博客过程备忘 | Linode中文教程
第一步:装debian系统 1.访问linode官方网站,查看http://library.linode.com/getting-started,我用的是debian系统,用putty登录,升级deb ...
随机推荐
- 在windows上安装nginx
在windows上安装nginx 最近自己也尝试了一下在windows上安装nginx,其实非常的简单,这里算是备忘一下. 首先需要到nginx的官网上下载最新版的nginx:http://n ...
- windows转mac-开发环境搭建(二):mac上java环境搭建
1.首先下载jdk,地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.安 ...
- 如何使用 libqr 库生成二维码?
使用 libqr 库只需 4 步即可生成二维码 1.初始化 QRCode 结构体 QRCode *qrInit(int version, int mode, int eclevel, int mask ...
- uva 116 单向TSP
这题的状态很明显. 转移方程就是 d(i,j)=min(d(i+1,j+1),d(i,j+1),d(i-1,j+1)) //注意边界 我用了一个next数组方便打印结果,但是一直编译错误,原来是不能用 ...
- Shell 脚本实践
1. 脚本判断命令输出是否为空 (1)判断字符串为空 if [ "$str" = "" ] if [ x"$str" = x ] if ...
- sqlserver中select造成死锁
死锁过程: select语句使用非聚族索引查询产量信息,会对非聚族索引添加共享锁,由于非聚族索引上没有select的全部数据列,(所以会有书签查找出现,)需要查询产量表.查询产量表时,需要对产量表数据 ...
- vxworks下硬盘测速程序
void speed(int buflen,int mod){/*int mod = 0;*/ int len=50; FILE *fp; unsigned int i=0,j=0,tmp,tmp2; ...
- VxWorks 基本启动方式
VxWorks 基本启动方式 按VxWorks内核的下载形式,VxWorks启动总体上分为两种方式:下载型和ROM 型. @下载型启动方式:bootrom+VxWorks.此时boot ...
- R语言之内存管理
转载于:http://blog.csdn.net/hubifeng/article/details/41113789 在处理大型数据过程中,R语言的内存管理就显得十分重要,以下介绍几种常用的处理方法. ...
- OTG驱动分析(一)
前一段时间弄了2个礼拜的OTG驱动调试,感觉精神疲惫啊.主要原因还是自己对OTG功能不了解造成的.现在终于完成但是对实质原理还有些模糊.所以自己重新总结一下.因为自己是菜鸟,所以用菜鸟的白话方式分析. ...