![图片[1]- 子比主题美化站点数据统计条代码](https://www.dh139.cn/wp-content/uploads/2025/10/1-5.jpg)
代码教程：
一：添加代码
将下方代码加入/wp-content/themes/zibll/functions.php文件或者func.php文件中
两个文件性质一样，只是 func.php 子比主题更新不会被覆盖掉，也就不需要再次修改，注意加在 <?php 的后面
// 统计条func代码
if (!function_exists('get_posts_count_today')) {
function get_posts_count_today($post_type = 'post') {
$today = date('Y-m-d');
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'date_query' => array(
array(
'after' => $today . ' 00:00:00',
'before' => $today . ' 23:59:59',
'inclusive' => true,
),
),
'fields' => 'ids',
'nopaging' => true,
);
$query = new WP_Query($args);
return $query->post_count;
}
}
add_action('wp_footer', 'output_site_stats_js_vars');
function output_site_stats_js_vars() {
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
$today_posts = function_exists('get_posts_count_today') ? get_posts_count_today() : 0;
$uptime_days = floor((time() - strtotime("2023-11-11 11:11:11")) / 86400);/*建站时间*/
global $wpdb;
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");
$comments = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'");
$post_view = function_exists('nd_get_all_view') ? nd_get_all_view() : get_option('zibi_pageviews_total', 0);
echo '<script type="text/javascript">
var tj_wzzs = "' . esc_js($published_posts) . '";
var tj_jrgx = "' . esc_js($today_posts) . '";
var tj_yxsj = "' . esc_js($uptime_days) . '";
var tj_yhzs = "' . esc_js($users) . '";
var tj_plzs = "' . esc_js($comments) . '";
var tj_zll = "' . esc_js($post_view) . '";
</script>';
}二：添加小工具，自定义HTML
WP后台–>>外观–>>小工具–>>自定义HTML，将下面的代码放里面，你想显示在哪里你就将这个小工具放到哪个位置即可！
<div class="tuc-2ea177b2-475194-0 zibi-stats-bar flex items-center text-sm transition-colors duration-300 tuc-2ea177b2-475194-0" id="stats-bar">
<!-- 今日更新 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-refresh text-red-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 今日更新：</span><span class="tuc-2ea177b2-475194-0 font-bold text-red-600 tuc-2ea177b2-475194-0" id="today-posts-count">篇</span>
</div>
<div class="tuc-2ea177b2-475194-0 mx-2 text-gray-400 tuc-2ea177b2-475194-0">｜</div>
<!-- 文章数目 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-book text-blue-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 文章数目：</span><span class="tuc-2ea177b2-475194-0 font-bold tuc-2ea177b2-475194-0" id="posts-count">篇</span>
</div>
<div class="tuc-2ea177b2-475194-0 mx-2 text-gray-400 tuc-2ea177b2-475194-0">｜</div>
<!-- 帖子数量 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-sticky-note text-teal-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 帖子数量：</span><span class="tuc-2ea177b2-475194-0 font-bold tuc-2ea177b2-475194-0" id="zibi-posts-count">篇</span>
</div>
<div class="tuc-2ea177b2-475194-0 mx-2 text-gray-400 tuc-2ea177b2-475194-0">｜</div>
<!-- 评论数量 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-comments text-green-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 评论数量：</span><span class="tuc-2ea177b2-475194-0 font-bold tuc-2ea177b2-475194-0" id="comments-count">条</span>
</div>
<div class="tuc-2ea177b2-475194-0 mx-2 text-gray-400 tuc-2ea177b2-475194-0">｜</div>
<!-- 注册用户 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-users text-orange-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 注册用户：</span><span class="tuc-2ea177b2-475194-0 font-bold tuc-2ea177b2-475194-0" id="users-count">位</span>
</div>
<div class="tuc-2ea177b2-475194-0 mx-2 text-gray-400 tuc-2ea177b2-475194-0">｜</div>
<!-- 运行时间 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-clock-o text-purple-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 运行时间：</span><span class="tuc-2ea177b2-475194-0 font-bold tuc-2ea177b2-475194-0" id="uptime-count">天</span>
</div>
<div class="tuc-2ea177b2-475194-0 mx-2 text-gray-400 tuc-2ea177b2-475194-0">｜</div>
<!-- 浏览次数 -->
<div class="tuc-2ea177b2-475194-0 stats-item flex items-center tuc-2ea177b2-475194-0">
<i class="tuc-2ea177b2-475194-0 fa fa-eye text-yellow-500 mr-1 tuc-2ea177b2-475194-0"></i>
<span class="tuc-2ea177b2-475194-0 stats-label tuc-2ea177b2-475194-0"> 浏览次数：</span><span class="tuc-2ea177b2-475194-0 font-bold tuc-2ea177b2-475194-0" id="pageviews-count">w+</span>
</div>
</div>
<style>
/* 核心布局 */
/* 核心布局 */
.zibi-stats-bar {
display: flex;
align-items: center;
border-radius: 6px;
padding: 8px 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
width: 100%;
box-sizing: border-box;
}
/* 图标与文字垂直居中对齐 */
.stats-item i {
vertical-align: middle; /* 解决图标偏上问题 */
transform: translateY(3px); /* 微调图标位置 */
}
.zibi-stats-bar {
display: flex;
align-items: center;
border-radius: 6px;
padding: 8px 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
width: 100%;
box-sizing: border-box;
}
/* 白天模式样式 */
:root:not(.dark) .zibi-stats-bar {
background: #fff;
border: 1px solid #ebeef5;
color: #303133;
}
/* 夜间模式样式 */
:root.dark .zibi-stats-bar {
background: #1e1e1e;
border: 1px solid #2c2c2c;
color: #c9c9c9;
}
/* 图标固定彩色样式 - 不随主题变化 */
#today-icon { color: #ff4d4f !important; }
.stats-item:nth-child(3) i { color: #1890ff !important; } /* 文章图标 - 蓝色 */
.stats-item:nth-child(5) i { color: #13c2c2 !important; } /* 帖子图标 - 青色 */
.stats-item:nth-child(7) i { color: #52c41a !important; } /* 评论图标 - 绿色 */
.stats-item:nth-child(9) i { color: #fa8c16 !important; } /* 用户图标 - 橙色 */
.stats-item:nth-child(11) i { color: #722ed1 !important; } /* 时间图标 - 紫色 */
.stats-item:nth-child(13) i { color: #faad14 !important; } /* 浏览图标 - 黄色 */
/* 图标美化效果 */
.stats-item i {
transition: all 0.3s ease;
transform-origin: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.stats-item:hover i {
transform: scale(1.15);
filter: brightness(1.2);
}
/* 今日更新的特殊颜色 */
:root.dark #today-posts-count {
color: #ff7a45;
}
:root:not(.dark) #today-posts-count {
color: #ff4d4f;
}
/* 其他统计数字的暗色模式适配 */
:root.dark #posts-count { color: #91bfff; }
:root.dark #zibi-posts-count { color: #89e8e8; }
:root.dark #comments-count { color: #b7eb8f; }
:root.dark #users-count { color: #ffd591; }
:root.dark #uptime-count { color: #d3adf7; }
:root.dark #pageviews-count { color: #ffe58f; }
/* 白天模式数字颜色 */
:root:not(.dark) #posts-count { color: #1890ff; }
:root:not(.dark) #zibi-posts-count { color: #13c2c2; }
:root:not(.dark) #comments-count { color: #52c41a; }
:root:not(.dark) #users-count { color: #fa8c16; }
:root:not(.dark) #uptime-count { color: #722ed1; }
:root:not(.dark) #pageviews-count { color: #faad14; }
/* 分割线颜色 */
:root:not(.dark) .zibi-stats-bar > .text-gray-400 {
color: #dcdde0;
}
:root.dark .zibi-stats-bar > .text-gray-400 {
color: #4e4e4e;
}
/* 响应式适配：小屏幕自动换行 */
@media (max-width: 768px) {
.zibi-stats-bar {
flex-wrap: wrap;
gap: 8px 12px;
padding: 10px;
justify-content: center;
}
.stats-item {
font-size: 12px;
margin: 2px 0;
}
.zibi-stats-bar > .text-gray-400 {
display: none; /* 移除小屏幕分割线 */
}
}
/* 超小屏幕优化 */
@media (max-width: 375px) {
.stats-item {
font-size: 11px;
flex: 1 0 40%; /* 每行显示2个统计项 */
justify-content: center;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', async () => {
// 初始化夜间模式状态
updateDarkMode();
// 监听主题切换事件
window.addEventListener('theme-mode-changed', updateDarkMode);
// 监听系统暗色模式变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateDarkMode);
// 所有设备都执行统计数据获取
try {
const [todayPostsCount, postCount, zibiPostsCount, commentCount, userCount, uptimeDays, pageviews] = await Promise.all([
getTodayPostsCount(),
getPostCount(),
getZibiPostsCount(),
getCommentCount(),
getUserCount(),
getUptimeDays(),
getPageviews(true)
]);
// 更新DOM
document.getElementById('today-posts-count').textContent = `${todayPostsCount}篇`;
document.getElementById('posts-count').textContent = `${postCount}篇`;
document.getElementById('zibi-posts-count').textContent = `${zibiPostsCount}篇`;
document.getElementById('comments-count').textContent = `${commentCount}条`;
document.getElementById('users-count').textContent = `${userCount}位`;
document.getElementById('uptime-count').textContent = `${uptimeDays}天`;
document.getElementById('pageviews-count').textContent = formatNumber(pageviews);
} catch (error) {
console.error('统计数据获取失败:', error);
document.getElementById('today-posts-count').textContent = '获取失败';
}
});
// 获取今日文章数
async function getTodayPostsCount() {
try {
const res = await fetch('/wp-json/zibi/v1/today_posts');
if (!res.ok) throw new Error('API请求失败');
const data = await res.json();
return data.postCount || 0;
} catch (error) {
console.error('[API] 获取今日文章数失败:', error);
return 0;
}
}
// 获取文章总数
async function getPostCount() {
try {
const res = await fetch('/wp-json/wp/v2/posts?per_page=1&_fields=id');
if (!res.ok) throw new Error('文章总数API请求失败');
return parseInt(res.headers.get('X-WP-Total') || 0);
} catch (error) {
console.error('[API] 获取文章总数失败:', error);
return 0;
}
}
// 获取帖子总数（适配forum_post类型）
async function getZibiPostsCount() {
try {
const res = await fetch('/wp-json/zibi/v1/topic_count');
if (!res.ok) throw new Error('帖子API请求失败');
const data = await res.json();
return data.topicCount || 0;
} catch (error) {
console.error('[API] 获取子比帖子总数失败:', error);
return 0;
}
}
// 获取评论总数
async function getCommentCount() {
try {
const res = await fetch('/wp-json/wp/v2/comments?per_page=1&_fields=id');
if (!res.ok) throw new Error('评论总数API请求失败');
return parseInt(res.headers.get('X-WP-Total') || 0);
} catch (error) {
console.error('[API] 获取评论总数失败:', error);
return 0;
}
}
// 获取用户总数
async function getUserCount() {
try {
const res = await fetch('/wp-json/zibi/v1/stats');
if (!res.ok) throw new Error('用户总数API请求失败');
const data = await res.json();
return data.userCount || 0;
} catch (error) {
console.error('[API] 获取用户总数失败:', error);
return 0;
}
}
// 获取网站运行天数
function getUptimeDays() {
const startDate = new Date('2023-11-11'); // 修改为你的上线日期
const currentDate = new Date();
const timeDiff = currentDate.getTime() - startDate.getTime();
return Math.floor(timeDiff / (1000 * 60 * 60 * 24));
}
// 获取浏览次数并增加计数
async function getPageviews(increment = false) {
try {
const res = await fetch(`/wp-json/zibi/v1/pageviews?increment=${increment}`);
if (!res.ok) throw new Error('浏览次数API请求失败');
const data = await res.json();
return data.pageviews || 0;
} catch (error) {
console.error('[API] 获取浏览次数失败:', error);
return 0;
}
}
// 数字格式化（转换为x.xw+格式）
function formatNumber(num) {
if (num >= 10000) {
return (num / 10000).toFixed(1) + 'w+';
}
return num.toString();
}
// 更新夜间模式样式
function updateDarkMode() {
const isDark = document.documentElement.classList.contains('dark') ||
window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
</script>© 快捷功能
© 版权声明
声明
花猪使用须知
- 1本网站内容仅供个人学习、研究和欣赏，未经授权禁止用于任何商业用途。
- 2网站中的代码示例仅用于教育目的，使用时请遵循相关开源协议和授权规定。
- 3转载或引用本站内容请注明出处，尊重原创，共同维护良好的创作环境。
- 4网站评论区欢迎理性讨论，请勿发表违反法律法规的言论，共建和谐社区。
- 5如有内容侵犯您的权益，请通过博客联系方式告知，将立即核实并处理。
- 6使用本站资源时产生的任何问题与后果需自行承担，请谨慎操作。
THE END
喜欢就支持一下吧
相关推荐
暂无评论内容