首页CMS美化大前端DUX主题 - 新发布的文章加上NEW图标

美化大前端DUX主题 - 新发布的文章加上NEW图标

时间2024-05-23 11:44:04发布访客分类CMS浏览960
导读:在WordPress圈内我们应该比较熟悉大前端的,老蒋个人也是比较喜欢他们家的主题的。目前有购买过他们家的DUX、XIU主题,之前还有人质疑老蒋部落使用的盗版主题,后来截图XIU购买订单后台就直接让人无话可说。今天我们需要做一件事情,就是在...

在WordPress圈内我们应该比较熟悉大前端的,老蒋个人也是比较喜欢他们家的主题的。目前有购买过他们家的DUX、XIU主题,之前还有人质疑老蒋部落使用的盗版主题,后来截图XIU购买订单后台就直接让人无话可说。今天我们需要做一件事情,就是在对DUX主题修改首页的新文章,加上NEW标志。

第一、修改主题的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_t
he_subtitle().'/a> /h2> ';

加上:

date_default_timezone_set('PRC');
$t1=$post-> post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff24){ echo 'span class="new-icon"> New/span> '; }
else{ echo ""; }

第二、修改样式

找到样式文件:main.css,在最后添加:

/** 修改NEW标志样式 itbulu.com */
.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%;
}

然后我们再刷新CDN或者缓存看看效果。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 美化大前端DUX主题 - 新发布的文章加上NEW图标
本文地址: https://pptw.com/jishu/666285.html
spark框架搭建的步骤是什么 spark怎么对数据进行实时展示

游客 回复需填写必要信息