子比主题美化 – 文章角标/封面图底部美化代码教程-AA源码网 | 源码收藏
子比主题美化 – 文章角标/封面图底部美化代码教程
此内容为付费阅读，请付费后查看
1500积分
虚拟资源
自动发货
禁止商用
付费阅读
已售 5

子比主题美化 – 文章角标/封面图底部美化代码教程

8188978

前言

今天分享的教程是WordPress子比主题美化教程：文章角标及封面图底部美化。简单的来说，就是在文章发布页面增加一个附加选项，可以通过这个附加选项达到我们想要的美化效果。

效果图

图片[1]-子比主题美化 – 文章角标/封面图底部美化代码教程-AA源码网 | 源码收藏
  • 文章发布时可自行配置输入内容以及颜色，不填写内容则不显示。
图片[2]-子比主题美化 – 文章角标/封面图底部美化代码教程-AA源码网 | 源码收藏

代码教程

  1. 添加css代码至下方路径
    Zibll主题设置>>全局&功能>>自定义代码>>自定义CSS样式
/*角标css*/
.posts-item.card .item-thumbnail {
  background:#c4cffa26;
  width:100%;
  padding-bottom:var(--posts-card-scale);
}
a.item-category {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 6px;
  font-size:1rem;
  line-height:1;
  color:#fff;
  background:var(--theme-color);
  border-radius:6px;
}
a.item-category-app {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#3783ff,#3783ffbf);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-b {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#ff5631,#ff5631ba);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-c {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#464242,#464242ad);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
span.bottom-l {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.n-collect-item-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  background:var(--theme-color);
  border-radius:0 0 var(--main-radius);
  font-size:13px;
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.16);
  display:flex;
  -webkit-box-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  justify-content:space-between;
  padding:0 18px;
  z-index:5;
  justify-content:center;
}
.jiaobiao2 {
  position:absolute;
  top:10px;
  right:-50px;
  z-index:1;
  width:140px;
  height:20px;
  background:var(--theme-color);
  color:#fff;
  line-height:20px;
  transform:rotate(45deg);
  text-align:center;
  font-size:12px;
  left:auto;
  border-radius:0 50px 50px 0;
}
/*角标css*/
.posts-item.card .item-thumbnail {
  background:#c4cffa26;
  width:100%;
  padding-bottom:var(--posts-card-scale);
}
a.item-category {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 6px;
  font-size:1rem;
  line-height:1;
  color:#fff;
  background:var(--theme-color);
  border-radius:6px;
}
a.item-category-app {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#3783ff,#3783ffbf);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-b {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#ff5631,#ff5631ba);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-c {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#464242,#464242ad);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
span.bottom-l {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.n-collect-item-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  background:var(--theme-color);
  border-radius:0 0 var(--main-radius);
  font-size:13px;
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.16);
  display:flex;
  -webkit-box-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  justify-content:space-between;
  padding:0 18px;
  z-index:5;
  justify-content:center;
}
.jiaobiao2 {
  position:absolute;
  top:10px;
  right:-50px;
  z-index:1;
  width:140px;
  height:20px;
  background:var(--theme-color);
  color:#fff;
  line-height:20px;
  transform:rotate(45deg);
  text-align:center;
  font-size:12px;
  left:auto;
  border-radius:0 50px 50px 0;
}
/*角标css*/
.posts-item.card .item-thumbnail {
  background:#c4cffa26;
  width:100%;
  padding-bottom:var(--posts-card-scale);
}
a.item-category {
  position:absolute;
  left:10px;
  top:10px;
  padding:5px 6px;
  font-size:1rem;
  line-height:1;
  color:#fff;
  background:var(--theme-color);
  border-radius:6px;
}
a.item-category-app {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#3783ff,#3783ffbf);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-b {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#ff5631,#ff5631ba);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
a.item-category-app-c {
  position:absolute;
  height:24px;
  line-height:24px;
  width:100%;
  text-align:center;
  bottom:0;
  left:0;
  background:radial-gradient(circle,#464242,#464242ad);
  color:#fff;
  font-size:12px;
  border-radius:0 0 10px 10px;
}
span.bottom-l {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.n-collect-item-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;
  background:var(--theme-color);
  border-radius:0 0 var(--main-radius);
  font-size:13px;
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.16);
  display:flex;
  -webkit-box-align:center;
  align-items:center;
  -webkit-box-pack:justify;
  justify-content:space-between;
  padding:0 18px;
  z-index:5;
  justify-content:center;
}
.jiaobiao2 {
  position:absolute;
  top:10px;
  right:-50px;
  z-index:1;
  width:140px;
  height:20px;
  background:var(--theme-color);
  color:#fff;
  line-height:20px;
  transform:rotate(45deg);
  text-align:center;
  font-size:12px;
  left:auto;
  border-radius:0 50px 50px 0;
}
  1. 将下面代码添加进子比主题下的func.php文件内。
    若没有可自行新建func.php文件，记得复制<?php 去掉前面两竖线
此处内容已隐藏，请评论后刷新页面查看.
  1. 打开子比主题文件路径：/inc/functions/zib-post-list.php，搜索关键词置顶找到下方代码位置
 if (is_sticky()) {
        $sticky = '<badge class="img-badge left jb-red">置顶</badge>';
    } else {
        $sticky = '';
    } 
 if (is_sticky()) {
        $sticky = '<badge class="img-badge left jb-red">置顶</badge>';
    } else {
        $sticky = '';
    } 
 if (is_sticky()) {
        $sticky = '<badge class="img-badge left jb-red">置顶</badge>';
    } else {
        $sticky = '';
    }

最后，在上述代码最后的}代码添加下面的代码保存即可。（如图所示位置）

  此处内容已隐藏，请付费后查看
图片[3]-子比主题美化 – 文章角标/封面图底部美化代码教程-AA源码网 | 源码收藏

温馨提示

  • 此代码教程涉及修改主题源文件，建议提前备份源文件再进行操作，避免出现不可逆的损失。
  • 按上述流程操作完成后，建议清理cdn/浏览器缓存。（未开启缓存忽略即可）
温馨提示：若内容/图片/下载链接失效，请在下方留言或登录后私信站长。

本文结束END
© 版权声明
本网站名称：AA源码网
默认解压密码：aaym.net
①本站所有资源免费，收取的费用仅为抵扣人工测试和服务器日常维护带来的消耗成本，请须知。
②因源码、模板、插件等程序具有可复制性，一经出售概不退款。
③本站部分资源来源网络或者用户投稿，如有侵权请联系删除（aaym@foxmail.com）
④本站资源仅用于个人学习和交流，如用于商业使用请选择正版程序。使用非正版程序须在24小时内卸载删除。
➣详细的版权声明请点击文章版权声明查看。
**下载/阅读均默认代表您已详细阅读版权声明并同意承担可能造成的所有损失及后果！

THE END
Zibll美化
# 子比主题美化# 教程# 美化代码# 文章角标
喜欢就支持一下吧
点赞78赞赏 分享
阿夜的头像-AA源码网 | 源码收藏SVIP
相关推荐
评论 共8条

请登录后发表评论

    只看作者
    • qq107108的头像-AA源码网 | 源码收藏qq107108徽章-资深玩家-AA源码网 | 源码收藏等级-LV1-AA源码网 | 源码收藏0
      谁会拒绝来AA源码网看一眼大佬的文章呢～
      10个月前广西壮族自治区
    • a11326的头像-AA源码网 | 源码收藏a11326徽章-资深玩家-AA源码网 | 源码收藏等级-LV1-AA源码网 | 源码收藏0
      这大概 就叫作 斐然成章吧！！！
      12个月前福建
    • HackXK的头像-AA源码网 | 源码收藏HackXK徽章-初出茅庐-AA源码网 | 源码收藏等级-LV3-AA源码网 | 源码收藏0
      不要给我压力，那将是我追赶你的动力～
      1年前山东
    • kxmfz515的头像-AA源码网 | 源码收藏kxmfz515徽章-社交达人-AA源码网 | 源码收藏等级-LV2-AA源码网 | 源码收藏0
      谁会拒绝来AA源码网看一眼大佬的文章呢～
      1年前江苏
用户封面
阿夜的头像-AA源码网 | 源码收藏SVIP
付费阅读
1500积分
虚拟资源
自动发货
禁止商用
已售 5
文章目录
热门文章
04月21日，星期一, 每天60秒读懂全世界！-AA源码网 | 源码收藏
0条讨论
04月21日，星期一, 每天60秒读懂全世界！
TOP1
04月22日，星期二, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月22日，星期二, 每天60秒读懂全世界！
36天前0条讨论
TOP2
04月23日，星期三, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月23日，星期三, 每天60秒读懂全世界！
35天前0条讨论
TOP3
04月24日，星期四, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月24日，星期四, 每天60秒读懂全世界！
34天前0条讨论
TOP4
04月25日，星期五, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月25日，星期五, 每天60秒读懂全世界！
33天前0条讨论
TOP5
04月26日，星期六, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月26日，星期六, 每天60秒读懂全世界！
32天前0条讨论
TOP6
标签云
龙年主题龙年鼠标点击爱心特效鼠标点击出现文字特效鼠标样式插件鼠标样式鼠标右键菜单自定义默认黑网黄钻低价开通地址鸿蒙软件魔方财务模板下载魔方财务免费模板魔方财务主题魔众短链接系统魏锦宸鬼谷八荒高颜值高质量高级玩法高级安全认证
最新评论
cyvip2的头像-AA源码网 | 源码收藏

cyvip26小时前0

路过一下，我只是来打酱油的！
a445149490的头像-AA源码网 | 源码收藏

a445149490前天0

水帖美如花，养护靠大家！
qwe12312312的头像-AA源码网 | 源码收藏

qwe123123123天前0

这个站很不错，值得推荐！
小影月的头像-AA源码网 | 源码收藏

小影月徽章-忠诚玩家-AA源码网 | 源码收藏4天前0

总是会在人生的不同阶段反复爱上大佬的文章~
isky007的头像-AA源码网 | 源码收藏

isky0074天前0

水帖美如花，养护靠大家！
isky007的头像-AA源码网 | 源码收藏

isky0074天前0

从头到脚都是完美的
啊嘞嘞嘞的头像-AA源码网 | 源码收藏

啊嘞嘞嘞5天前0

识别码识别码
sq1995liu的头像-AA源码网 | 源码收藏

sq1995liu徽章-初出茅庐-AA源码网 | 源码收藏10天前0

谢谢你的分享，我从中学到了很多！

当前时间：