纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示,让你的博客更加饱满、人性化,一起跟笔者折腾起来。
看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,让老访客一眼就能找到网站最新的内容。今天雅兮网手把手教你给最新的文章(比如24小时内)增加最新提示,方法很简单,用计算差来判断是否输出标识。效果下文中找!
我们所需要做的就是将下文提供的代码放在你想让其显示的位置,如首页列表的文章标题后(多为<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 "<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中
.new-post { background: url(img/new.png) no-repeat; position: absolute; width: 44px; height: 45px; right: -3px; top: -3px; z-index: 10; }
笔者做的角标 ,放入主题目录img文件中。
此方法稍微麻烦一丢丢,如果没有基础的朋友可能会出现小问题,欢迎留言讨论...
心里也非常的清楚,网站增加太多的特效、图片会给主机带来压力,但是做站的乐趣就在与折腾,或许过两天兴头过了就删了,但在这个过程中,动手就能有收获...
添加后不显示的
假如24小时内有三篇文章,那么只有仅有顶端的一篇文章,有新文章的图片标记,怎么破,(用你网站的自用模板)
@lude: 不会啊,只要是24小时内发布的文章,都会显示新文章标记的呀!
@飞鸟: 新文章标记是有多个,但都重叠在了同一个位置,我代码放的位置不对?我的主题跟你这边的方法不匹配?不知道还要改哪里了..
@lude: 估计是样式问题,要给文章列表循环盒模型加position:relative;定位样式
@飞鸟: 對了,可以正常顯示標記了,感謝dalao指點。
移动导航栏怎么做的?移动导航栏怎么做的?
@dadsad: 移动导航栏只是将输出的栏目ul>li 加个display: inline-block;让其水平陈列;然后给ul添加overflow:auto;让其可以左右滑动。是非常简单的展示方式