![图片[1]-子比底部统计小工具 代码-优源库博客](https://www.yykbk.com/wp-content/uploads/2026/01/984.webp)
将功能代码集成至主题目录下的 functions.php 文件中,图片资源与 clock.html 静态文件统一存放至子比(zibll)主题的 /zibll/img/zyx 目录内。
功能模块中涉及的 5 个图标,直接采用阿里巴巴矢量图标库的原生图标编码进行调用,无需额外引入图标字体文件。
该功能作为独立模块从 “炙焰小工具” 中拆分而来,在 WordPress 后台的小工具管理界面中,支持对核心数据项进行自定义配置:显示数据 = 自定义虚拟数值 + 实际统计数据,用户可灵活调整虚拟数值以实现数据展示效果的个性化设置。
代码如下
/**
* ZYX 底部统计小工具 - 放入子比主题 func.php
* 图片需要上传到主题目录: /img/zyx/ 下面放置 week-0.png 到 week-6.png
*/
// ========== 辅助函数 ==========
function zyx_func_comments_users($postid = 0, $which = 0) {
$comments = get_comments('status=approve&type=comment&post_id=' . $postid);
if ($comments) {
$i = 0; $j = 0; $commentusers = array();
foreach ($comments as $comment) {
++$i;
if ($i == 1) { $commentusers[] = $comment->comment_author_email; ++$j; }
if (!in_array($comment->comment_author_email, $commentusers)) {
$commentusers[] = $comment->comment_author_email;
++$j;
}
}
return ($which == 0) ? $j : $i;
}
return 0;
}
function zyx_get_all_views() {
global $wpdb;
$count = 0;
$views = $wpdb->get_results("SELECT meta_value FROM $wpdb->postmeta WHERE meta_key='views'");
foreach ($views as $value) {
if ($value->meta_value != ' ') $count += (int)$value->meta_value;
}
return $count;
}
// ========== 样式输出 ==========
function zyx_output_widget_style() {
static $styled = false;
if ($styled) return;
$styled = true;
?>
<style>
.zyx-info-item{display:grid;grid-gap:15px;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:280px;margin-bottom:15px}
.zyx-stat-box{width:100%;height:100%;border-radius:var(--main-radius);text-align:center;background-color:var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column}
.zyx-i-num{font-size:20px;font-weight:600}
.zyx-wz-item{display:grid;grid-gap:20px;grid-template-columns:repeat(2,1fr);grid-column:3/6;grid-row:1/2;overflow:unset!important;box-shadow:none!important;padding:0!important}
.zyx-wz-sty{width:100%;height:100%;border-radius:var(--main-radius);display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--main-bg-color)}
.zyx-date-box{grid-row:1/3;grid-column:1/3}
.zyx-date-inner{position:relative;font-size:18px;font-weight:500;text-align:center;width:100%;height:100%;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center}
.zyx-date-content{text-align:center;margin-top:10px}
.zyx-emo-item{width:282px;height:120px;margin:0 auto}
.zyx-emo-item>img{width:100%;height:100%;background-size:cover;cursor:pointer}
svg.icon.fa-2x{margin-top:15px}
.zyx-clock-box{grid-row:1/3;grid-column:6/6;width:100%;height:100%;border-radius:var(--main-radius);text-align:center;background-color:var(--main-bg-color);box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.zyx-clock-box iframe{border:none;border-radius:var(--main-radius)}
@media screen and (max-width:959px){.zyx-info-item{grid-gap:10px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:500px}.zyx-date-box{grid-row:3/5;grid-column:1/4}.zyx-i-num{font-size:20px}.zyx-date-inner{font-size:16px}.zyx-wz-item{grid-column:1/4}.zyx-clock-box{display:none}}
</style>
<?php
}
// ========== HTML输出 ==========
function zyx_output_widget_html($posts, $comments, $days, $users, $views, $icon_days, $icon_users, $icon_views, $icon_posts, $icon_comments, $img_url) {
$uid = 'zyx-' . uniqid();
?>
<div class="textwidget" id="<?php echo $uid; ?>">
<div class="zyx-info-item">
<div class="zyx-stat-box">
<svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_days; ?>"></use></svg>
<span class="zyx-i-num"><?php echo number_format($days); ?>天</span>
<p>运行时间</p>
</div>
<div class="zyx-stat-box">
<svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_users; ?>"></use></svg>
<span class="zyx-i-num"><?php echo number_format($users); ?>位</span>
<p>注册用户</p>
</div>
<div class="zyx-stat-box">
<svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_views; ?>"></use></svg>
<span class="zyx-i-num"><?php echo number_format($views); ?>次</span>
<p>浏览总数</p>
</div>
<div class="zyx-wz-item">
<div class="zyx-wz-sty">
<svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_posts; ?>"></use></svg>
<span class="zyx-i-num"><?php echo number_format($posts); ?>篇</span>
<p>文章总数</p>
</div>
<div class="zyx-wz-sty">
<svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_comments; ?>"></use></svg>
<span class="zyx-i-num"><?php echo number_format($comments); ?>条</span>
<p>评论条数</p>
</div>
</div>
<div class="zyx-stat-box zyx-date-box">
<div class="zyx-date-inner">
<span class="zyx-i-num">Today is</span>
<div class="zyx-date-text"></div>
<div class="zyx-emo-item"><img class="zyx-emo-img" src="<?php echo $img_url; ?>week-1.png" alt="emo"></div>
<div class="zyx-date-content"><span class="zyx-fatalism"></span></div>
</div>
</div>
<!-- 时钟iframe -->
<div class="zyx-clock-box">
<iframe src="<?php echo get_template_directory_uri(); ?>/img/zyx/clock.html" width="290" height="290" frameborder="no"></iframe>
</div>
</div>
</div>
<script>
jQuery(function($){
var d=new Date(),w=d.getDay(),ws=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
$("#<?php echo $uid; ?> .zyx-date-text").html(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+ws[w]);
$("#<?php echo $uid; ?> .zyx-fatalism").html(w>0&&w<5?"再坚持一下还有"+(5-w)+"天就到周末啦!":w===5?"啊啊啊,明天就是周末啦!":"今天是周末,好好休息一下吧!");
$("#<?php echo $uid; ?> .zyx-emo-img").attr("src","<?php echo $img_url; ?>week-"+w+".png");
$("#<?php echo $uid; ?>").parents(".zib-widget").css({padding:"0",background:"none"});
});
</script>
<?php
}
// ========== 小工具输出函数 ==========
function zyx_widget_stats_output($args, $instance) {
$show_class = Zib_CFSwidget::show_class($instance);
if (!$show_class) return;
$widget_kzsj = $instance['widget_kzsj'] ?? '2025/01/01 00:00:00';
$virtual = $instance['virtual_option'] ?? array();
$icons = $instance['icon_option'] ?? array();
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish + intval($virtual['virtual_posts'] ?? 0);
$post_comments = zyx_func_comments_users() + intval($virtual['virtual_comments'] ?? 0);
$run_days = floor((time() - strtotime($widget_kzsj)) / 86400) + intval($virtual['virtual_days'] ?? 0);
global $wpdb;
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users") + intval($virtual['virtual_users'] ?? 0);
$views = zyx_get_all_views() + intval($virtual['virtual_views'] ?? 0);
$icon_days = esc_attr($icons['icon_days'] ?? 'icon-rili1');
$icon_users = esc_attr($icons['icon_users'] ?? 'icon-yonghu');
$icon_views = esc_attr($icons['icon_views'] ?? 'icon-fangke');
$icon_posts = esc_attr($icons['icon_posts'] ?? 'icon-chaxun');
$icon_comments = esc_attr($icons['icon_comments'] ?? 'icon-xiaoxi1');
$img_url = get_template_directory_uri() . '/img/zyx/';
Zib_CFSwidget::echo_before($instance, 'zib-widget');
zyx_output_widget_style();
zyx_output_widget_html($published_posts, $post_comments, $run_days, $users, $views, $icon_days, $icon_users, $icon_views, $icon_posts, $icon_comments, $img_url);
Zib_CFSwidget::echo_after($instance);
}
// ========== 注册小工具 ==========
function zyx_widget_stats_create() {
if (!class_exists('Zib_CFSwidget')) return;
Zib_CFSwidget::create('zyx_widget_stats_output', array(
'title' => 'ZYX 底部统计小工具',
'zib_title' => true,
'zib_affix' => true,
'zib_show' => true,
'description' => '底部统计小工具,显示网站运行数据和时钟',
'fields' => array(
array(
'id' => 'widget_kzsj',
'title' => '开站时间',
'default' => '2025/01/01 00:00:00',
'type' => 'text',
'desc' => '格式:2025/01/01 00:00:00',
),
array(
'id' => 'virtual_option',
'type' => 'accordion',
'title' => '虚拟数量设置',
'default' => array('virtual_days' => 0, 'virtual_users' => 0, 'virtual_views' => 0, 'virtual_posts' => 0, 'virtual_comments' => 0),
'accordions' => array(array(
'title' => '虚拟数量设置',
'icon' => 'fa fa-fw fa-angle-right',
'fields' => array(
array('id' => 'virtual_days', 'type' => 'number', 'title' => '虚拟运行天数', 'default' => 0),
array('id' => 'virtual_users', 'type' => 'number', 'title' => '虚拟用户数', 'default' => 0),
array('id' => 'virtual_views', 'type' => 'number', 'title' => '虚拟浏览量', 'default' => 0),
array('id' => 'virtual_posts', 'type' => 'number', 'title' => '虚拟文章数', 'default' => 0),
array('id' => 'virtual_comments', 'type' => 'number', 'title' => '虚拟评论数', 'default' => 0),
),
)),
),
array(
'id' => 'icon_option',
'type' => 'accordion',
'title' => '图标设置',
'default' => array('icon_days' => 'icon-rili1', 'icon_users' => 'icon-yonghu', 'icon_views' => 'icon-fangke', 'icon_posts' => 'icon-chaxun', 'icon_comments' => 'icon-xiaoxi1'),
'accordions' => array(array(
'title' => '图标设置',
'icon' => 'fa fa-fw fa-angle-right',
'fields' => array(
array('id' => 'icon_days', 'type' => 'text', 'title' => '运行天数图标', 'default' => 'icon-rili1', 'desc' => '填入子比主题图标名称'),
array('id' => 'icon_users', 'type' => 'text', 'title' => '用户数图标', 'default' => 'icon-yonghu'),
array('id' => 'icon_views', 'type' => 'text', 'title' => '浏览量图标', 'default' => 'icon-fangke'),
array('id' => 'icon_posts', 'type' => 'text', 'title' => '文章数图标', 'default' => 'icon-chaxun'),
array('id' => 'icon_comments', 'type' => 'text', 'title' => '评论数图标', 'default' => 'icon-xiaoxi1'),
),
)),
),
),
));
}
zyx_widget_stats_create();
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>进程时钟</title>
<style>
*{border:0;box-sizing:border-box;margin:0;padding:0}
:root{--hue:223;--bg:hsl(var(--hue),10%,90%);--fg:hsl(var(--hue),10%,10%);font-size:calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320))}
body,button{color:#000;font:1em/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{background-color:var(--main-bg-color);height:97vh;display:grid;place-items:center}
.progress-clock{display:grid;justify-content:center;align-content:center;position:relative;text-align:center;width:16em;height:16em;border-radius:var(--main-radius)}
.progress-clock__time-date,.progress-clock__time-digit,.progress-clock__time-colon,.progress-clock__time-ampm{transition:color .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.progress-clock__time-date,.progress-clock__time-digit{background:transparent}
.progress-clock__time-date,.progress-clock__time-ampm{grid-column:1/6}
.progress-clock__time-date{font-size:.75em;line-height:1.33}
.progress-clock__time-digit,.progress-clock__time-colon{font-size:2em;font-weight:400;grid-row:2}
.progress-clock__time-colon{line-height:1.275}
.progress-clock__time-ampm{cursor:default;grid-row:3}
.progress-clock__rings{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
.progress-clock__ring{opacity:.1}
.progress-clock__ring-fill{transition:opacity 0s .3s linear,stroke-dashoffset .3s ease-in-out}
.progress-clock__ring-fill--360{opacity:0;stroke-dashoffset:0;transition-duration:.3s}
[data-group]:focus{outline:transparent}
[data-units]{transition:opacity .2s linear}
[data-group="d"]:focus,[data-group="d"]:hover{color:hsl(333,90%,55%)}
[data-group="h"]:focus,[data-group="h"]:hover{color:hsl(33,90%,55%)}
[data-group="m"]:focus,[data-group="m"]:hover{color:hsl(213,90%,55%)}
[data-group="s"]:focus,[data-group="s"]:hover{color:hsl(273,90%,55%)}
[data-group]:focus~.progress-clock__rings [data-units],[data-group]:hover~.progress-clock__rings [data-units]{opacity:.2}
[data-group="d"]:focus~.progress-clock__rings [data-units="d"],[data-group="d"]:hover~.progress-clock__rings [data-units="d"],[data-group="h"]:focus~.progress-clock__rings [data-units="h"],[data-group="h"]:hover~.progress-clock__rings [data-units="h"],[data-group="m"]:focus~.progress-clock__rings [data-units="m"],[data-group="m"]:hover~.progress-clock__rings [data-units="m"],[data-group="s"]:focus~.progress-clock__rings [data-units="s"],[data-group="s"]:hover~.progress-clock__rings [data-units="s"]{opacity:1}
@media(prefers-color-scheme:dark){:root{--bg:hsl(var(--hue),10%,10%);--fg:hsl(var(--hue),10%,90%)}.progress-clock__ring{opacity:.2}}
</style>
</head>
<body>
<div id="clock" class="progress-clock">
<button class="progress-clock__time-date" data-group="d" type="button">
<small data-unit="w">Wednesday</small><br>
<span data-unit="mo">September</span>
<span data-unit="d">13</span>
</button>
<button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">10</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m" data-group="m" type="button">48</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">44</button>
<svg class="progress-clock__rings" width="256" height="256" viewbox="0 0 256 256">
<defs>
<linearGradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(343,90%,55%)"/><stop offset="100%" stop-color="hsl(323,90%,55%)"/></linearGradient>
<linearGradient id="pc-yellow" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(43,90%,55%)"/><stop offset="100%" stop-color="hsl(23,90%,55%)"/></linearGradient>
<linearGradient id="pc-blue" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(223,90%,55%)"/><stop offset="100%" stop-color="hsl(203,90%,55%)"/></linearGradient>
<linearGradient id="pc-purple" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(283,90%,55%)"/><stop offset="100%" stop-color="hsl(263,90%,55%)"/></linearGradient>
</defs>
<g data-units="d"><circle class="progress-clock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1" stroke="url(#pc-red)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none" stroke="url(#pc-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
<g data-units="h"><circle class="progress-clock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1" stroke="url(#pc-yellow)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none" stroke="url(#pc-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
<g data-units="m"><circle class="progress-clock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1" stroke="url(#pc-blue)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none" stroke="url(#pc-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
<g data-units="s"><circle class="progress-clock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1" stroke="url(#pc-purple)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none" stroke="url(#pc-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
</svg>
</div>
<script>
class ProgressClock{
constructor(qs){this.el=document.querySelector(qs);this.update()}
getDayOfWeek(d){return["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][d]}
getMonthInfo(mo,yr){const m=[{name:"1 月",days:31},{name:"2 月",days:yr%4===0?29:28},{name:"3 月",days:31},{name:"4 月",days:30},{name:"5 月",days:31},{name:"6 月",days:30},{name:"7 月",days:31},{name:"8 月",days:31},{name:"9 月",days:30},{name:"10 月",days:31},{name:"11 月",days:30},{name:"12 月",days:31}];return m[mo]}
update(){
const t=new Date(),day=t.getDate(),hr=t.getHours(),min=t.getMinutes(),sec=t.getSeconds();
const monthInfo=this.getMonthInfo(t.getMonth(),t.getFullYear());
const m_p=sec/60,h_p=(min+m_p)/60,d_p=(hr+h_p)/24,mo_p=((day-1)+d_p)/monthInfo.days;
const units=[{label:"w",value:this.getDayOfWeek(t.getDay())},{label:"mo",value:monthInfo.name,progress:mo_p},{label:"d",value:day,progress:d_p},{label:"h",value:hr>12?hr-12:hr,progress:h_p},{label:"m",value:min<10?"0"+min:min,progress:m_p},{label:"s",value:sec<10?"0"+sec:sec}];
units.forEach(u=>{
const ring=this.el.querySelector(`[data-ring="${u.label}"]`);
if(ring){const c=+ring.getAttribute("stroke-dasharray").split(" ")[0];ring.setAttribute("stroke-dashoffset",(1-u.progress)*c)}
const unit=this.el.querySelector(`[data-unit="${u.label}"]`);
if(unit)unit.innerText=u.value;
});
setTimeout(()=>this.update(),1000);
}
}
new ProgressClock("#clock");
</script>
</body></html>
Clock.html,图片 资源在下方
© 版权声明
本站解压密码 yykbk.com|www.yykbk.com
16571988@qq.com
|
Copyright © 2025~2026
01
DISCLAIMER
本站资源大多来自网络,如有侵犯权益请联系管理员,我们会第一时间审核删除。站内资源仅供学习测试,未经许可禁止商用,请在24小时内删除。
02
VIP PRIVILEGE
遇到付费内容?升级终身VIP即可全站免费畅享所有资源,可以联系我的QQ或者邮箱进行开通。
优源库博客QQ 群:901280286
THE END












暂无评论内容