WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标

前言

wordpress子比主题文章发布后会在文章表右上角显示ICON图标，大多数网站都有这个美化，但是有很多不太一样的地方，今天分享给大家，右上角的角标大家可以根据自己的喜好进行更换。

教程

1、在子比主题目录下“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;
}

图标素材

2、在子比主题目录下“/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;}

效果预览图

阿松普通

打赏 收藏 链接