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”颜色,或者更换为你主题的背景颜色。
图片[1]-WordPress底部统计信息模块小工具-星辰博客

四、表情文件

  • 如果不想用我的表情链接,把下面的代码改为自己表情图片的链接即可【注:HTML代码中修改】。
$("#xcboke-meos").attr(    "src",    "https://img.xcboke.cn/xcboke/xxtj-" + week + ".png"  );
  • 可以改“https://img.xcboke.cn/xcboke/”这个链接地址,表情命名例如:xxtj-0.png为星期天,xxtj-1.png为星期一,依次类推。
图片[2]-WordPress底部统计信息模块小工具-星辰博客

五、效果

图片[3]-WordPress底部统计信息模块小工具-星辰博客
© 版权声明
THE END
喜欢就支持一下吧
点赞84赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容