为WordPress最新文章增加NEW最新提示标志

王小优
王小优
王小优
231
文章
0
评论
2015年10月4日
评论
4,473 1194字阅读3分58秒

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

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

为WordPress最新文章增加NEW最新提示标志

我们所需要做的就是将下文提供的代码放在你想让其显示的位置,如首页列表的文章标题后(多为<h2></h2>中间),或者小工具文章列表等等,不再赘述。

文字提示代码

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

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

图片版提示代码

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

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

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

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

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

CSS代码写入style.css文件中

  1. .new-post {
  2. backgroundurl(img/new.png) no-repeat;
  3. positionabsolute;
  4. width44px;
  5. height45px;
  6. rightright: -3px;
  7. top: -3px;
  8. z-index: 10;
  9. }

为WordPress最新文章增加NEW最新提示标志

我做的这个NEW图标放入主题目录img文件中。

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

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: