TSYBLOG.COM

为WordPress新文章增加”NEW”最新标志

[摘要] 纯代码给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 "";} //时间超过则不输出内容
?>
%title插图%num

相对图片版直接输出图片,笔者选择了在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中

此区域内容需评论后可见


喜欢本文?
文章阅读
常见问题
免费下载或者VIP会员专享资源能否直接商用?
提示下载完成但无法解压?
投稿及掉连解决方法:

本站均测试后上架,保证所提供下载的资源的准确性、安全性和完整性。

如有链接无法下载、失效或广告,下方评论区留言,或联系客服处理,看到处理!

如果您也有好的资源或教程,您可以投稿发布,所得成本报酬归发布方所有!

4条回应

TSY进行回复 取消回复

  1. dqzboy2021-3-19 9:26

    html代码,放到首页文章列表标题前面,这个是在哪个文件呢?

    • TSY2021-4-21 23:01

      放你需要的模块标题上下方都可以,可能需要调一下css marting

      • dqzboy2021-4-22 19:59

        大佬,可以具体说下是哪个文件吗?我用的是之前熊猫那款nirvana主题

        • TSY2021-4-24 19:15

          niRvana/assets/template/ 找到你需要的文件在标题div标签后添加就行,或者用nir二开方法新建个fun.php文件添加需要的地方钩子到标题处div或想添加的任意地方加入