子比主题文章标签美化-前端技术论坛-技术交流-麦子社区

子比主题文章标签美化

实际上,注:修改前一定要先备份

子比主题文章页面标签美化:

1、”免费资源”增加炫彩背景。
2、增加SVIP=0时,自动添加”SVIP专属免费”标签。

[color3]免费资源标签美化[/color3]

修改后如图,上图那个原代码找不着了,用下面这个将就将就吧。可以说,

添加CSS代码:子比主题设置–>>自定义代码–>>自定义 CSS 样式

[hide][code]/* 免费资源标签 */
.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%; }
}[/code][/hide]

[color3]SVIP专属免费标签美化[/color3]

需要修改php+添加CSS才能达成,修改php用于判断价格+自动添加标签,CSS仅美化标签。

1、找到:域名根目录->>wp-content->>thems->>zibll->>inc->>zib-posts-list.php

搜索:获取文章列表中的付费价格,将整段代码替换为下面这段代码:

[hide][code]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 ‘免费资源‘;
}
if ($pay_limit > 0 && ($pay_user_vip_1_s || $pay_user_vip_2_s)) {
return ‘‘ . zibpay_get_vip_icon($pay_limit, ”) . ‘ 会员专属‘;
}
if ($pay_modo === ‘points’) {
$mark = zibpay_get_points_mark(”);
$html = ‘‘ . $order_type_name . ‘‘ . $mark . ‘‘ . $points_price . ‘‘;
} else {
$mark = zibpay_get_pay_mark();
$html = ‘‘ . $order_type_name . ‘‘ . $mark . ‘‘ . $pay_price . ‘‘;
if ($pay_price > 0 && $vip_2_price !== null && $vip_2_price <= 0) {
$html .= ‘SVIP专属免费‘;
}
}
return $html;
}[/code][/hide]

2、添加CSS美化,子比主题设置–>>自定义代码–>>自定义 CSS 样式,可自定义自己喜欢的颜色:

[hide][code].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%;}
}[/code][/hide]

闲聊:

因为我自己网站是二级会员制,有VIP和SVIP,如果只有一级会员的情况下,标签可能不会生效,甚至会出错…

请登录后发表评论

    没有回复内容