子比主题文章标签美化-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

子比主题文章标签美化

注:修改前一定要先备份

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

1、“免费资源”增加炫彩背景。

2、增加SVIP=0时,自动添加“SVIP专属免费”标签。

20260406015642303-1001527884

20260406015300100-1001527882

“免费资源”标签美化

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

20260406021842638-1001527961

添加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,如果只有一级会员的情况下,标签可能不会生效,甚至会出错…

请登录后发表评论

    没有回复内容