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

2016-9-9 18:40 来自本站原创 26,530 20 7
[摘要]

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

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

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

雅兮网自用版本

为WordPress新文章增加

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

笔者做的角标 为WordPress新文章增加,放入主题目录img文件中。

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

心里也非常的清楚,网站增加太多的特效、图片会给主机带来压力,但是做站的乐趣就在与折腾,或许过两天兴头过了就删了,但在这个过程中,动手就能有收获...

本文最后更新于2017年8月3日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:20   其中:访客  15   博主  5
    加载中...
    1. lude 1
      8个月前 (03-10) 12楼

      假如24小时内有三篇文章,那么只有仅有顶端的一篇文章,有新文章的图片标记,怎么破,(用你网站的自用模板)

      • 飞鸟
        8个月前 (03-11)  地下1层

        @lude: 不会啊,只要是24小时内发布的文章,都会显示新文章标记的呀!

        • lude 1
          8个月前 (03-11)  地下2层

          @飞鸟: 新文章标记是有多个,但都重叠在了同一个位置,我代码放的位置不对?我的主题跟你这边的方法不匹配?不知道还要改哪里了..

          • 飞鸟
            8个月前 (03-12)  地下3层

            @lude: 估计是样式问题,要给文章列表循环盒模型加position:relative;定位样式

            • lude 1
              8个月前 (03-12)  地下4层

              @飞鸟: 對了,可以正常顯示標記了,感謝dalao指點。

    2. dadsad 1
      12个月前 (11-27) 11楼

      移动导航栏怎么做的?移动导航栏怎么做的?

      • 飞鸟
        12个月前 (11-28)  地下1层

        @dadsad: 移动导航栏只是将输出的栏目ul>li 加个display: inline-block;让其水平陈列;然后给ul添加overflow:auto;让其可以左右滑动。是非常简单的展示方式

    1 2
    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    20 7 26,530
    Top