主题美化-侧边栏信息统计数据小工具

代码部署

第一步：创建统计工具文件

在主题目录（/wp-content/themes/onenav/）下创建 zbfox_sidebar_stat.php 文件，复制以下PHP代码添加进去：

';
        $output .= '

‘; $output .= ‘

‘; $output .= ‘建站时间：‘; $output .= ‘‘; $output .= ‘

‘; echo $output; } function update($new_instance, $old_instance) { $instance = $old_instance; $instance[‘title’] = strip_tags(stripslashes($new_instance[‘title’])); $instance[‘establish_time’] = strip_tags(stripslashes($new_instance[‘establish_time’])); return $instance; } function widget($args, $instance) { extract($args); $title = apply_filters(‘widget_title’, empty($instance[‘title’]) ? ‘站点统计’ : $instance[‘title’]); $establish_time = empty($instance[‘establish_time’]) ? ‘2021-01-01’ : $instance[‘establish_time’]; echo $before_widget; echo $before_title . $title . $after_title; echo ‘

‘; $this->efan_get_websitestat($establish_time); echo ‘

‘; echo $after_widget; } function efan_get_websitestat($establish_time) { global $wpdb; $count_posts = wp_count_posts(); $published_posts = $count_posts->publish; $comments_count = $wpdb->get_var(“SELECT COUNT(*) FROM $wpdb->comments”); $time = floor((time() – strtotime($establish_time)) / 86400); $count_tags = wp_count_terms(‘post_tag’); $count_pages = wp_count_posts(‘page’); $link = $wpdb->get_var(“SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = ‘Y'”); $users = $wpdb->get_var(“SELECT COUNT(ID) FROM $wpdb->users”); $last = $wpdb->get_results(“SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = ‘post’ OR post_type = ‘page’) AND (post_status = ‘publish’ OR post_status = ‘private’)”); $last = date(‘Y-m-d’, strtotime($last[0]->MAX_m)); $total_views = $wpdb->get_var(“SELECT SUM(meta_value+0) FROM $wpdb->postmeta WHERE meta_key = ‘views'”); $output = ”; $output .= ‘

文章总数：’.$published_posts.’ 篇

‘; $output .= ‘

评论数目：’.$comments_count.’ 条

‘; $output .= ‘

标签总数：’.$count_tags.’ 个

‘; $output .= ‘

浏览次数：’.$total_views.’ 次

‘; $output .= ‘

友链总数：’.$link.’ 个

‘; $output .= ‘

用户总数：’.$users.’ 个

‘; $output .= ‘

运行天数：’.$time.’ 天

‘; $output .= ‘

建站时间：’.$establish_time.’

‘; $output .= ‘

最后更新：’.$last.’

‘; $output .= ‘

数据查询：’.get_num_queries().’ 次

‘; $output .= ‘

生成耗时：’.timer_stop(0,5).’秒

‘; echo $output; } } function EfanWebsitestat_init() { register_widget(‘EfanWebsitestat’); } add_action(‘widgets_init’, ‘EfanWebsitestat_init’); ?>

第二步：引入工具文件

在主题目录（/wp-content/themes/onenav/）下的 functions.php 文件中，添加以下函数代码：

// 添加站点统计小工具（小七之家适配版）
include("zbfox_sidebar_stat.php");

第三步：添加自定义CSS样式

1. 网站后台 → 主题设置 → 自定义代码 → 自定义CSS样式（优先推荐）；
2. 若主题无自定义CSS入口，可在主题目录（/wp-content/themes/onenav/）下的 style.css 文件末尾添加：

/* 侧栏统计小工具样式（毛玻璃+霓虹hover效果） */
.widget_EfanWebsitestat h3 {
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 123, 250, 0.2);
}
.widgest-boys {
    overflow: hidden;
}
.widgest-boys .widgest-bg {
    margin: 4px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.widgest-boys .widgest-bg:hover {
    transform: translateX(-5px);
    box-shadow: 0 0 15px rgba(0, 123, 250, 0.4); /* 霓虹发光效果 */
}
.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: #fff;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* 文字阴影提升可读性 */
}

/* 11个统计项背景图片设置（按顺序对应） */
.widgest-bg1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/3b35722e361c.webp);
}
.widgest-bg2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/c5c1b76e7b68.webp);
}
.widgest-bg3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/b3f99da7bde4.webp);
}
.widgest-bg4 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/f98c21e13062.webp);
}
.widgest-bg5 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/6d806e551fa9.webp);
}
.widgest-bg6 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/377ea5cc4e2b.webp);
}
.widgest-bg7 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/5d296de50157.webp);
}
.widgest-bg8 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/8514f803a26d.webp);
}
.widgest-bg9 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/496235d4683e.webp);
}
.widgest-bg10 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/1395358de378.webp);
}
.widgest-bg11 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://img.huliku.com/pic/fc9c155b3d12.webp);
}

/* 响应式适配（移动端优化） */
@media (max-width: 768px) {
    .widgest-meat {
        font-size: 14px !important;
    }
    .widgest-bg {
        padding: 12px !important;
    }
}

最后一步：启用小工具

网站后台 → 外观 → 小工具；
找到「Zbfox 侧栏统计」，拖拽添加到侧边栏；
点击小工具标题，可自定义「标题」和「建站时间」，保存即可生效。

图片裁剪说明

需准备1张图片，剪切成11张（对应11个统计项），按顺序替换CSS中的图片URL；
推荐裁剪工具：在线图片裁剪工具（无需PS，简单易用）；
替换方法：将CSS中 url(图片链接路径) 里的链接替换为你的裁剪后图片地址，按顺序对应11个 .widgest-bg1 到 .widgest-bg11 即可。

文章版权归作者所有，未经允许请勿转载。

暂无评论

暂无评论...

主题美化-侧边栏信息统计数据小工具

代码部署

目录

第一步：创建统计工具文件

第二步：引入工具文件

第三步：添加自定义CSS样式

最后一步：启用小工具

图片裁剪说明

主题美化-粉色果冻泡泡loading动画

主题美化-左侧菜单添加背景图片【手机专用】

相关文章

暂无评论

网址设置

网址样式切换

网址卡片按钮

布局设置

左侧边栏菜单

页面最大宽度

搜索框设置

搜索框背景上下位置

自定义搜索框高度