【分享】XIU主题美化教程：为置顶和24小时内文章增加”置顶“和”NEW“图标

作者：小雨时间：2023-08-23 14:11 浏览量：次

/** 修正摘要列表定位方式 */
.excerpt {
    position: relative;
}
/** 置顶图标文字版样式 **/
.excerpt .zd  {
    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%;
}
@media (max-width:640px){
    .excerpt-sticky header{text-indent:0px;position: unset;}
    .sticky-icon {
        position: absolute;
        padding: 0;
        right: -38px;
        left: auto;
        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%;
    }
}

12345678910111213141516171819202122232425262728293031323334353637383940414243

/** 修正摘要列表定位方式 */.excerpt { position: relative;}/** 置顶图标文字版样式 **/.excerpt .zd { 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%;}@media (max-width:640px){ .excerpt-sticky header{text-indent:0px;position: unset;} .sticky-icon { position: absolute; padding: 0; right: -38px; left: auto; 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%; }}

然后再看你的顶置文章，显示如下

然后再说发布24小时显示NEW图标的方法，其实和置顶图标方法一下，这次是在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 "";}

123456

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 "";}

然后在style.css文件里增加以下内容

/** 修正摘要列表定位方式 */
.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%;
}

123456789101112131415161718192021

/** 修正摘要列表定位方式 */.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%;}

刷新你的主页，就会看到最新发布的文章显示了NEW的图标了。

好了，就记录到这里了。

本文出处：www.771633.com/13112.htm，原作者保留一切权利，若侵权请联系删除。

-->

1.软文推荐

2.软文推荐

3.软文推荐

话说前天工单联系了XIU主题的作者，想在首页的最新文章列表里增加文章置顶功能，结果商家可能是需要给点RMB，一直说改不了，所以最后只能自己动手了，花费了几个小时的时间，总算是解决了，具体内容请看文章：wordpress调用置顶文章和控制数量，今天继续把顶置和24小时内的文章图标增加一下，内容参考蜗牛大佬的博客，下面把详细过程记录一下，因为我的模板改了很多，不一定适应你的。
参考文章：

https://www.wn789.com/24617.html
https://www.wn789.com/16211.html

因为大前端和XIU都是同一家的产品，所以还是有很多共同之处的，

美化教程

先搞置顶位置图标，看懂上一篇文章的应该已经知道，文章列表里顶置实际是一个单独的模块，所以我们需要单独设置，首先所你模板文章下的excerpt.php复制一份，改名为excerpt-zd.php
在内容中查找echo ' ';

然后在上面增加：echo '置顶';
然后打开style.css文件，在最下方增加

/** 修正摘要列表定位方式 */
.excerpt {
    position: relative;
}
/** 置顶图标文字版样式 **/
.excerpt .zd  {
    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%;
}
@media (max-width:640px){
    .excerpt-sticky header{text-indent:0px;position: unset;}
    .sticky-icon {
        position: absolute;
        padding: 0;
        right: -38px;
        left: auto;
        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%;
    }
}