当前位置:首页>网站建设>大前端DUX主题给新发布的文章添加NEW图标

大前端DUX主题给新发布的文章添加NEW图标

释放双眼,带上耳机,听听看~!
大前端DUX主题给新发布的文章添加NEW图标

博主使用的是大前端DUX主题,最近做了相关美化,就是在首页给新发布24小时内的主题添加NEW图标,具体效果可以查看博客首页最新的文章。其实就是一个很简单的修改main.css文件教程,具体修改内容博主为大家写出来了,想要修改的可以看下。

一、修改主题的excerpt.php
1、打开主题目录下的excerpt.php文件,Ctrl+F搜索下面代码。

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>';


2、然后在搜索到的上面代码后面加上下面这段代码,第一步修改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 "";}


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

欢迎访问秀主题博客,分享简单实用WP教程
/** 修正摘要列表定位方式 */
.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%;
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
网站建设

WordPress获取一个月内的热门文章

2024-7-18 8:40:25

网站建设

b2美化-首页最新文章添加自定义文字

2022-7-19 14:54:47

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:971318156@qq.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索