子比主题美化：给文章列表添加 NEW 新发布角标

很多用子比主题搭建 WordPress 博客的站长，都希望给新发布的文章加上醒目的「NEW」角标，让访客一眼就能识别站点今日更新的内容，既能强化站点的内容新鲜感，也能有效提升新文章的点击率与用户交互体验。

本文就给大家带来完整可直接复制落地的子比主题专属新文章角标部署教程，零基础也能一键上手，完美适配子比主题原生文章列表布局，无错位、不破坏主题原有结构，部署即用。

效果预览

代码部署

2.1 第一步：添加 PHP 功能函数

1. 登录 宝塔面板 → 找到你的网站 → 进入根目录
2. 依次打开文件夹：wp-content → themes → zibll
3. 找到 func.php 文件：
   • 若存在 → 直接编辑
   • 若不存在 → 新建文件，命名为 func.php

⚠ 重要提醒：文件必须以 <?php 开头，否则会导致网站报错！

直接复制以下全部代码，粘贴到 func.php 文件最底部即可：

2.2 第二步：添加 CSS 样式代码

登录 WordPress 后台 → 子比主题设置 → 自定义 → 自定义 CSS 代码，将下方完整样式代码粘贴进去，保存设置即可。

完成以上两步操作后，清理站点缓存与浏览器缓存，刷新前台页面，24 小时内发布的文章，就会自动在卡片右上角显示「NEW」专属角标了。

个性化自定义

大家可以根据自己站点的风格，按需修改参数，这里整理了最常用的修改方案：

4.1 修改角标生效时长

只需修改 PHP 代码里的24 * 60 * 60数值即可，示例如下：

• 48 小时生效：48 * 60 * 60
• 7 天生效：7 * 24 * 60 * 60
• 30 天生效：30 * 24 * 60 * 60

4.2 修改角标背景颜色

修改 CSS 代码中.zbfox_new_post_label的background属性值即可：

• 自定义纯色：比如红色background: #ff3333;、绿色background: #07c160;⚠️ 同步修改:before伪元素的background属性，确保折角颜色与主背景一致。

4.3 修改角标位置与文字

• 调整上下位置：修改.zbfox_new_post_label的top: 15px数值，数值越大越靠下，越小越靠上
• 改为左上角显示：将right: 0改为left: 0，同时将border-radius改为0 5px 5px 0
• 修改角标文字：将 PHP 代码里的NEW改为自定义文字，比如「最新」「上新」「今日更新」等

4.4 修改悬浮动画效果

修改.posts-item:hover .zbfox_new_post_label中的属性即可，示例如下：

• 加快动画速度：transition: opacity 0.2s ease;
• 悬浮上移消失：将代码改为transform: translateY(-10px); opacity: 0;，同时给.zbfox_new_post_label添加transition: all 0.3s ease;属性

结语

这款子比主题新文章 NEW 角标功能，代码轻量化、适配性强，零基础站长也能快速部署上线。不仅能给访客带来更清晰的内容更新指引，也能通过细节优化拉满站点的质感与专业度。

如果部署过程中遇到任何问题，都可以在评论区留言交流。