wordpress的ripro主题增加vip介绍页面

1. 找到wp-content\themes\ripro\pages文件夹

2. 在该文件夹下新建一个vip.php文件

3. 把下面代码复制vip.php保存, 代码中的中文字符可以任意修改

<?php
/*
Template Name: vip介绍
*/
?>
<?php get_header(); ?>

<!-- banner -->
<div class="vip-banner">
  <div class="vipbj">
    <h2>开通VIP独享海量下载特权</h2>
    <!-- <p>全站资源任意下载, 推广佣金高达50%</p> -->
    <?php if(get_current_user_id()==0){ ?>
      <a href="#" class="openLoginDialog" title="" target="_blank">登陆</a> 
    <?php }else{?>
      <a href="/user?action=vip" title="" target="_blank">开通会员</a> </div>
    <?php }?>
   </div>
</div>

<!-- vip detail introduce-->
<div class="container">
  <article class="single-content">
    <div class="module-line"> 
      <span class="arrow left-arrow"></span> 
      <span class="text">VIP资费介绍</span> 
      <span class="arrow right-arrow"></span>
      <!-- <div class="vip-desc">在这里，会员每月平均500个用户开通会员， 下载资源 1000+份~</div> -->
    </div>
    <div class="container">
      <div class="vip-row vip-block-wrapper" style="padding-bottom: 0; padding-top: 30px; margin-bottom: 0; "> 
        <!--  -->
        <div class="vip-block-item">
          <div class="home-vipbox">
            <div class="icon"> 
              <!-- <img src="/wp-content/themes/yousc/assets/images/vip.png">  -->
            </div>
            <h3 class="content0-title">月会员</h3>
            <p class="vip-home-price">20<i>纸巾</i></p>
            <p>VIP专享资源</p>
            <p>每日10次下载次数</p>
            <p>享受资源专属折扣</p>
            <p>第一时间获取优质资源</p>
            <!-- <p>推广佣金50%</p> -->
            <!-- <p>加入vip群聊防失联</p> -->
            <?php if(get_current_user_id()==0){ ?>
              <a href="#" class="openLoginDialog" title="" >
                <p class="vip-bt">登陆</p>
                <!-- <a title="Login" href="">Login to view</a> -->
              </a> 
            <?php }else{?>
              <a href="/user?action=vip" title="" >
                <p class="vip-bt">开通</p>
              </a> 
            <?php }?>
            </div>
        </div>
        
        <!--  -->
        <div class="vip-block-item">
          <div class="home-vipbox">
            <div class="icon"> 
              <!-- <img src="/wp-content/themes/yousc/assets/images/vip.png">  -->
            </div>
            <h3 class="content0-title">年费会员</h3>
            <p class="vip-home-price">100<i>纸巾</i></p>
            <p>VIP专享资源</p>
            <p>每日30次下载次数</p>
            <p>享受资源专属折扣</p>
            <p>第一时间获取优质资源</p>
            <p>享有40%推广提成</p>
            <!-- <p>加入vip群聊防失联</p> -->
            <?php if(get_current_user_id()==0){ ?>
              <a href="#" class="openLoginDialog" title="" >
                <p class="vip-bt">登陆</p>
              </a> 
            <?php }else{?>
              <a href="/user?action=vip" title="" >
                <p class="vip-bt">开通</p>
              </a> 
            <?php }?>
            </div>
        </div>
        
        <!--  -->
        <div class="vip-block-item">
          <div class="home-vipbox">
            <div class="icon"> 
              <!-- <img src="/wp-content/themes/yousc/assets/images/vip.png">  -->
            </div>
            <h3 class="content0-title">终身会员</h3>
            <p class="vip-home-price">200<i>纸巾</i></p>
            <p>VIP专享资源</p>
            <p>无限下载次数</p>
            <p>享受资源免费</p>
            <p>第一时间获取优质资源</p>
            <p>70%佣金提成</p>
            <p>每月可代找资源</p>
            <!-- <p>加入vip群聊防失联</p> -->
            <?php if(get_current_user_id()==0){ ?>
              <a href="#" class="openLoginDialog" title="" >
                <p class="vip-bt">登陆</p>
              </a> 
            <?php }else{?>
              <a href="/user?action=vip" title="" >
                <p class="vip-bt">开通</p>
              </a> 
            <?php }?>

            </div>
        </div>
      </div>
    </div>
  </article>
</div>
<div style="clear:both"></div>
<style type="text/css">
.site-content{ padding:0px;}
.term-bar{ display:none;}
</style>
<?php get_footer(); ?>

<script>
  $('.openLoginDialog').on('click',function(e){
    e.preventDefault();
    open_signup_popup()
  })
  // const html = document.getElementsByTagName('html')
  // console.log($(html).attr('font-size'))
</script>

4. 找到sszas.cn\wp-content\themes\ripro\assets\css\diy.css文件

5. 把下面代码粘贴到最后面保存

/*VIP介绍*/
.vip-banner .vipbj h2 {
    text-align: center;
    font-size: 2rem;
    color: #fff
}
.vip-banner .vipbj p {
    text-align: center;
    font-size: 1rem;
    color: #fff
}
.vip-banner {
    background: url(https://www.mobanweb.com/wp-content/themes/ripro-chlid/assets/images/comvip-banner.png) no-repeat center;
    position: relative;
    width: 100%;
    height: 246px;
    position: relative;
}
.vip-banner-bg {
    background-position: center;
    background-size: cover;
    height: 100%
}
.vip-banner .vipbj {
    position: absolute;
    width: 100%;
    top: 20%
}


.vip-slogan-container{
    display: flex;
    justify-content: center; 
    align-items: center; 
}
.vip-slogan {
    /* max-width: 1200px; */
    width:1200px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    border-radius: 5px;
}
.vip-slogan-box {
    width:33.3%;
    min-width: 33.3%;
    max-width:33.3%;
    border: 1px solid #f4f4f4;
    list-style-type: none;
    display: flex;
    justify-content: center;
    /* padding:0 60px 0 60px; */
}
@media screen and (max-width:600px){
    .vip-slogan {
        flex-direction: column;
    }
    .vip-slogan-box {
        width:100%;
        min-width: 100%;
        max-width:100%;
        justify-content: left;
    }
}
.vip-slogan-text{
    font-size:14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vip-slogan-box:nth-of-type(-n+3) {
    border-bottom: 0
}

.vip-slogan-box i {
    width: 100px;
    line-height: 100px;
    display: inline-block;
    background-image: linear-gradient(90deg, #ed1c24 0, #fb8f02 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 45px;
    text-align: center;
    vertical-align: middle
}

.vip-slogan-text p:first-child {
    font-size: 18px;
    color: #575959
}
.container-vip {
    width: 1250px
}
.vip-content {
    text-align: center;
    margin-bottom: 50px
}

.module-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* text-align: center; */
    margin-top: 40px
}
.module-line .left-arrow {
    background: url(https://www.mobanweb.com/wp-content/themes/ripro-chlid/assets/images/vip-left.png)
}
.module-line .right-arrow {
    background: url(https://www.mobanweb.com/wp-content/themes/ripro-chlid/assets/images/vip-right.png)
}
.module-line .arrow {
    width: 84px;
    height: 16px
}
.module-line .text {
    font-size: 1.3rem;
    color: #4c4c4c;
    margin: 0 10px
}
.module-line span {
    display: inline-block;
*display:inline;
*zoom:1;
}

.vip-banner .vipbj>a {
    width: 170px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    border-radius: 25px;
    background-image: linear-gradient(90deg, #ed1c24 0, #fb8f02 100%);
    color: #fff;
    margin: 0 auto;
    margin-top: 0;
    display: block;
    margin-top: 20px
}

.vip-row {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0;
    margin-left: 0;
    width: 100%;
    height: auto;
    zoom:1}

.vip-row:after,.vip-row:before {
    display: table;
    content: ''
}

.vip-block-wrapper {
    position: relative;
    display: flex;
    padding: 20px 0;
    height: 100%;
    justify-content: center
}

.vip-block-wrapper .vip-block-item {
    display: block;
    box-sizing: border-box;
    padding: 20px 40px;
    width: 33.333%;
    text-align: center;
}

.home-vipbox {
    padding: 1px 0px 38px 0px;
    border-radius: 8px;
    background: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.home-vipbox:hover {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(213,213,213,0.4);
}

p.vip-bt {
    color: #fff;
    margin: 0 auto;
    width: 100px;
    padding: 8px 0;
    border-radius: 26px;
}

.vip-block-item a p {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.vip-block-item:nth-child(n) a:hover p {
    box-shadow: 0 10px 20px rgba(245,47,62,.4);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    background-color: #f52f3e;
    background-repeat: repeat-y;
    background-image: -moz-linear-gradient(left,#f52f3e,#ff4c22);
    background-image: -webkit-linear-gradient(left,#f52f3e,#ff4c22);
    background-image: -o-linear-gradient(left,#f52f3e,#ff4c22);
    background-image: linear-gradient(left,#f52f3e,#ff4c22);
}

.vip-block-item:nth-child(1) >.home-vipbox {
    /* outline:1px solid rgba(245,210,47,0.24); */
    /* outline-offset:-8px; */
}

.vip-block-item:nth-child(1) h3 {
    color: #f5a02f;
    text-shadow: 0 5px 6px #ffe1b9;
}

.vip-block-item:nth-child(1) .vip-bt {
    background-image: -webkit-linear-gradient(left,#021b31,#001529);
}

.vip-block-item:nth-child(2) >.home-vipbox {
    /* outline:1px solid rgba(47,146,245,0.15); */
    /* outline-offset:-8px; */
}

.vip-block-item:nth-child(2) h3 {
    color: #1890ff;
    text-shadow: 0 5px 6px rgba(24,144,255,0.40);
}

.vip-block-item:nth-child(2) .vip-bt {
    background-image: -webkit-linear-gradient(left,#1390de,#2f9af5);
}

.vip-block-item:nth-child(3) >.home-vipbox {
    /* outline:1px solid rgba(245,47,47,0.2); */
    /* outline-offset:-8px; */
}

.vip-block-item:nth-child(3) h3 {
    color: #fd3d00;
    text-shadow: 0 5px 6px #ffb9b9;
}

.vip-block-item:nth-child(3) .vip-bt {
    background-image: -webkit-linear-gradient(left,#f1bc37,#fadb37);
}

p.vip-home-price {
    position: relative;
    font-size: 1.875rem;
    font-weight: bold;
    width: 200px;
    margin: 15px auto;
}

p.vip-home-price i {
    font-size: 16px;
}

@media (max-width: 768px) {
    .vip-block-wrapper {
        display:block
    }

    .vip-block-wrapper .vip-block-item {
        float: left;
        width: 100%;
        padding: 10px 0;
    }
}

.vip-block-wrapper .vip-block-item .icon {
    width: 20%;
    padding-top: 20px;
    margin: 0 auto;
}

.vip-block-wrapper .vip-block-item img {
    width: 100%;
    height: 60px;
}

.vip-block-wrapper .vip-block-item .content0-title {
    padding: 0;
    font-size: 1.875rem;
}
/*VIP介绍*/

6. 打开自己的网站控制台, 新建一个空白vip页面

7. 访问 域名/vip 就能打开vip页面了