[亲测]子比主题最新发布的文章列表角标美化（包含视频教程）

效果（两个步骤）

支持卡片模式和列表图文模式

以下代码放置于funtions.php

文件位置：域名/wp-content/themes/zibll/functions.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;
}

在ZiBll主题设置—全局&功能—自定义代码，添加以上CSS代码

视频教程地址

哔哩哔哩：https://www.bilibili.com/video/BV1zJ4m1u7ZQ?t=2.4

微博：http://t.cn/A6Qf4xKU

视频号：https://weixin.qq.com/sph/AdRFI3dqi