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

话说前天工单联系了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文件，在最下方增加

<br /> /** 修正摘要列表定位方式 */<br /> .excerpt {<br /> position: relative;<br /> }<br /> /** 置顶图标文字版样式 **/<br /> .excerpt .zd {<br /> position: absolute;<br /> padding: 0;<br /> right: -38px;<br /> top: -16px;<br /> display: block;<br /> width: 76px;<br /> height: 20px;<br /> line-height: 20px;<br /> background: #ff5e52;<br /> color: #fff;<br /> font-size: 14px;<br /> font-weight: 400;<br /> text-align: center;<br /> transform: rotate(45deg);<br /> transform-origin: 0% 0%;<br /> }<br /> @media (max-width:640px){<br /> .excerpt-sticky header{text-indent:0px;position: unset;}<br /> .sticky-icon {<br /> position: absolute;<br /> padding: 0;<br /> right: -38px;<br /> left: auto;<br /> top: -16px;<br /> display: block;<br /> width: 76px;<br /> height: 20px;<br /> line-height: 20px;<br /> background: #ff5e52;<br /> color: #fff;<br /> font-size: 14px;<br /> font-weight: 400;<br /> text-align: center;<br /> transform: rotate(45deg);<br /> transform-origin: 0% 0%;<br /> }<br /> }

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

然后再说发布24小时显示NEW图标的方法，其实和置顶图标方法一下，这次是在excerpt.php文件里，
找到

';

直接在后面增加以下代码

<br /> date_default_timezone_set('PRC');<br /> $t1=$post->post_date;<br /> $t2=date("Y-m-d H:i:s");<br /> $diff=(strtotime($t2)-strtotime($t1))/3600;<br /> if($diff<24){echo '<span class="456-b88f-928d-2bb4-020c new-icon">New</span>';}<br /> else{echo "";}

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

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

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

好了，就记录到这里了。

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