css添加new提示标志,为WordPress新文章增加”NEW”最新标志 - 雅兮网

[摘要]

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示，让你的博客更加饱满、人性化，一起跟笔者折腾起来。

看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片，感觉比较人性化，让老访客一眼就能找到网站最新的内容。今天雅兮网手把手教你给最新的文章(比如24小时内)增加最新提示，方法很简单，用计算差来判断是否输出标识。效果下文中找！

我们所需要做的就是将下文提供的代码放在你想让其显示的位置，如首页列表的文章标题后(多为

中间)，或者小工具文章列表等等，不赘述

文字提示代码

简单的一点的就是直接输出一个英文单词 NEW

$t1=$post->post_date;

$t2=date("Y-m-d H:i:s");

$diff=(strtotime($t2)-strtotime($t1))/3600;

if($diff<24){echo "New";} //数字为判断输出NEW的小时数，视情况更改

else{echo "";} //时间超过则不输出内容

?>

图片版提示代码

比较美观一点的，我们可以单独做一个提示图片。

$t1=$post->post_date;

$t2=date("Y-m-d H:i:s");

$diff=(strtotime($t2)-strtotime($t1))/3600;

if($diff<24){echo "";} //数字为判断输出NEW的小时数，视情况更改

else{echo "";} //时间超过则不输出内容

?>

雅兮网自用版本

相对图片版直接输出图片，笔者选择了在CSS中设置提示图片，这样能很好的控制提示图片的显示位置，搭配相应的图片，达到更好的视觉效果。如上图显示，在标题的右上角，一个合适的角标，毫无违和感。

html代码，放到首页文章列表标题前面

$t1=$post->post_date;

$t2=date("Y-m-d H:i:s");

$diff=(strtotime($t2)-strtotime($t1))/3600;

if($diff<24){echo "";} //数字为判断输出NEW的小时数，视情况更改

else{echo "";} //时间超过则不输出内容

?>

css代码写入style.css中

.new-post {

background: url(img/new.png) no-repeat;

position: absolute;

width: 44px;

height: 45px;

right: -3px;

top: -3px;

z-index: 10;

}

笔者做的角标

，放入主题目录img文件中。

此方法稍微麻烦一丢丢，如果没有基础的朋友可能会出现小问题，欢迎留言讨论...

心里也非常的清楚，网站增加太多的特效、图片会给主机带来压力，但是做站的乐趣就在与折腾，或许过两天兴头过了就删了，但在这个过程中，动手就能有收获...

本文最后更新于2017年8月3日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！