如何给24小时内更新的文章添加NEW图标

admin wordpress评论654字数 958阅读模式
摘要

DUX主题如何在首页为当前24小时内更新的文章添加NEW图标,方法很简单,只需修改DUX主题的“excerpt.php、main.css”两个文件即可实现。

如何给24小时内更新的文章添加NEW图标

一、修改excerpt.php

打开主题的excerpt.php文件,搜索下面代码。

  1. echo '<h2><a'._post_target_blank().' href="'.get_permalink().'" title="'.get_the_title().get_the_subtitle(false)._get_delimiter().get_bloginfo('name').'">'.get_the_title().get_the_subtitle().'</a></h2>';  

然后在上面代码后面加上下面这段代码,修改excerpt.php文件这一步就完成了。

  1. date_default_timezone_set('PRC');  
  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 'New';}  
  6. else{echo "";}  

如下图:
如何给24小时内更新的文章添加NEW图标

二、修改main.css

在主题文件里找main.css文件,在最后面添加下面代码即可。然后清理下本地缓存或的CDN缓存就能看到和蜗牛一样的效果了。

  1. /** 修正摘要列表定位方式 */  
  2. .excerpt {  
  3.     position: relative;  
  4. }  
  5. /** NEW 图标文字版样式 **/  
  6. .excerpt .new-icon{  
  7.     position: absolute;  
  8.     right: -38px;  
  9.     top: -16px;  
  10.     display: block;  
  11.     width: 72px;  
  12.     height: 20px;  
  13.     line-height: 20px;  
  14.     background: #ff0018;  
  15.     color: #fff;  
  16.     font-size: 14px;  
  17.     font-weight: 400;  
  18.     text-align: center;  
  19.     transform: rotate(45deg);  
  20.     transform-origin: 00%;  
  21. }  

版权声明:文章图片资源来源于网络,如有侵权,请留言删除!!!
admin
  • 本文由 发表于 2021年9月28日 12:47:18
  • 转载请务必保留本文链接:https://www.58pxe.com/7750.html
匿名

发表评论

匿名网友 填写信息

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