网站美化:子比主题新文章专属 NEW 角标设置教程
角标

网站美化:子比主题新文章专属 NEW 角标设置教程

blogger头像
blogger 博主
2026.05.27 · 约 3 分钟 · 0 评论 · 0 喜爱

各位朋友好,今天来分享一个来自 墨星博客 的实用效果,给文章缩略图加上 NEW 新品角标。之前在网络上翻找,始终没找到合适的 SVG 图标,索性自己动手绘制了一个,唯一不足就是配色效果不算理想。 效果图如下 教程开始 将…

各位朋友好,今天来分享一个来自 墨星博客 的实用效果,给文章缩略图加上 NEW 新品角标。之前在网络上翻找,始终没找到合适的 SVG 图标,索性自己动手绘制了一个,唯一不足就是配色效果不算理想。

效果图如下

教程开始

将下面代码添加到主题目录中func.php即可实现。如果没有需要新建一个,并填入<?php头

[hidecontent type="reply"]
function mx_add_new_post_badge() {
    if (is_home() || is_front_page() || is_archive() || is_search()) {
        echo '<style>.item-thumbnail.mx-new-post{position:relative;display:inline-block}.item-thumbnail.mx-new-post::before{content:"";position:absolute;top:-15px;right:0;width:50px;height:50px;background-image:url(https://moxingbk.com/demo/_1.svg);background-size:contain;background-repeat:no-repeat;background-position:center;z-index:1;pointer-events:none}</style>
        <script>document.querySelectorAll(".posts-item").forEach(function(post_element){var time_element=post_element.querySelector(".icon-circle");if(time_element&&time_element.title){var post_time=new Date(time_element.title.replace(/-/g,"/")),time_diff=(new Date-post_time)/1e3;time_diff<=86400&&time_diff>0&&post_element.querySelector(".item-thumbnail")&&post_element.querySelector(".item-thumbnail").classList.add("mx-new-post")}});</script>';
    }
}
add_action('wp_footer', 'mx_add_new_post_badge');
[/hidecontent]
[hidecontent type="reply"]
[/hidecontent]

弹幕表态
我的头像
0/300
文明发言,一起守护温柔的评论区

0 条回复

A文章作者 M管理员
这里需要一条查重率 0% 的评论

还没有评论,来说两句吧~

1会员总数
104文章总数
1044浏览总数
0今日发布
277天稳定运行
  • 波浪
  • 波浪
  • 波浪
  • 波浪

Hello World

页面耗时 0.102 秒 | 数据库查询 64 次 | 内存 0.57 MB | 在线人数:1人

104+

精品文章等您来关注

Copyright © 2025 - 2026 Hello World