本站以前发过图标版，具体可参考如下文章，本文是其姐妹篇，就是把右上角的图标改成了文字。

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示（图标版） 如果不喜欢图标版，可以使用纯文字版。 [pix_post ids=813] 支持Zibll子比的最新版本： 本文达到的效果如下： 如果是24小时内发布：显示“新”图标，标题显示1天内发布。 如果是24... 时间:2023/11/9 分类:技术相关

操作方法及涉及文件和图标版一样，前两步骤参考上文，直接从第三步开整。新文章显示文字“NEW”，更新文章显示文字“UPDATE”，当然也可以改成中文。

第三、修改主题目录中的/inc/functions/zib-posts-list.php文件，找到以下代码：

//获取文章列表的标题

function zib_get_posts_list_title($class = 'item-heading')

将整段代码修改为：

//获取文章列表的标题
function zib_get_posts_list_title($class = 'item-heading')
{
    global $post;
    $get_permalink = get_permalink($post);
    $_post_target_blank = _post_target_blank();
    $title = get_the_title($post) . get_the_subtitle(true, 'focus-color');
    date_default_timezone_set('UTC');
    $t1 = get_the_time('Y-m-d H:i:s', $post);
    $t2 = wp_date('Y-m-d H:i:s');
    $t3 = get_the_modified_time('Y-m-d H:i:s', $post);
    $diff1 = (strtotime($t2) - strtotime($t1)) / 3600;
    $diff2 = (strtotime($t2) - strtotime($t3)) / 3600;
    $icon_html = '';
    if ($diff1 < 24) {
        $icon_html = '<span class="new-icon">NEW</span>';
    } else if ($diff2 < 24) {
        $icon_html = '<span class="update-icon">UPDATE</span>';
    }
    $html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '</a></h2>';
    return $html;
}

代码注释：

diff1<24，diff2<24，24代表1天，如果显示2天则修改为48，以此类推。

第四、主题目录下功能函数文件fuctions.php添加以下代码

function is_post_new($post_date, $modified_date) {
    date_default_timezone_set('Asia/Shanghai');
    $current_date = date("Y-m-d H:i:s");
    $diff1 = (strtotime($current_date) - strtotime($post_date)) / 3600;
    $diff2 = (strtotime($current_date) - strtotime($modified_date)) / 3600;
    if ($diff1 < 24 || $diff2 < 24) {
        return true;
    }
    return false;
}

function generate_icon_html($post_date, $modified_date) {
    if (is_post_new($post_date, $modified_date)) {
        return '<span class="new-icon">NEW</span>';
    } else {
        return '<span class="update-icon">UPDATE</span>';
    }
}

第五、添加CSS样式

后台主题设置-全局功能-自定义代码-自定义CSS样式插入

.tab-content {
    position: relative;
}

.tab-content .new-icon,
.tab-content .update-icon {
    position: absolute;
    right: 10px; /* 修改右边距为10px */
    display: inline-block;
    width: auto; /* 自适应宽度 */
    height: auto; /* 自适应高度 */
    line-height: normal; /* 恢复默认行高 */
    text-align: center;
    background-color: #F56C6C; /* 使用指定的背景颜色 */
    color: #fff;
    font-weight: bold;
    padding: 1px 2px; /* 调整内边距 */
    border-radius: 4px;
}

大功告成。