WordPress博客如何隨機顏色顯示最近訪客(留言者排行)

2019年8月25日 25 1.4K人看過

好久沒寫關于建站類文章了,今天收到品果數博主的留言,問我博客首頁邊欄的最近訪客模塊隨機顏色如何實現的,剛好有時間,便寫了個教程。

一、將最近訪客代碼添加在博客主題的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
加入王卡吉他社
微信掃描左側二維碼,加入淘小鋪掌柜團,免費協助您開通掌柜資格...
  • 文本由 發表于 2019年8月25日
  • 除非特殊聲明,本站文章均為原創,轉載請務必保留本文鏈接
WordPress多站點發布文章同步 建站

WordPress多站點發布文章同步

思路:在另一個 WordPress 站點創建一個API,文章發布時用cURL模擬 POST 請求 API 利用wp_insert_post()函數來創建文章。支持同步文章標題、內容、類型、分類、標簽,...
憶夢小站 博客

憶夢小站

關于站點 網站Title:憶夢小站 網站Keywords:憶夢小站,憶夢網,何葉網,憶夢博客,Typecho,個人博客,博客,何葉博客,www.54loli.cn,技術,建站,生活,教程,分享 網站D...
小王先森 博客

小王先森

站點信息 網站title:小王先森 | 生活不易,快樂就好 站點keywords:王定飛,小王先森,小王同志,教書先森,小王,飛哥,信息技術,個人博客,國慶,wp,emlog,老師,計算機 站點des...
匿名

發表評論

匿名網友 填寫信息

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

評論:25   其中:訪客  17   博主  8
    • avatar 詩夢 @回復 0

      更新時網頁訪問很慢,這種鏈接算友鏈嗎,還有樣式我改了一下,

      • avatar 心靈博客 @回復 1

        這個功能不錯

        • avatar 葉忠文博客 @回復 1

          這個功能不錯!

          • avatar 愛笑啦 @回復 2

            這個功能不錯,可以吸引用戶多多訪問,學習了

            • avatar 網站建設教程 @回復 0

              學習了

              • avatar 去看你博客 @回復 3

                李老師還是才華橫溢啊。 :mrgreen: :mrgreen:

                • avatar 常陽歲月 @回復 2

                  樣式不錯,很好看

                  • avatar www.huoyiba.com.cn @回復 0

                    彩色效果確實不錯 值得擁有

                    • avatar lbj @回復 1

                      電商專用快遞網站www.dh5u.com單號無憂

                      • avatar 森純博客 @回復 2

                        教程不錯,有tp的嗎 :evil:

                        • avatar 李毅 @回復 2

                          博主,感謝分享

                          • avatar 張波博客 @回復 4

                            感覺是不是有點花呀,

                            • avatar 免費收錄網站(提升流量) @回復 3

                              已收錄貴站到目錄中

                              • avatar boke112導航 @回復 4

                                這個其實可以參考多彩標簽來實現,或者做成那個彩色滾動球樣式估計更好看。

                                • avatar 小王先森 @回復 1

                                  還是很有用的。

                                  • avatar 品果數 @回復 1

                                    成功啦,感謝博主的無私幫助,功能實現了。

                                    • avatar wordpress建站吧 @回復 4

                                      排列有點混亂。。