注:修改前一定要先备份
子比主题文章页面标签美化:
1、“免费资源”增加炫彩背景。
2、增加SVIP=0时,自动添加“SVIP专属免费”标签。


“免费资源”标签美化
修改后如图,上图那个原代码找不着了,用下面这个将就将就吧。

添加CSS代码:子比主题设置–>>自定义代码–>>自定义 CSS 样式
/* 免费资源标签 */
.meta-pay.but.jb-yellow{
display:inline-block;
padding:4px 12px;
font-size:12px;
font-weight:600;
color:#fff !important;
border-radius:999px;
line-height:1.2;
white-space:nowrap;
position:relative;
overflow:hidden;
/* 🌈 柔和渐变(粉→蓝→青) */
background: linear-gradient(
135deg,
#ff9ecb 0%,
#ffc3a0 25%,
#a18fff 50%,
#7fdfff 75%,
#6fffd2 100%
);
/* 🌫 半透明玻璃感 */
backdrop-filter: blur(6px);
/* ✨ 柔光阴影 */
box-shadow:
0 2px 8px rgba(160,120,255,.25),
0 0 12px rgba(120,200,255,.15);
transition: all .25s ease;
}
/* 🌟 流光扫过效果 */
.meta-pay.but.jb-yellow::before{
content:"";
position:absolute;
top:0;
left:-60%;
width:60%;
height:100%;
background: linear-gradient(
to right,
transparent,
rgba(255,255,255,.5),
transparent
);
transform: skewX(-20deg);
animation: freeTagLight 2.8s linear infinite;
}
/* ✨ 悬浮微动 */
.meta-pay.but.jb-yellow:hover{
transform: translateY(-1px) scale(1.03);
box-shadow:
0 4px 14px rgba(160,120,255,.35),
0 0 18px rgba(120,200,255,.25);
}
/* 动画 */
@keyframes freeTagLight{
0%{ left:-60%; }
100%{ left:120%; }
}
“SVIP专属免费”标签美化
需要修改php+添加CSS才能实现,修改php用于判断价格+自动添加标签,CSS仅美化标签。
1、找到:域名根目录->>wp-content->>thems->>zibll->>inc->>zib-posts-list.php
搜索:获取文章列表中的付费价格,将整段代码替换为下面这段代码:
function zib_get_posts_list_pay_tags($post)
{
$posts_pay = get_post_meta($post->ID, 'posts_zibpay', true);
$get_permalink = get_permalink($post);
$html = '';
if (!empty($posts_pay['pay_type']) && $posts_pay['pay_type'] != 'no') {
$order_type_name = zibpay_get_pay_type_name($posts_pay['pay_type']);
$pay_price = 0;
if (isset($posts_pay['pay_price']) && $posts_pay['pay_price'] !== '') {
$pay_price = round((float) $posts_pay['pay_price'], 2);
}
$points_price = isset($posts_pay['points_price']) ? (int) $posts_pay['points_price'] : 0;
$pay_modo = isset($posts_pay['pay_modo']) ? $posts_pay['pay_modo'] : 0;
$pay_user_vip_1_s = _pz('pay_user_vip_1_s', true);
$pay_user_vip_2_s = _pz('pay_user_vip_2_s', true);
$vip_2_price = null;
if (isset($posts_pay['vip_2_price']) && $posts_pay['vip_2_price'] !== '') {
$vip_2_price = round((float) $posts_pay['vip_2_price'], 2);
}
// 免费资源
if (($pay_modo === 'points' && !$points_price) || ($pay_modo !== 'points' && !$pay_price)) {
return '<a rel="nofollow" href="' . $get_permalink . '#posts-pay" class="meta-pay but jb-yellow">免费资源</a>';
}
// 限制购买
$pay_limit = !empty($posts_pay['pay_limit']) ? (int) $posts_pay['pay_limit'] : 0;
if ($pay_limit > 0 && ($pay_user_vip_1_s || $pay_user_vip_2_s)) {
return '<a rel="nofollow" href="' . $get_permalink . '#posts-pay" data-toggle="tooltip" title="' . $order_type_name . '" class="meta-pay but jb-vip' . $pay_limit . '">' . zibpay_get_vip_icon($pay_limit, '') . ' 会员专属</a>';
}
if ($pay_modo === 'points') {
$mark = zibpay_get_points_mark('');
$html = '<a rel="nofollow" href="' . $get_permalink . '#posts-pay" class="meta-pay but jb-yellow">' . $order_type_name . '<span class="em09 ml3">' . $mark . '</span>' . $points_price . '</a>';
} else {
$mark = zibpay_get_pay_mark();
$html = '<a rel="nofollow" href="' . $get_permalink . '#posts-pay" class="meta-pay but jb-yellow">' . $order_type_name . '<span class="em09 ml3">' . $mark . '</span>' . $pay_price . '</a>';
// SVIP 免费时,额外追加标签
if ($pay_price > 0 && $vip_2_price !== null && $vip_2_price <= 0) {
$html .= '<span class="acgyxs-svip-tag">SVIP专属免费</span>';
}
}
}
return $html;
}
2、添加CSS美化,子比主题设置–>>自定义代码–>>自定义 CSS 样式,可自定义自己喜欢的颜色:
.acgyxs-svip-tag{
display:inline-block;
margin-left:6px;
padding:3px 12px;
border-radius:999px;
font-size:12px;
line-height:1.2;
font-weight:700;
color:#fff;
white-space:nowrap;
vertical-align:middle;
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#3f2bff 0%,#7a3cff 18%,#c14bff 38%,#ff5fc8 58%,#ff9b2a 78%,#ffe7a8 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.18) inset,
0 4px 12px rgba(104,74,255,.32),
0 0 18px rgba(255,183,72,.22);
}
.acgyxs-svip-tag:before{
content:"";
position:absolute;
top:0;
left:-50%;
width:50%;
height:100%;
background:linear-gradient(to right,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-25deg);
animation:acgyxsSvipLight 2.4s linear infinite;
}
@keyframes acgyxsSvipLight{
0%{left:-50%;}
100%{left:120%;}
}
闲聊:
因为我自己网站是二级会员制,有VIP和SVIP,如果只有一级会员的情况下,标签可能不会生效,甚至会出错…






没有回复内容