为WordPress新建/更新文章增加标记

看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,让老访客一眼就能找到网站最新的内容。今天鬼手六一步一步教你给最新的文章(比如48小时内)增加最新提示,方法很简单,用计算差来判断是否输出标识。
《为WordPress新建/更新文章增加标记》
我们所需要做的就是将下文提供的代码放在你想让其显示的位置,如首页列表的文章标题后(多为<h2></h2>中间),或者小工具文章列表等等,不赘述

文字提示代码

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

 <!?php
 $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 "";} //时间超过则不输出内容
 ?>

图片版提示代码

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

<!?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的小时数
 else{echo "";} //时间超过则不输出内容
 ?>

鬼手六自用版本

《为WordPress新建/更新文章增加标记》
《为WordPress新建/更新文章增加标记》
相对图片版直接输出图片,笔者选择了在CSS中设置提示图片,这样能很好的控制提示图片的显示位置,搭配相应的图片,达到更好的视觉效果。如上图显示,在标题的右上角,一个合适的角标,毫无违和感。
放到function.php文件中,判断文章是否修改..

/**文章内容有更新提示*/
function is_modified(){ global $post; $punish_time = get_the_date('U'); $modified_time = get_the_modified_date('U'); $time = time(); if(($modified_time - $punish_time > 3600*24*7) && ($time - $modified_time < 3600*24*2)) return true; }

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

 <?php
 $t1=$post->post_date;
 $t2=date("Y-m-d H:i:s");
 $diff=(strtotime($t2)-strtotime($t1))/3600;
 if($diff<48){echo "<span class='new-post'></span>";} //最新文章,数字为判断输出NEW的小时数
 elseif(is_modified()){echo "<span class='update-post'></span>";}//旧文章有更新提示
 else{echo "";} //时间超过则不输出内容
 ?>

css代码写入style.css中

/* 最新文章提示,旧文章有更新提示*/
.new-post { background: url(images/new.png) no-repeat; position: absolute; width: 44px; height: 45px; right: -3px; top: -3px; z-index: 10 } .update-post { background: url(images/update.png) no-repeat; position: absolute; width: 45px; height: 45px; right: -3px; top: -3px; z-index: 10 }

以下角标放入主题目录img文件中。

  • 《为WordPress新建/更新文章增加标记》
  • 《为WordPress新建/更新文章增加标记》

另外我的主题需要给文章列表循环盒模型加position:relative;定位样式
在样式表的.kratos-hentry 位置,否则只能显示一个角标,其他的重叠在一起了..
此方法稍微麻烦一丢丢,代码都是搬运拼凑的,还可以做一些简化,如果没有基础的朋友可能会出现小问题,欢迎留言讨论…

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注