如果不喜欢图标版，可以使用纯文字版。

Zibll主题给刚发布和刚更新的文章分别加上”新””更”小图标及文字提示（文字版） 本站以前发过图标版，具体可参考如下文章，本文是其姐妹篇，就是把右上角的图标改成了文字。 [pix_post ids=317] 操作方法及涉及文件和图标版一样，前两步骤参考上文，直接从第三步开整。新文章... 时间:2024/3/12 分类:技术相关

支持Zibll子比的最新版本：

本文达到的效果如下：

如果是24小时内发布：显示“新”图标，标题显示1天内发布。

如果是24小时内更新：显示“更”图标，标题显示1天内更新。

如果不是24小时内发布或者更新：不显示任何图标，标题显示最近更新日期。

教程开始：

第一、解决wordpress时区问题，否则可能会显示不正确，需要有PHP.INI编辑权限，以宝塔PHP8.1为例。

php.ini配置文件，大概在968行，或则搜索date.timezone，看=后面的值是什么，如果是PRC则不改动，如果不是，修改为PRC，修改后重启PHP。

网站根目录下wp-config.php，第一行添加

date_default_timezone_set(‘PRC’);

wordpress后台设置-常规中，时区、日期、时间，按如下设置。

第二、Zibll主题设置—文章&列表—列表卡片模式，将“首页列表 卡片模式“关闭。

PS：主要是卡片模式调试了好久，NEW小图标一直错位，无奈关闭。

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

//获取文章列表的标题

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

将整段代码修改为：

[reply]

//获取文章列表的标题
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');
	$t1=get_the_time('Y-m-d h:i:s',isset($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>';
		// 新发表文章 $html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '<font color="red">【1天内发布】</font></a></h2>';
		return $html;
	} elseif ($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">【1天内更新】</font></a></h2>';
		return $html;
	} else {
		$html = '<h2 class="' . $class . '">' . $icon_html . '<a' . $_post_target_blank . ' href="' . $get_permalink . '">' . $title . '<font color="red">【更新于'. $t3 . '】</font></a></h2>';
		return $html;
	}
}

[/reply]

代码注释：

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

第四、添加CSS样式

后台主题设置-全局功能-自定义代码-自定义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(你的New图标地址);
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(你的Update图标地址);
transform-origin: 0% 0%;
}