前言

子比主题并没有其他主题比如corenext的新文章角标作提示，所以只能自己通过代码来实现。

而网上的封面角标代码是通过the_title 过滤器在所有文章标题中添加的，这也就导致我前几天搞的文章归档美化版页面会错乱

效果图

教程

1.首先将如下代码放到func.php或者function.php文件中

//新文章角标
function add_zbfox_new_post_label($title, $id) {
    // 只在首页且不是管理后台、不是单篇文章页面时显示
    if (!is_admin() && is_home()) {
        $post_time = get_post_time('Y-m-d', false, $id, true); // 获取文章的发布时间戳，并考虑时区
        $current_time = current_time('Y-m-d'); // 获取当前时间戳，并考虑时区
        if ($post_time === $current_time) {
            $title .= ' <div class="zbfox_new_post_label">NEW</div>';
        }
    }
    return $title;
}
add_filter('the_title', 'add_zbfox_new_post_label', 10, 2);

2.将如下代码放到主题后台中的自定义css代码中

/* 新文章发布图标样式 */
.home .posts-item {
    position: relative;
    overflow: visible; 
}

.home .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);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    border-radius: 5px 0 0 5px;
}

.home .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;
}
.home .posts-item:hover .zbfox_new_post_label {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.home .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;
}