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

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

文字提示代码

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

<?php
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo "<em>New</em>";} //数字为判断输出NEW的小时数,视情况更改
else{echo "";} //时间超过则不输出内容
?>

图片版提示代码

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

<?php
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo "<img src='new.gif' />";} //数字为判断输出NEW的小时数,视情况更改
else{echo "";} //时间超过则不输出内容
?>

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

html代码,放到首页文章列表标题</h2>前面

<?php
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo "<span class='new-post'></span>";} //数字为判断输出NEW的小时数,视情况更改
else{echo "";} //时间超过则不输出内容
?>

css代码写入style.css中

此区域内容需评论后可见