[不花钱站长]:从免费域名开始[0元] Oracle永久免费VPS[0元] VPS环境搭建免费脚本[0元] 秒变大盘挂载免费网盘[0元] 小白免费采集器1天500W[0元] CF免费DNS+CDN服务[0元]
[零基础网赚]:撸本站免费源码[0元] 网站强引免费蜘蛛法[0元] 图片视频文件免费存储[0元] 外链轻松发布免费友链[0元] 入坑免费教程学习源代码[0元] 网上百种+赚钱联盟推荐[?元]

↑↑VPS推荐网 WWW.VPS.COM.IN 稳定 便宜 免备案↑↑


您现在的位置是：首页 > 全球[VPS测评] >  教程,教程,国外永久免费VPS

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

全球[VPS测评]来源：VPS推荐网点击：852
【性价之王】【线路之王】【价格之王】【配置之王】
【免费之王】【香港首推】【梯子之王】【独服之王】
#分享#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文件，在最下方增加

.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;}.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的图标了。

好了，就记录到这里了。


[教程]历史优惠活动内容
  • 新手教程→账单周期小科普/paypal和信用卡付款注意事项
  • VPS新手教程-解决Fraud/MaxMind Error
  • 新手教程→申请globalcash虚拟MasterCard信用卡
  • 新手教程→账单周期小科普/paypal和信用卡付款注意事项
  • VPS新手教程 – 一键安装LAMP环境(长久更新)
  • hostus的KVM VPS安装Windows系统教程
  • hostus-美国VPS/KVM虚拟/洛杉矶机房-测评+使用教程
  • Windows下使用securecrt连接VPS服务器教程
  • putty连接VPS服务器教程
  • Xshell连接VPS服务器使用教程
  • WinSCP管理文件使用教程
  • [最新教程] godaddy 仅需12美元1年 注册.com/net+主机
  • 教程→Godaddy-142元/windows VPS/2g内存/40g硬盘/3IP/不限流
  • 玩转Vultr VPS→优惠码 充值送钱 注册注意 使用教程 玩Windows
  • Linux下挂载硬盘的简单教程
  • rectified vps 教程 rectified设置 rectified重装 recti
  • IIS优化教程→改善访问慢 提高运行效率
  • Ubuntu 16.04下安装LAMP环境包新手简易教程
  • 纯手工教程→centos6.x搭建LAMP环境
  • windows server 2012配置php环境教程
  • windows server 2008配置IIS+php+mysql教程
  • Windows Server 2012 安装配置IIS8.5教程
  • Linux新手VPS服务器教程 零基础开始进入服务器世界
  • Linux下挂载磁盘教程
  • 教程→搬瓦工VPS搭建网站需要知道的一些细节内容
  • 教程→搬瓦工VPS搭建网站需要知道的一些细节内容
  • 图文教程→注册国外VPS如何避免欺诈”Fraud/MaxMind Error“
  • 教程→搬瓦工VPS搭建网站需要知道的一些细节内容
  • 图文教程→注册国外VPS如何避免欺诈”Fraud/MaxMind Error“
  • 教程→在Linode上面安装windows系统
  • bandwagonhost搬瓦工VPS→介绍+优惠码+测评+新手使用教程
  • 搬瓦工教程 教你如何使用搬瓦工VPS
  • 搬瓦工服务器 教程汇总 问题收集和答复
  • 搬瓦工BBR 搬瓦工锐速 一句话命令安装BBR和锐速 简单教程
  • 搬瓦工BBR 搬瓦工锐速 一句话命令安装BBR和锐速 简单教程
  • 搬瓦工VPS换IP教程 bandwagonhost换IP
  • 搬瓦工KCP加速教程 让搬瓦工VPS在KCPtun加速下飞起来
  • 教程→搬瓦工VPS换机房 给bandwagonhost切换机房
  • 教程→搬瓦工VPS续费的相关说明
  • 教程→搬瓦工VPS续费的相关说明
  • 教程→搬瓦工VPS续费的相关说明
  • hosteons→美国不限流量Windows VPS 带中文版 +使用教程
  • hosteons→美国不限流量Windows VPS 带中文版 +使用教程
  • profitserver→VPS测评 注册+使用教程 ispmanager具体使用演示
  • cloudcone→从注册到使用的全套教程+最低配的VPS测评
  • 新西伯利亚VPS商家adman测评 +简单的注册和使用教程
  • virmach VPS→购买、使用教程、退款等问题的一些探讨 内容较多 欢迎留言
  • VPS服务器教程→如何在Debian9上安装LEMP套装组件（Linux-nginx-mys
  • VPS服务器教程→如何在Ubuntu 18.04上安装webmin面板
  • 总结→VPS教程、VPS教学 新手快速入门学习使用VPS建站
  • 写给新手的教程→VPS安装相关方面的教程及问题总结
  • PayPal新手教程→取消PayPal自动扣款的设置
  • 新手教程→国外个人VPS搭建教程 简易版 0基础入门（私人vps搭建教程）
  • 个人取消与腾讯云分销商绑定的详细教程
  • sharktech的”Public Cloud Hosting”公共云服务器使用全教程
  • 阿里云国际站（所有产品） 免实名购买 附cdn配置教程
  • 免实名购买阿里云香港服务器教程 只需一个邮箱即可注册购买
  • 注册AWS账号创建EC2免费套餐详细教程
  • 免实名购买阿里云香港服务器教程 只需一个邮箱即可注册购买
  • 注册AWS账号创建EC2免费套餐详细教程

    • 猜你可能想看的VPS


    转载请注明原文地址:http://140.238.13.167:12355/read-21054.html

    下一篇       上一篇