WordPress博客如何随机颜色显示最近访客(留言者排行)

2019年8月25日17:55:40 25 963

好久没写关于建站类文章了,今天收到品果数博主的留言,问我博客首页边栏的最近访客模块随机颜色如何实现的,刚好有时间,便写了个教程。

一、将最近访客代码添加在博客主题的function.php文件中

  1. //最近访客
  2. function Autofirst($af){
  3.     global $wpdb;
  4.     $queryaf="select comment_author, comment_author_url, comment_date from $wpdb->comments where comment_ID in (select max(comment_ID) from $wpdb->comments where comment_approved='1' and comment_author_url !='' and user_id='0'  GROUP BY comment_author_email)  ORDER BY comment_date DESC LIMIT $af";
  5.     $wally = $wpdb->get_results($queryaf);
  6.     foreach ($wally as $commentaf){
  7.         $tmpy= "<a target=\"_blank\" href=\"".$commentaf->comment_author_url."\"><span>✪</span>".$commentaf->comment_author."<span>,</span></a>";
  8.         $outputy .= $tmpy;
  9.     }
  10.     $outputy = "".$outputy."";
  11.     echo $outputy ;
  12. }

二、将以下css代码添加在style.css中

  1. /*****最近访客*****/
  2. .demo{margin:0 auto;}
  3. .taglist{padding:10px;}
  4. .taglist a{padding:0 3px 0 0 !important;font-size:15px; display:inline-block;white-space:nowrap;}
  5. .taglist span {padding:3px;font-size:15px!important;color:#004687}
  6. a.size1{padding:1px;font-size:15px;color:#ea4563;}
  7. a.size1:hover{color:#E13728;}
  8. a.size2{padding:1px;font-size:15px;color:#004687;}
  9. a.size2:hover{color:#E13728;}
  10. a.size3{padding:1px;font-size:15px;color:#9F35FF;}
  11. a.size3:hover{color:#E13728;}
  12. a.size4{padding:1px;font-size:15px;color:#f99f13;}
  13. a.size5:hover{color:#B46A47;}
  14. a.size5{padding:1px;font-size:15px;color:#d378ec;}
  15. a.size5:hover{color:#E13728;}
  16. a.size6{padding:1px;font-size:15px;color:#89b6fe;}
  17. a.size6:hover{color:#E13728;}

三、新建文件caise-fangke.php,添加以下代码

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     /*随机颜色*/
  4.     var tags_a = $("#tags").find("a");
  5.     tags_a.each(function(){
  6.         var x = 9;
  7.         var y = 0;
  8.         var rand = parseInt(Math.random() * (x - y + 1) + y);
  9.         $(this).addClass("size"+rand);
  10.     });
  11. });
  12. </script>
  13. <div class="demo">
  14.     <div class="taglist" id="tags">
  15.         <?php Autofirst(25);?>
  16.     </div>
  17. </div>

四、代码调用

后台控制中心进入小工具中心,新建增强文本小工具(以Begin主题为例),将以下代码添加在博客边栏小工具中,记住修改路径。

  1. <?php get_template_part( 'common/caise-fangke' ); ?>

五、最终效果

weinxin
APP下载
微信扫描左侧二维码,下载Jane博客APP,关注我...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:25   其中:访客  17   博主  8

    • avatar 诗梦 回复TA

      更新时网页访问很慢,这种链接算友链吗,还有样式我改了一下,

      • avatar 心灵博客 回复TA

        这个功能不错

        • avatar 叶忠文博客 回复TA

          这个功能不错!

          • avatar 爱笑啦 回复TA

            这个功能不错,可以吸引用户多多访问,学习了

            • avatar 网站建设教程 回复TA

              学习了

              • avatar 去看你博客 回复TA

                李老师还是才华横溢啊。 :mrgreen: :mrgreen:

                • avatar 常阳岁月 回复TA

                  样式不错,很好看

                  • avatar www.huoyiba.com.cn 回复TA

                    彩色效果确实不错 值得拥有

                    • avatar lbj 回复TA

                      电商专用快递网站www.dh5u.com单号无忧

                      • avatar 森纯博客 回复TA

                        教程不错,有tp的吗 :evil:

                        • avatar 李毅 回复TA

                          博主,感谢分享

                          • avatar 张波博客 回复TA

                            感觉是不是有点花呀,

                            • avatar 免费收录网站(提升流量) 回复TA

                              已收录贵站到目录中

                              • avatar boke112导航 回复TA

                                这个其实可以参考多彩标签来实现,或者做成那个彩色滚动球样式估计更好看。

                                • avatar 小王先森 回复TA

                                  还是很有用的。

                                  • avatar 品果数 回复TA

                                    成功啦,感谢博主的无私帮助,功能实现了。

                                    • avatar wordpress建站吧 回复TA

                                      排列有点混乱。。