教程开始:
1、首先修改/wp-content/themes/ripro/inc/codestar-framework/options目录下options.theme.php文件 找到660左右的// 会员开通引导模块
或直接全局搜索“// 会员开通引导模块”, 一直到 // 列表设置
全部替换成下方内容
// 会员开通引导模块
array(
'id' => 'home_vip_mod',
'type' => 'fieldset',
'title' => '会员开通引导模块',
'fields' => array(
array(
'id' => 'vip_group',
'type' => 'group',
'title' => '添加介绍',
'max' => '3',
'fields' => array(
array(
'id' => '_time',
'type' => 'text',
'title' => '时长',
'default' => '一个月',
),
array(
'id' => '_price',
'type' => 'text',
'title' => '价格',
'default' => '10',
),
array(
'id' => '_tehui',
'type' => 'text',
'title' => '优惠信息',
'default' => '限时优惠',
),
array(
'id' => '_vipms01',
'type' => 'text',
'title' => '描述1',
'default' => '',
),
array(
'id' => '_vipms02',
'type' => 'text',
'title' => '描述2',
'default' => '',
),
array(
'id' => '_color',
'type' => 'color',
'title' => '模块自定义主颜色',
'desc' => '',
'default' => '#34495e',
),
),
),
),
),
),
));
//
// 列表设置2、找到/wp-content/themes/ripro/assets/css目录下div.css文件 在div.css文件内最下方插入下方css内容
/*VIP开通*/
.container .row .card {
border: solid 1px #e5e5e5;
width: 23.5%;
background-color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 12px;
}
.container .row .card.active {
box-shadow: 4px 8px 40px 0 rgba(0, 0, 0, .1)
}/*.container .row .card:not(:last-of-type) {*/
.container .row .card {
margin: 10px;
}
.container .row .card.ent-base:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}
.container .row .card.ent-base {
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
}
.container .row .card.ent-base .btn {
background-image: -webkit-linear-gradient(bottom, #fff 30%, #fff);
background-image: linear-gradient(to top, #fff 30%, #fff)
}
.container .row .card .version {
font-weight: 700
}
.container .row .header {
border-radius: 12px 12px 0 0;
height: 228px;
color: #fff;
font-size: 14px;
line-height: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-top: 23px;
font-weight: 300;
z-index: 1;
}
.container .row .header .price-year {
margin-top: 12px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
font-weight: 400
}
.container .row .header .pricing-deco {
width: 100%;
}
.container .row .header .price-year .dollar {
font-size: 18px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
margin-top: 3px;
font-weight: 300
}
.container .row .header .price-year .price {
font-size: 46px;
letter-spacing: 1.7px;
font-weight: 700;
font-family: Helvetica
}
.container .row .header .price-quarter {
font-size: 12px;
margin: 5px auto 17px
}
.container .row .header .btn {
width: 160px;
/*line-height: 12px;*/
border-radius: 2px;
color: rgba(0, 0, 0, .7);
font-size: 14px;
border: 0;
font-weight: 500;
font-family: PingFangSC;
cursor: pointer
}
.container .row .header .btn:hover {
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .14)
}
.container .row .content {
position: relative;
font-size: 12px;
padding-top: 23px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
z-index: 90;
}
.container .row .content .desc {
line-height: 1;
padding-left: 37px;
margin-bottom: 18px;
color: rgba(62, 62, 62, .8);
position: relative
}
.container .row .content .desc:before {
position: absolute;
content: "";
height: 6px;
width: 9px;
border: 2px solid #3e3e3e;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 20%;
left: 16px;
border-top: 0;
border-right: 0;
opacity: .6;
filter: alpha(opacity=60)
}
@media screen and (max-width: 1450px) {
.container .row .card {width: 23.2%}
}
@media screen and (max-width: 750px) {
.container .row .card {width: 100%}
}
@media (min-width: 1460px) {
.container .row .card {
width: 23.5%;
}
}
.container .row .pricing-deco .deco-layer {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.container .row .pricing-deco:hover .deco-layer--1 {
-webkit-transform: translate3d(15px,0,0);
transform: translate3d(15px,0,0);
}
.container .row .pricing-deco:hover .deco-layer--2 {
-webkit-transform: translate3d(-15px,0,0);
transform: translate3d(-15px,0,0);
}3、找到/wp-content/themes/ripro/parts/home-mode目录下vip.php文件 将vip.php的内容全部替换成下方的内容!
<?php
$home_mode_vip = _cao('home_vip_mod');
?>
<div class="section pt-0 pb-0">
<div class="home-vip-mod">
<div class="container">
<div class="row">
<div class="card ent-base ">
<div class="header" style="background:#19d44a">
<div class="version">
注册用户
</div>
<div class="price-year">
<span class="dollar">￥</span><span class="price">0</span>
</div>
<div class="price-quarter">
<span class="tehui"><i class="fa fa-diamond"></i> 限时优惠</span>
</div>
<p>
<?php if (is_user_logged_in()) : ?>
<a href="<?php echo esc_url(home_url('/user?action=vip'));?>" class="btn-sm primary" style="background:<?php echo $item['_color'];?>"><button class="btn user-login">升级会员</button></a>
<?php else: ?>
<a class="login-btn btn-sm primary"><button class="btn user-login"><i class="fa fa-user"></i> 立即注册</button></a>
<?php endif; ?>
</p>
<div class="pricing-deco">
<svg class="pricing-deco-img" enable-background="new 0 0 300 100" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
</svg>
</div>
</div>
<div class="content">
<div class="desc">
站内免费资源</div>
<div class="desc">
永久无限下载次数</div>
<div class="desc">
<strong style="color:red">折扣次数</strong>:无折扣
</div>
<div class="desc">
<strong style="color:red">会员权限</strong>:无权限
</div>
</div>
</div>
<?php foreach ( $home_mode_vip['vip_group'] as $item ) : ?>
<div class="card ent-base ">
<div class="header" style="background:<?php echo $item['_color'];?>">
<div class="version">
<?php echo $item['_time'];?>
</div>
<div class="price-year">
<span class="dollar">￥</span><span class="price"><?php echo $item['_price'];?></span>
</div>
<div class="price-quarter">
<?php if ($item['_tehui']) : ?>
<span class="tehui"><i class="fa fa-diamond"></i> <?php echo $item['_tehui'];?></span>
</div>
<?php endif; ?>
<p>
<?php if (is_user_logged_in()) : ?>
<a href="<?php echo esc_url(home_url('/user?action=vip'));?>" class="btn-sm primary" style="background:<?php echo $item['_color'];?>"><button class="btn user-login">前往开通</button></a>
<?php else: ?>
<a class="login-btn btn-sm primary"><button class="btn user-login"><i class="fa fa-user"></i> 登录购买</button></a>
<?php endif; ?>
</p>
<div class="pricing-deco">
<svg class="pricing-deco-img" enable-background="new 0 0 300 100" id="Layer_1" preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<path class="deco-layer deco-layer--1" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--2" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" fill="#FFFFFF" opacity="0.6"></path>
<path class="deco-layer deco-layer--3" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
H42.401L43.415,98.342z" fill="#FFFFFF" opacity="0.7"></path>
<path class="deco-layer deco-layer--4" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#FFFFFF"></path>
</svg>
</div>
</div>
<div class="content">
<div class="desc">
<?php echo $item['_vipms01'];?>
</div>
<div class="desc">
<?php echo $item['_vipms02'];?>
</div>
<div class="desc">
<strong style="color:red">折扣次数</strong>:有效期内全站随意下载
</div>
<div class="desc">
<strong style="color:red">会员权限</strong>:VIP只是到期时间不同
</div>
<p>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>效果样式:
