WP主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标

  • 内容
  • 相关

今天在此文章中为大家介绍一个通过修改“main.css”文件来实现把“NEW”图标显示在文章的右上角,如下图,结合云恺资源网的首页顶置图标整体效果可以查看云恺资源网

 

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

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

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文件这一步就完成了。

date_default_timezone_set('PRC');
$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-icon">New</span>';}
else{echo "";}

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

/** 修正摘要列表定位方式 */
.excerpt {
position: relative;
}
/** NEW 图标文字版样式 **/
.excerpt .new-icon{
position: absolute;
right: -38px;
top: -16px;
display: block;
width: 76px;
height: 20px;
line-height: 20px;
background: #4caf50;
color: #fff;
font-size: 14px;
font-weight: 400;
text-align: center;
transform: rotate(45deg);
transform-origin: 0% 0%;
}

 

本文标签:

版权声明:若无特殊注明,本文皆为《云恺》原创,转载请保留文章出处。

本文链接:WP主题美化小技巧 在首页为当前24小时内更新的文章添加NEW图标 - https://www.666bk.cn/WPskill/8.html

发表评论

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

未显示?请点击刷新

允许邮件通知

评论

1条评论
  1. avatar

    头条新闻 Lv.1 Chrome 63.0.3239.132 Windows 7 回复

    文章不错非常喜欢

    IP数据库文件不存在或者禁止访问或者已经被删除!

    00:00 / 00:00
    顺序播放