子比底部统计小工具 代码

欢迎来到优源库博客 本站资源大多来自网络 如有侵犯你的权益请联系管理员核查
图片[1]-子比底部统计小工具 代码-优源库博客

将功能代码集成至主题目录下的 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,图片 资源在下方

部分内容来自于网络 如有侵权请联系站长删除 如有压缩包需要解压密码皆为www.yykbk.com
子比底部统计小工具 代码-优源库博客
子比底部统计小工具 代码
此内容为付费资源,请付费后查看
66.6积分
付费资源
© 版权声明
THE END
点赞9 分享
支持一下作者
×
QQ
VX
ZFB
评论 抢沙发

请登录后发表评论

    暂无评论内容