WordPress主题增加随机颜色访客排行版小工具

虫子君
虫子君
虫子君
559
文章
260
评论
2019年12月5日22:54:25 评论 189 2374字阅读7分54秒

如果说到WordPress哪方面内容自定义会比较多,那小工具一定是一个“重灾区”,因为每一个人的审美不同,从而对于功能的需求也是不一样的。就好比你喜欢的是将你的网站的标题放大的很大,而我喜欢的是对称美,虽然咱们两个人的审美不一样,可是功能却都是很好的呀。

有能力的就自己动手操作,没有能力的跟虫子君这样子的伸手党来说,就无所谓的了。

今天跟大家分享一个可以将WordPress主题的最近访客小工具,做成随机颜色访客小工具。

WordPress主题增加随机颜色访客排行版小工具

随机颜色访客排行榜小工具

对于喜欢diy的用户来说,这个可以显现出你的网站独有的品味,当然,如果您跟虫子君这样子的用户一样的话,那估计没戏了。

代码来自互联网,具体是哪位大神写的不知道。

测试环境
网站程序主题时间
WordPress 5.3中文版春哥柒比贰主题2019年12月5号

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

//最近访客
function Autofirst($af){
    global $wpdb;
    $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";
    $wally = $wpdb->get_results($queryaf);
    foreach ($wally as $commentaf){
        $tmpy= "<a target=\"_blank\" href=\"".$commentaf->comment_author_url."\"><span>✪</span>".$commentaf->comment_author."<span>,</span></a>";
        $outputy .= $tmpy;
    }
    $outputy = "".$outputy."";
    echo $outputy ;
}

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

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

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

<script type="text/javascript">
$(document).ready(function(){


    /*随机颜色*/
    var tags_a = $("#tags").find("a");
    tags_a.each(function(){
        var x = 9;
        var y = 0;
        var rand = parseInt(Math.random() * (x - y + 1) + y);
        $(this).addClass("size"+rand);
    });


});
</script>
<div class="demo">
    <div class="taglist" id="tags">
        <?php Autofirst(25);?>
    </div>
</div>

四、代码调用

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

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

总结:

功能的实现还是蛮简单的,只需要您按照我的操作一起操作即可,目前代码已经在两个主题上面测试成功了,第一个是追更鸟的begin主题,另一个则就是春哥的B2主题。如果你在操作的过程中遇到问题,欢迎到文末留言。

展开全文
  • 您有好资源需要让广大网友一起享用吗?可以是您的主题,也可以是插件,欢迎来投稿!
  • 这里是我的博客,亦是您分享插件或主题的地方,虫子君只专注WordPress,以及自己的工作。这里欢迎你来投稿。

您必须才能发表评论!