wordpress教程:为网站添加个性读者墙

wordpress个人网站使用的wordpress主题一般都带有读者墙模板,但自带的读者墙样式较为死板, 仅仅能够展示网站留言访客的头像信息。这几天在翻看大前端主题和折子戏博客的时候,发现了这类个性的读者墙设计,果断学习然后折腾自己的网站。直到昨天晚上折腾到一点半才算完工,在修改完善过程中,大家需要根据自己的wordpress主题模板和CSS文件来修改,达到最适合自己网站效果为目标。

一.制作读者墙模板页面


1.到正在使用的主题目录下,找到PAGE.php页面,下载到本地(如果用诸如flashxp之类的在线编辑,一定要保存为utf-8格式),修改文件名为readerwall.php,首先我们为此文件添加文件名,使得我们在wordpress后台新建页面的时候,能够调用此读者墙文件,插入以下注释:

1
2
3
4
5
/*

Template Name: 美化读者墙

*/

2.在顶部添加以下代码,实现读者墙效果的调用(注意:此处代码添加位置要根据大家主题的实际效果来调整,不同wordpress对应的代码和位置不同,在这暗淡的黑就不给出位置了!):

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
<!-- start 读者墙  Edited By iSayme-->
<!--?php </p-->

$query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb-&gt;comments LEFT OUTER JOIN $wpdb-&gt;posts ON ($wpdb-&gt;posts.ID=$wpdb-&gt;comments.comment_post_ID) WHERE comment_date &gt; 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-&gt;get_results($query);

$maxNum = $wall[0]-&gt;cnt;

foreach ($wall as $comment)

{

$width = round(40 / ($maxNum / $comment-&gt;cnt),2);//此处是对应的血条的宽度

if( $comment-&gt;comment_author_url )

$url = $comment-&gt;comment_author_url;

else $url="#";
$avatar = get_avatar( $comment-&gt;comment_author_email, $size = '36', $default = get_bloginfo('wpurl').'/avatar/default.jpg' );

$tmp = "
<ul>
    <li><a href="
\&quot;&quot;.$comment-" target="\&quot;_blank\&quot;">comment_author_url."\"&gt;".$avatar."<em>".$comment-&gt;comment_author."</em> <strong>+".$comment-&gt;cnt."</strong>".$comment-&gt;comment_author_url."</a></li>
</ul>
&nbsp;

"
;

$output .= $tmp;

}

$output = "
<ul class="
\&quot;readers-list\&quot;">".$output."</ul>
"
;

echo $output ;

?&gt;

<!-- end 读者墙 -->

二.添加CSS代码实现个性读者墙美化


1.在当前wordpress主题下,找到style.css,在适当位置插入以下代码实现对读者墙的美化功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 添加读者墙功能CSS */
#content_readerwall{float:left;width:980px;overflow:hidden;}
#map_readerwall{height:27px;margin:0 0 0 0;border-bottom:2px solid #08A5E0;border-left:1px solid #CCC;border-right:1px solid #CCC;}
.entry_box_s_readerwall{position:relative;background:#fff;width:948px;margin:0 0 0 0;padding:10px 15px 10px 15px;border-top:1px solid #CCC;border-left:1px solid #CCC;border-right:1px solid #CCC;border-bottom:2px solid #08A5E0;}
.readers-list {line-height:18px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-o-text-}
.readers-list li{width:235px;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:5px;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:185px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}

2.根据自己使用的wordpress修改相应的css代码,比如li宽度,填充等等。

本站读者墙预览地址:http://www.wenchenhk.com/readers-walls

wordpress教程:美化读者墙设置