WordPress网站设置侧栏“最近访客”小工具美化版

test 1 2

WordPress网站设置侧栏“最近访客”小工具美化版,有助于增强网站活跃度以及整体美观,适用于WordPress网站知春鸟主题以及B2主题

[h2]效果演示[/h2]

WordPress网站设置侧栏“最近访客”小工具美化版

[h2]最近访客美化教程[/h2]

(转载自https://www.lurending.com/234.html,感谢这些热爱分享的站长)

[h3]1.访客代码function.php文件[/h3]

//最近访客-www.xcbtmw.com
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 ;
}

[h3]2.添加小工具样式,主题文件style.css[/h3]

/*****最近访客-www.xcbtmw.com*****/
.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;}

[h3]3.在主题目录B2/common/,新建文件:caise-fangke.php,添加以下代码[/h3]

<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>

[h3]4.代码调用[/h3]

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

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

[h2]总结[/h2]

功能的实现还是蛮简单的,只需要您按照我的操作一起操作即可,目前代码已经在两个主题上面测试成功了,第一个是知更鸟的begin主题,另一个则就是B2主题

 

发表评论 取消回复
表情 图片 链接 代码

  1. 死阔以
    死阔以 Lv 1

    最近访客这个工具是不是 做成那种自动获取头像的 我在别的网站看到的 挺好看的

    • 老白
      老白 站长

      @死阔以可以,我现在用的主题就是这种。不过这个最好是主题自带的功能,如果首页头像自动加载会影响速度,最好加上本地缓存处理

分享