VPS联盟
主机测评与优惠

WordPress DUX大前端主题给最新文章和置顶文章添加NEW和TOP图标方法

最新文章添加NEW图标方法

 

一、最新文章添加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($diff<24){echo 'New';}
else{echo "";}

       第二、修改样式

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

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

置顶文章添加TOP图标方法

二、置顶文章添加TOP图标方法

       一、修改主题的excerpt.php

找到主题目录中的excerpt.php文件,然后找到对应代码:

echo '<span class="sticky-icon">置顶</span>';

修改为:

echo '<span class="sticky-icon">TOP</span>';

 第二、修改样式

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

/** 修改NEW标志样式 vpsaff.com */ 
.excerpt { 
positiON: relative; 
}
/** 置顶图标文字版样式 **/
.excerpt .sticky-icon  {
    position: absolute;
    padding: 0;
    right: -38px;
    top: -16px;
    display: block;
    width: 76px;
    height: 20px;
    line-height: 20px;
    background: #ff5e52;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: 0% 0%;
}
赞(0) 打赏
未经允许不得转载:VPS联盟 » WordPress DUX大前端主题给最新文章和置顶文章添加NEW和TOP图标方法
分享到: 更多 (0)

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址