WordPress底部统计信息模块小工具

今天从网上找来，自己刚弄的，感觉还可以，就分享一波！主要统计信息有用户数、文章数、浏览数、今日发布数、运行时间这几个功能。

使用教程

一、PHP代码：

• 在子比主题的主题目录下，header.php底部添加以下函数代码：

• 注：函数运行日期2020-10-30改为你自己网站运行的日期。

二、HTML+JS代码

• 在后台–>外观–>小工具–>自定义HTML，把自定义HTML放到合适的版块里（子比主题放在首页-底部全宽度），然后把下面代码复制粘贴进去，即可在前台显示。

• 图标无法显示，是因为我用《阿里巴巴矢量库》，自己把下面的代码更改为其他icon的：

<svg class="icon fa-2x" aria-hidden="true">
                <use xlink:href="#icon-shijian"></use>
        </svg>

• 用http://www.fontawesome.com.cn/faicons/的话，用下面的代码应该就可以了，图标自己更改！！！

<i class="fa fa-free-code-camp" aria-hidden="true"></i>

三、CSS代码

• 下面是CSS代码，原本一起放的，但是CSS Grid布局不兼容WP的自定义工具，所以就只能放在主题后台的【自定义CSS样式】里面咯！

/*优雅底部统计小插件*/
.xcboke-info-item{display:grid;grid-gap:15px;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:280px}
.xcboke-llzs-item,.xcboke-sjcs-item,.xcboke-yhzs-item,.xcboke-yxsj-item{width:100%;height:100%;border-radius:8px;text-align:center;background-color: var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;box-shadow: 0 0 10px var(--main-shadow);}
.xcboke-i-num{font-size:30px;font-weight:700}
.xcboke-yxsj-item{display:flex;align-items:center;justify-content:center;flex-direction:column;}
.xcboke-yhzs-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.xcboke-llzs-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.xcboke-wz-item{display:grid;grid-gap:20px;grid-template-columns:repeat(2,1fr);grid-column:1/4;grid-row:1/2;overflow:unset!important;box-shadow:none!important;padding:0!important}
.xcboke-wz-sty{width:100%;height:100%;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color: var(--main-bg-color);box-shadow: 0 0 10px var(--main-shadow);}
.xcboke-sjcs-item{position:relative;grid-row:1/3;grid-column:4/6}
.xcboke-sjcj-m{position:relative;font-size:20px;font-weight:700;text-align:left;width:100%;height:100%;padding:10px;box-sizing:border-box}
.xcboke-sjcj-content{text-align:center;margin-top:10px;position:absolute;bottom:0;right:0}
.xcboke-meo-item{width:140px;height:140px;margin:0 auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.xcboke-meo-item>img{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer;pointer-events:none}
@media screen and (max-width:959px){.xcboke-info-item{grid-gap:10px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:500px}
.xcboke-sjcs-item{grid-row:1/3;grid-column:1/4}
.xcboke-wz-item{grid-column: 1/4;grid-row: 4/5;}
.xcboke-i-num{font-size:20px}
.xcboke-sjcj-m{font-size:16px}
}
.xcboke-llzs-item:hover,.xcboke-sjcs-item:hover,.xcboke-wz-item>div:hover,.xcboke-yhzs-item:hover,.xcboke-yxsj-item:hover{animation:xcboke-db-item .5s}
@keyframes xcboke-db-item{0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}

• 其他WP主题使用，请注意：“background—Color:var(–main-bg-color);”这是子比主题的夜间背景切换，自己更换为“#fff”颜色，或者更换为你主题的背景颜色。

四、表情文件

• 如果不想用我的表情链接，把下面的代码改为自己表情图片的链接即可【注：HTML代码中修改】。

$("#xcboke-meos").attr(    "src",    "https://img.xcboke.cn/xcboke/xxtj-" + week + ".png"  );

• 可以改“https://img.xcboke.cn/xcboke/”这个链接地址，表情命名例如：xxtj-0.png为星期天，xxtj-1.png为星期一，依次类推。

五、效果