#分享#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文件，在最下方增加
| 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文件里，
找到
';
直接在后面增加以下代码
| 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;}.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;}.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的图标了。
好了，就记录到这里了。
[教程]历史优惠活动内容
猜你可能想看的VPS
- locvps：香港云地多线路BGP云服务器,三网直连,6折终身优惠中,稳 香港VPS[主机]
- V5.NET：香港/美国云服务器7折月付42港元起;香港物理服务器月付3 美国VPS[主机]
- LiCloud：香港CN2线路云服务器,100Mbps大带宽,6折优惠中 香港VPS[主机]
- 极光KVM：月末冲刺活动,美西/香港cn2云服务器,低至19元/月起 香港VPS[主机]
- 港口雄开万里流丨不出国门海淘全球青岛跨境电商未来可期 全球[VPS测评]
- 向日葵-漏洞科普：海外云服务器三种漏洞修复方法快收藏起来！ 全球[VPS测评]
- CombCloud,香港沙田CN2VPS测评,2核1G52元/月,安畅C 香港VPS[主机]
- 众创逸云：国庆中秋节大促销优惠，不限流量香港CN2线路VPS 5.9元/ 香港VPS[主机]
- 岚云：香港安迅/沙田CN2直连,75折起,1核/1G/30G SSD/1 香港VPS[主机]
- RangCloud：香港云主机,1核1G内存/15G SSD/2Mbps 香港VPS[主机]
- 弘速科技：香港安畅CN2 GIA/弹性云服务器10元/月,2核1GB/2 香港VPS[主机]
- 初忆云：湖北电信云服务器1核2G仅6.8/月,81.6元/年;香港cn2 香港VPS[主机]
- 锤子云：香港CN2云服务器15元/月,三网CN2线路回程,建站vps专属 香港VPS[主机]
- 阿里云免备案服务器怎么样?阿里云香港服务器价格多少钱一年? 香港VPS[主机]
- YYYHost年终钜惠来袭：香港建站云/美国Cera云月付8折,季付7折 美国VPS[主机]
- 易科云：香港cn2 vps,洛杉矶 cn2云主机;全场月付9折/季付8折 香港VPS[主机]
- 柚子互联：美国洛杉矶CN2 vps,防御100G/带宽10M,28元/月 美国VPS[主机]
- 特网云：香港高防CN2云服务器,新加坡/美国/洛杉矶/英国/荷兰等,5M 美国VPS[主机]
- 41云：香港bgp云服务器低至14元/月;香港三网CN2 GIA VPS 香港VPS[主机]
- vmshell：香港不限速vps/200MBps大带宽VPS促销仅需$3 香港VPS[主机]
- 啤啤云：美国圣何塞vps/香港安畅vps,GIA线路,全场9折终身优惠 美国VPS[主机]
- CoNoov：美国/日本/新加坡/英国/荷兰/西班牙/挪威/丹麦vps, 日本VPS[主机]
- 孤狼云：香港安畅、沙田CN2 VPS,1核/1G/40G硬盘,10元/月 香港VPS[主机]
- MineServer：香港CMI云服务器,1核/512MB/10GB空间 虚拟空间(主机)
- 网站迁移服务器是如何运作的？新手站长看完这篇文章，很容易就能看完。 全球[VPS测评]
- WHMCS 8.1如何简化注册页面 全球[VPS测评]
- 创意IT服务公司主页网站模板 - Softets 全球[VPS测评]
- 咖啡主机怎么样?美国洛杉矶高防vps,cn2直连,香港沙田vps 美国VPS[主机]
- 众创逸云：国庆中秋节大促销优惠，不限流量香港CN2线路VPS 5.9元/ 香港VPS[主机]
- 六六云：美国cera机房CN2 GIA高防/香港CN2 GIA建站/CM 美国VPS[主机]
转载请注明原文地址: http://140.238.13.167:12355/read-30786.html