WordPress子比主题统计小工具分享-驾驶舱仪表盘-主题铺

AI 智能摘要

做资源站或者社区的朋友，肯定对WordPress子比主题不陌生，这主题好用是好用，但底部的默认样式看久了确实有点审美疲劳。很多站长都想把底部搞得像个驾驶舱仪表盘一样，既能显示网站运行时间，又能实时展示用户量和浏览数据，看着就显得站点很有底蕴。今天主题铺分享的这个代码，就是专门用来给你的页脚“装修”的。

其实吧，这个小工具是从圈子里很有名的炙焰小工具分离出来的纯净版。它最大的亮点不仅仅是UI设计上的科技感，带有一个动态的SVG时钟和根据星期几自动切换的表情包图片，更在于它懂站长的小心思。新站刚起步数据不好看怎么办？这代码里藏了个“虚拟数据”的功能。说白了，你可以在后台自己设置一个基数，前台显示的数据就是“实际数据+虚拟数据”，这就很灵性了，毕竟用户体验有时候也需要一点点数据的烘托来增加信任感。

部署起来也不麻烦，主要分两步走。第一步是搞定素材，你需要把下载好的图片素材（那些星期表情包）和clock.html文件，上传到你的网站服务器目录/zibll/img/zyx下面。如果没有这个文件夹，自己新建一个就行。这一步很关键，路径错了前台就是一片空白。

第二步就是核心代码了。把下面这段PHP代码直接丢进你的functions.php文件里。主题铺提醒，操作前一定记得备份一下文件，虽然代码没啥风险，但养成好习惯总没错。这段代码会自动在你的WordPress小工具里增加一个“ZYX底部统计”的选项，拖拽到底部全宽度或者你需要的位置，填一下你的开站时间，配置一下图标ID就完工了。

图标方面它用的是阿里矢量图标库，你直接填类似icon-yonghu这样的代码就行。至于那个炫酷的动态时钟，它是一个独立的HTML文件嵌入的，不占什么资源，加载速度也挺快。

下面是具体的PHP功能代码，直接复制拿去用：

/**
 * 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();

另外，别忘了下载那个Clock.html文件，这东西你得单独创建一个文本文件，把代码粘进去，改名为clock.html，然后扔到/zibll/img/zyx目录里。代码如下，直接复制保存即可：

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

最后素材包也给你准备好了，包含了周一到周六的PSD源文件和已经切好的PNG图片，直接去夸克网盘下载就行。

资源下载地址
夸克网盘：https://pan.quark.cn/s/08dd4cd33b04

① 本站文章均为原创，除非另有说明，否则本站内容依据CC BY-NC-SA 4.0许可证进行授权，转载请附上出处链接，谢谢。
② 本站提供的资源(插件或主题)均为网上搜集，如有涉及或侵害到您的版权请立即通知我们。
③ 本站所有下载文件，仅用作学习研究使用，请下载后24小时内删除，支持正版，勿用作商业用途。
④ 因代码可变性，不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
⑤ 本站保证所提供资源(插件或主题)的完整性，但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识！另本站提供汉化使用安装教程，仅供参考。由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑦ 有时可能会遇到部分字段无法汉化，同时请保留作者汉化宣传信息，谢谢！
⑧ 本站资源售价只是赞助和汉化辛苦费，收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源，欢迎捐助本站开通会员享受优惠折扣，谢谢支持！
⑩ 如果网盘地址失效，请在相应资源页面下留言，我们会尽快修复下载地址。

THE END