WordPress侧边栏信息统计小工具-知新网

WordPress信息统计小工具是前几天逛别的网站看到挺可以的，然后就到百度搜索一下，果然有很多这样的教程，但是那些小工具都只显示文字，不怎么美化，特别的简洁。作为喜欢花里胡哨和爱捣鼓的我，当然要进行一些修改啦！O(∩_∩)O哈哈~，然后我自己就弄出了看上去比较可以的信息统计小工具（算是图片版吧~~~），代码基本都是借鉴大佬的（没那个能力写代码啊~~~苦逼的三无青年）。本来有9个信息统计（删除一些没用的，就剩下9个），但是我又新加了2个页面数据库查询和生成耗时，顿时就感觉这个信息统计小工具变长了，都是又不知道删除啥好，所以如果你觉得太长的话，自己删除或者注释掉一些没用的信息统计，再或者修改大小…好啦，话不多说，下面分享教程。

食用教程

1、有两种方式：

（方式一）在主题目录下创建widget-websitestat.php文件，然后把下面的php代码添加进去。
代码：
此处内容已隐藏，请评论后刷新页面查看.
- （方式二）本站已经创建好文件，免去了你自己创建文件，在文章末尾处“资源下载”下载文件，然后上传到主题目录下即可。
2、在主题目录下functions.php文件，添加下面的函数代码即可。

//添加站点统计小工具
include("widget-websitestat.php");

在网站后台—》主题设置—》自定义代码—》自定义CSS样式，添加下面的CSS代码，主题没有自定义CSS样式的，在主题目录下style.css添加即可。

/*统计小模块*/
.widget_Websitestat h3{font-weight:700;}.widgest-boys{overflow:hidden;}.widgest-boys .widgest-bg{margin: 4px; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; border-radius: 8px;}.widgest-boys .widgest-main{align-items: center; place-content: flex-start space-around; display: flex;}.widgest-boys .widgest-meat{display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; color: rgb(255, 255, 255); font-weight: 700 !important; line-height: 1.5 !important;}.widgest-bg:not(article){transition: all 0.3s;}.widgest-bg:not(article):hover{transform: translateX(-10px);}
/*图片路径设置*/
.widgest-bg1{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/1.jpeg);}
.widgest-bg2{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/2.jpeg);}
.widgest-bg3{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/3.jpeg);}
.widgest-bg4{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/4.jpeg);}
.widgest-bg5{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/5.jpeg);}
.widgest-bg6{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/6.jpeg);}
.widgest-bg7{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/7.jpeg);}
.widgest-bg8{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/8.jpeg);}
.widgest-bg9{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/9.jpeg);}
.widgest-bg10{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/10.jpeg);}
.widgest-bg11{background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(https://img.wiiuii.cn/aoa/11.jpeg);}

说明（非常重要）：图片我是通过一张图片剪切成11张图片（有11个信息统计），然后通过CSS添加进去的。你可以自己剪切11张图片，然后按顺序添加进去，css中”widgest-bg1-widgest-bg11″都是按顺序好的，在url(图片链接路径)里面加，不懂的找留言或者联系我。
我用的剪切工具是在百度乱找的，呐！http://www.zuohaotu.com/cut-image.aspx就是这个。
剪切教程：