如何在wordpress现有页面添加读者墙

 2014-10-10 17:35:59  2,400 人阅读  9 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

我们在很多博客网站的留言板或其他页面都能看到有读者墙这个功能模块,主要是显示评论数最多的前几位读者,以此激励读者踊跃评论,也方便博主自己访问这些活跃读者的博客。本文就介绍一下如何在wordpress现有的页面中添加读者墙。

如何在wordpress现有页面添加读者墙|boke112导航

如在留言板中添加读者墙,假如这个留言板的网址是https://boke112.com/zxly,那么具体添加读者墙的步骤如下:

1、下载所使用主题中的page.php文件和style.css文件。

2、复制所使用主题中的page.php文件,改名为page-zxly.php,然后打开这个文件并在其中找到<?php the_content(); ?>,在它的上面或下面(区别在于读者墙是在留言板内容的上面或下面显示)添加如下代码:

  1. <div id="dzq">
  2. <?php
  3. $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 != 'mengxlr@sina.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 15";
  4. $wall = $wpdb->get_results($query);
  5. $maxNum = $wall[0]->cnt;
  6. foreach ($wall as $comment)
  7. {
  8. $width = round(40/($maxNum / $comment->cnt),2);
  9. if$comment->comment_author_url )
  10. $url = $comment->comment_author_url;
  11. else $url="#";
  12. $avatar = get_avatar( $comment->comment_author_email, $size = '36',$default = get_bloginfo('wpurl').'/default.jpg');
  13. $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>";
  14. $output .= $tmp;
  15. }
  16. $output = "<ul class=\"readers-list\">".$output."</ul>";
  17. echo $output ;
  18. ?>
  19. </div>

3、把以上代码中的comment_author_email != 'mengxlr@sina.com'邮箱地址改为自己的邮箱地址,以排除博主本人。同时,以上代码中的LIMIT 15是显示评论数最多的前15名读者,如需要显示更大或更少的读者直接修改这个15即可。

4、在style.css文件最后面插入以下代码美化读者墙。

  1. /* 读者墙 */
  2. #dzq ul{margin: 0 0 0 24px;}
  3. #dzq .readers-list{font-size:12px;line-height:18px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;whitewhite-space:nowrap;}
  4. #dzq .readers-list li{list-stylenone;margin:0;width:230px;float:left;*margin-right:-1px}
  5. #dzq .readers-list a,#dzq .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)}
  6. #dzq .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}
  7. #dzq .readers-list img,#dzq .readers-list em,#dzq .readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}
  8. #dzq .readers-list img{width:36px;height:36px;float:left;margin:0 8px 0 -40px;border-radius:2px}
  9. #dzq .readers-list em{color:#666;font-style:normal;margin-right:10px}
  10. #dzq .readers-list strong{color:#ddd;width:40px;text-align:rightright;position:absolute;rightright:6px;top:4px;font:bold 14px/16px microsoft yahei}
  11. #dzq .readers-list a:hover{border-color:#BA4C32;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none}
  12. #dzq .readers-list a:hover img{opacity:.6;margin-left:0}
  13. #dzq .readers-list a:hover em{color:#BA4C32;font:bold 14px/36px microsoft yahei}
  14. #dzq .readers-list a:hover strong{color:#BA4C32;rightright:170px;top:0;text-align:center;border-right:#ccc 1px solid;height:44px;line-height:40px}

5、读者墙默认是一行显示三个读者,如果页面宽度不够,只需修改

  1. #dzq .readers-list li{list-stylenone;margin:0;width:230px;float:left;*margin-right:-1px}中的width:230px;

中的width:230px;即可,如一行只显示1个或2个读者,只需要把这个230px改小为200px或更小即可;如一行显示3个读者后还剩余有很多空间,可将230px改小为250px或更大即可;

6、将page-zxly.php文件和style.css文件上传到我们所使用的主题文件夹中,次数刷新一下留言板页面,看看是不是已经有了读者墙模块?

至此,我们在wordpress现有的页面中添加读者墙已经完成。

文中涉及到的技术来自于折子戏

如果文章对你有帮助,请赞赏支持boke112导航发展!

历史上的今天:

本文地址:https://boke112.com/118.html
文章标签: ,  
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!

 发表评论


  1. Catherine
    Catherine 【小白】 @回复

    Hi, my name is Catherine and I am the marketing manager at StarSEO Marketing. I was just looking at your 如何在wordpress现有页面添加读者墙 | boke123网址大全 website and see that your site has the potential to become very popular. I just want to tell you, In case you don’t already know… There is a website network which already has more than 16 million users, and most of the users are looking for niches like yours. By getting your website on this service you have a chance to get your site more visitors than you can imagine. It is free to sign up and you can read more about it here: http://s.ihaus.co.uk/x3 – Now, let me ask you… Do you need your website to be successful to maintain your business? Do you need targeted visitors who are interested in the services and products you offer? Are looking for exposure, to increase sales, and to quickly develop awareness for your site? If your answer is YES, you can achieve these things only if you get your website on the network I am describing. This traffic network advertises you to thousands, while also giving you a chance to test the service before paying anything at all. All the popular blogs are using this service to boost their traffic and ad revenue! Why aren’t you? And what is better than traffic? It’s recurring traffic! That’s how running a successful site works… Here’s to your success! Find out more here: http://s.ihaus.co.uk/x3

  2. 王语双个人网站
    王语双个人网站 【书童】 @回复

    读者墙是很有必要的。PS:周末了,过来看看,博主有双休吗,好好休息,别在搞垮别人之前先搞跨了自己。‘(*∩_∩*)′

    • boke112导航
      boke112导航【村长】2014-12-27 19:30  回复

      @王语双个人网站嗯,如果是做个人博客,读者墙确实很有必要。本来是有的,但是现在工作上比较忙,休不休不是看自己是看领导安排的。

  3. 快乐w
    快乐w 【书童】 @回复

    学习了O(∩_∩)O

    • boke112导航
      boke112导航【村长】2014-10-12 18:08  回复

      @快乐w呵呵,对大家有所帮助就好

  4. 中国历史
    中国历史 【丞相】 @回复

    我收到博主的邮件了,我已经设置了读者墙

    • boke112导航
      boke112导航【村长】2014-10-12 18:08  回复

      @中国历史好的,明天就发布文章说明情况,到下周五更新名单的时候就开始采用贵站的读者墙前5名读者。