来自MAC大佬的又一款非常美观又实用的新发布文章列表角标,每个新发布的文章都会自动添加,用来提醒用户这篇文章是今日新发布的,有利于用户交互。
![图片[1]- 子比主题美化新发布文章列表角标(NEW)](https://www.dh139.cn/wp-content/uploads/2025/11/1-11.jpg)
教程开始(蓝色角标)
在主题目录 function 文件添加如下代码。
文件路径:wp-content/themes/zibll/function.php(或func.php)
/* 新文章发布角标 */
function add_zbfox_new_post_label($title, $id) {
if (!is_admin() && !is_single()) {
$post_time = get_the_time('U', $id);
if (time() - $post_time <= 24 * 60 * 60) {
$title .= ' <div class="zbfox_new_post_label">NEW</div>';
}
}
return $title;
}
add_filter('the_title', 'add_zbfox_new_post_label', 10, 2);
子比主题后台设置->自定义代码->自定义CSS样式
/* 新文章发布图标样式 */
.posts-item{
position: relative;
overflow: visible;
}
.zbfox_new_post_label{
position: absolute;
top: 15px;
right: 0;
padding: 5px 10px;
background: #4f15ff;
box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
/*url: huliku.com*/
color: #fff;
font-size: 13px;
font-weight: 900;
border-radius: 5px 0 0 5px;
}
.posts-item:hover .zbfox_new_post_label {
opacity: 0;
transition: opacity 0.5s ease;
}
.zbfox_new_post_label:before {
position: absolute;
content: " ";
display: block;
width: 7px;
height: 110%;
padding: 0 0 7px;
top: 0;
right: -7px;
background: inherit;
border-radius: 0 5px 5px 0;
}
.zbfox_new_post_label:after {
position: absolute;
content: " ";
display: block;
width: 5px;
height: 5px;
background: rgba(0, 0, 0, 0.35);
bottom: -3px;
right: -5px;
border-radius: 0 5px 5px 0;
}
![图片[2]- 子比主题美化新发布文章列表角标(NEW)](https://www.dh139.cn/wp-content/uploads/2025/11/1-15.jpg)
教程开始(红色角标)
在主题目录 function 文件添加如下代码。
文件路径:wp-content/themes/zibll/function.php(或func.php)
//新文章发布角标
function add_new_label_to_post_title($title, $id) {
if (!is_admin() && !is_single()) {
$post_time = get_the_time('U', $id);
if (time() - $post_time <= 24 * 60 * 60) {
$title .= ' <div class="tianyishangke-new-icon">NEW</div>';
}
}
return $title;
}
add_filter('the_title', 'add_new_label_to_post_title', 10, 2);
子比主题后台设置->自定义代码->自定义CSS样式
/*新文章发布图标样式*/
.posts-item{
position: relative;
overflow: visible;
}
.tianyishangke-new-icon{
position: absolute;
top: 15px;
right: 0;
padding: 5px 10px;
background: #ff2626;
box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 13px;
font-weight: 900;
border-radius: 5px 0 0 5px;
}
.tianyishangke-new-icon:before {
position: absolute;
content: " ";
display: block;
width: 7px;
height: 110%;
padding: 0 0 7px;
top: 0;
right: -7px;
background: inherit;
border-radius: 0 5px 5px 0;
}
.tianyishangke-new-icon:after {
position: absolute;
content: " ";
display: block;
width: 5px;
height: 5px;
background: rgba(0, 0, 0, 0.35);
bottom: -3px;
right: -5px;
border-radius: 0 5px 5px 0;
}
© 版权声明
点点赞赏,手留余香~
还没有人给TA充电
给TA充电
声明
花猪使用须知
- 1本网站内容仅供个人学习、研究和欣赏,未经授权禁止用于任何商业用途。
- 2网站中的代码示例仅用于教育目的,使用时请遵循相关开源协议和授权规定。
- 3转载或引用本站内容请注明出处,尊重原创,共同维护良好的创作环境。
- 4网站评论区欢迎理性讨论,请勿发表违反法律法规的言论,共建和谐社区。
- 5如有内容侵犯您的权益,请通过博客联系方式告知,将立即核实并处理。
- 6使用本站资源时产生的任何问题与后果需自行承担,请谨慎操作。
THE END
喜欢就支持一下吧
相关推荐













暂无评论内容