文章列表卡片右上角加置顶与New角标

列表页想一眼分清刚发布的文章和置顶文章，可以在卡片右上角加一枚小角标：发布时间不满 24 小时的显示 New 图标，设置了置顶的显示置顶图标，其余文章什么都不加。改动分三块：一个判断函数、列表模板里加一行调用、一段定位用的 CSS。

判断函数

放进主题目录的 functions.php（有单独的 func.php 自定义函数文件的，放那里也行）。逻辑就是拿当前时间和发布时间做差，不足 24 小时返回 New 图标，否则判断是否置顶：

/**
* 新文章发布New小图标
*/
function zrsn_post_newicon($post){
    //date_default_timezone_set('PRC');
    $zr_date = date("Y-m-d H:i:s");
    $zr_post_date = get_the_time('Y-m-d H:i:s', $post);
    $zr_diff = (strtotime($zr_date)-strtotime($zr_post_date))/3600;
    if($zr_diff<24){
        $zr_new_icon = '<div class="zrsn-new-icon"><img src="" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $zr_new_icon = '<div class="zrsn-new-icon"><img src="" draggable="false" alt="置顶文章" /></div>';
    }else{
        $zr_new_icon = '';
    }
    //开始输出
    return $zr_new_icon;
}

代码里两处图标的图片链接换成自己的。开头注释掉的那行是时区设置，如果发现 New 标记迟迟不消失，把它放开指定成 PRC 再试。

光有函数不会生效，还要在拼列表卡片 HTML 的地方调用。主题的文章列表模板在 inc/functions/ 目录下，找到 440 行前后拼接卡片的位置，追加一行：

$html .= zrsn_post_newicon($post);//新文章+置顶文章icon图标函数

CSS

卡片容器开相对定位，角标绝对定位到右上角，顺手禁掉图标拖拽：

/*新文章发布图标样式*/
.posts-item{position: relative !important;}
.zrsn-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.zrsn-new-icon img{-webkit-user-drag: none;}

效果和踩坑

最常见的问题是卡片样式没生效，角标直接飘到视口角落，先检查 .posts-item 的 position: relative 有没有补上。另外这种改法动了主题文件，主题升级会覆盖，改完把代码段留个备份，升级后重新贴一遍。