WordPress文章列表右上角添加文章置顶+新文章发布+更新文章ICON图标

新文章发布图标

文章置顶图标

PHP代码

在子比主题目录下“func.php”(子比主题推荐放这里）或者“functions.php”，在合适位置放下面PHP代码。

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

在子比主题目录下“/inc/functions/zib-posts-list.php”(子比主题下面）找到这个 //获取文章列表的标题 下面替换成下面代码。

网站根目录wp-config.php第一行加上date_default_timezone_set(‘PRC’);把原来post-list文件代码里这一行屏蔽掉，完成。

注意时间格式：否则也会出现错误

效果一：

function zib_get_posts_list_title($class = 'item-heading')
{
    $get_permalink      = get_permalink();
    $_post_target_blank = _post_target_blank();
    $title              = get_the_title() . 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');
    $diff1=(strtotime($t2)-strtotime($t1))/3600;
    $diff2=(strtotime($t2)-strtotime($t3))/3600;
    $icon_html = '';
    if ($diff1<24) {
        $icon_html = '<span class="new-icon"></span>';
    }else if ($diff2<24) {
        $icon_html = '<span class="update-icon"></span>';
    } 
    $html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '</a></h2>';
    return $html;
}

效果二：

function zib_get_posts_list_title($class = 'item-heading')
{
    $get_permalink      = get_permalink();
    $_post_target_blank = _post_target_blank();
    $title              = get_the_title() . get_the_subtitle(true, 'focus-color');
    date_default_timezone_set('PRC');
    $t1=get_the_time('Y-m-d H:i:s', $post);
    $t2=date('Y-m-d H:i:s');
    $t3=get_the_modified_time('Y-m-d H:i:s');
    $diff1=(strtotime($t2)-strtotime($t1))/3600;
    $diff2=(strtotime($t2)-strtotime($t3))/3600;
    $icon_html = '';
    if ($diff1<24) {
        $icon_html = '<span class="new-icon"></span>';
        $html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '<font color="red">【发布于'. $t1 . '】</font></a></h2>';
    }else if ($diff2<24) {
        $icon_html = '<span class="update-icon"></span>';
        $html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '<font color="red">【更新于'. $t3 . '】</font></a></h2>';
    } 
    return $html;
}

替换完成以后加CSS代码

.tab-content{
positiON: relative;
}
/** NEW 图标文字版样式 **/
.tab-content .new-icon{
position: absolute;
right: 1px;
display: block;
width: 40px;
height: 40px;
line-height: 20px;
background-image: url(https://www.umsbox.com/wp-content/uploads/2023/04/0dc654853e163824.png
);
transform-origin: 0% 0%;
}
/** UPDATE 图标文字版样式 **/
.tab-content .update-icon{
position: absolute;
right: 1px;
display: block;
width: 40px;
height: 40px;
line-height: 20px;
background-image: url(https://www.umsbox.com/wp-content/uploads/2023/04/11f697821a163824.png
);
transform-origin: 0% 0%;
}

OK完成！感谢逝水流年大佬！大家看下效果吧！

上面《img》标签icon图标链接自己修改

图标素材

最关键的PHP代码及放置位置:

在子比主题目录下“/zibll/inc/functions/zib-posts-list.php”文件中，放在获取文章列表标题内 大概440行的文章放入下面PHP代码（看图）

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

CSS代码

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

不懂可以留言~