RiPro 主题美化教程+源码 (第三期)

作者 : 小姬推荐 发布时间: 2019-12-22 文章热度:287 共13683个字,阅读需35分钟。 本文内容有更新 字体:
  • 文章介绍
  • 本期内容:添加VIP引导页,首页幻灯片美化,添加站点统计模块,默认修改首页五列布局

    效果展示(一)

    RiPro 主题美化教程+源码 (第三期)-高岸姬

    效果展示(二)

    RiPro 主题美化教程+源码 (第三期)-高岸姬

    效果展示(三)

    RiPro 主题美化教程+源码 (第三期)-高岸姬

    教程一、添加VIP引导页
    第一步:ripro -> parts 目录下navbar.php,在“<div class=”actions”>”和“<?php if (is_site_shop_open()) : ?>”之间添加如下代码

    1
    2
    3
    4
    5
    6
    7
    <div title="加入VIP,免费下载全站素材" class="menu-head_you-container">
                        <ul id="menu-head_you" class="menu">
                            <li id="menu-item-967" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-967">
                                <a href="vip"><i class="fa fa-diamond"></i> 开通会员</a>
                            </li>
                        </ul>
                    </div>

    第二步:ripro -> pages目录下添加 vip.php,录入如下代码并保存

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    <?php
    /**
     * Template name: 会员介绍
     * Description:   A VIP introduction page
     */
    $vip_site = _cao( 'homevip_field');
    $vip_mone = _cao( 'homevip_montext');
    $homevip_group = _cao('homevip_group');
    get_header();
    ?>
    <div class="vip-banner">
            <img src="<?php echo esc_url( $vip_site['homevip_topimg'] ); ?>">
            <div class="vipbj">
                <h2><?php echo $vip_site['homevip_top_title']; ?></h2>
                <p><?php echo $vip_site['homevip_top_description']; ?></p>
                <?php if ($vip_site['homevip_top_title']) : ?>
                <a href="<?php echo home_url()?>/user?action=vip" title="" target="_blank"><?php echo $vip_site['homevip_top_text']; ?></a>
                <?php endif; ?>
            </div>
    </div>
    <div class="module-line">
        <span class="arrow left-arrow"></span>
        <span class="text"><?php echo _cao('homevip_numtext');?></span>
        <span class="arrow right-arrow"></span>
    </div>
    <div class="row vip-slogan">
        <?php if (!empty($homevip_group)) {
            foreach ($homevip_group as $key => $link) {
            echo '<div class="col-xs-12 col-sm-6 col-md-4 vip-slogan-box"><i class="'.$link['_ico'].'"></i><div class="vip-slogan-text"><p>'.$link['_text1'].'</p><p>'.$link['_text2'].'</p></div></div>';
            }
        }?> 
    </div>
    <div class="container">
      <article class="single-content" id="post-<?php the_ID(); ?>" <?php post_class( 'post vip' ); ?>>
        <div class="module-line">
            <span class="arrow left-arrow"></span>
            <span class="text"><?php echo $vip_mone['_title1']; ?></span>
            <span class="arrow right-arrow"></span>
          <div class="vip-desc"><?php echo $vip_mone['_title2']; ?></div>
        </div>
        <div class="container">
          <div class="vip-row vip-block-wrapper" style="padding-bottom: 0; padding-top: 30px; margin-bottom: 0; ">
           
            <?php
              $vip_pay_setting = _cao('vip-pay-setting');
              foreach ($vip_pay_setting as $key => $item) {
                echo '<div class="vip-block-item"><div class="home-vipbox"><div class="icon">';
                echo '<img src="'.$item['vipico'].'"> </div>';
                if ($item['daynum'] == 7) {
                    echo '<h3 class="content0-title">包周会员</h3>';
                    echo '<p class="vip-home-price">'.$item['price'].'<i>'._cao('site_money_ua').'</i></p>';
                    echo '<p>周费VIP '.$item['daynum'].'天 福利</p>';
                }elseif ($item['daynum'] == 30 || $item['daynum'] == 31){
                    echo '<h3 class="content0-title">包月会员</h3>';
                    echo '<p class="vip-home-price">'.$item['price'].'<i>'._cao('site_money_ua').'</i></p>';
                    echo '<p>月费VIP '.$item['daynum'].'天 福利</p>';
                }elseif ($item['daynum'] == 365){
                    echo '<h3 class="content0-title">包年会员</h3>';
                    echo '<p class="vip-home-price">'.$item['price'].'<i>'._cao('site_money_ua').'</i></p>';
                    echo '<p>年费VIP '.$item['daynum'].'天 福利</p>';
                }elseif ($item['daynum'] == 9999){
                    echo '<h3 class="content0-title">终身会员</h3>';
                    echo '<p class="vip-home-price">'.$item['price'].'<i>'._cao('site_money_ua').'</i></p>';
                    echo '<p>终身VIP 终身 福利</p>';
                }else{
                    echo '<h3 class="content0-title">请后台设置</h3>';
                }
                echo '<p>'.$item['description1'].'</p>';
                if ($item['daynum'] == 7 || $item['daynum'] == 30 || $item['daynum'] == 31 || $item['daynum'] == 365 ){
                    echo '<p>每天可下载'._cao('vip_down_num').'个VIP资源</p>';
                }elseif ($item['daynum'] == 9999){
                    echo '<p>每天可下载'._cao('boosvip_down_num').'个VIP资源</p>';
                }
                echo '<p>'.$item['description2'].'</p>';
                echo '<a href="'.home_url().'/user?action=vip"><p class="vip-bt">开通</p></a>';
                echo '</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(); ?>



    第三步:ripro -> inc -> codestar-framework -> options 目录下打开 options.theme.php,搜索“// 商城-佣金设置并跳转到该位置”,在该备注上方“));”后添加如下代码

    001
    002
    003
    004
    005
    006
    007
    008
    009
    010
    011
    012
    013
    014
    015
    016
    017
    018
    019
    020
    021
    022
    023
    024
    025
    026
    027
    028
    029
    030
    031
    032
    033
    034
    035
    036
    037
    038
    039
    040
    041
    042
    043
    044
    045
    046
    047
    048
    049
    050
    051
    052
    053
    054
    055
    056
    057
    058
    059
    060
    061
    062
    063
    064
    065
    066
    067
    068
    069
    070
    071
    072
    073
    074
    075
    076
    077
    078
    079
    080
    081
    082
    083
    084
    085
    086
    087
    088
    089
    090
    091
    092
    093
    094
    095
    096
    097
    098
    099
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    //
    // Field: VIP页设置
    //
    CSF::createSection($prefix, array(
        'parent' => 'shop_fields',
        'title'  => 'VIP页设置',
        'icon'   => 'fa fa-circle',
        'fields' => array(
            array(
                'id'     => 'homevip_field',
                'type'   => 'fieldset',
                'title'  => '头部大图相关设置',
                'fields' => array(
                    array(
                        'id'         => 'homevip_topimg',
                        'type'       => 'upload',
                        'title'      => 'VIP引导页头部大图',
                        'dsec'       => '上传一张显示在VIP引导页的大图',
                        'default'    => get_stylesheet_directory_uri() . '/assets/images/comvip-banner.png',
                    ),
                    array(
                        'id'      => 'homevip_top_title',
                        'type'    => 'text',
                        'title'   => '头部大图文字',
                        'default' => '开通VIP独享海量下载特权',
                    ),
                    array(
                        'id'      => 'homevip_top_description',
                        'type'    => 'text',
                        'title'   => '头部大图描述',
                        'default' => '现在努力只为 不再仰望大神的后背!',
                    ),
                    array(
                        'id'      => 'homevip_top_switcher',
                        'type'    => 'switcher',
                        'title'   => '头部大图按钮开关',
                        'default' => true,
                    ),
                    array(
                        'id'      => 'homevip_top_text',
                        'type'    => 'text',
                        'title'   => '按钮文字',
                        'default' => '开通会员',
                        'dependency' => array('homevip_top_switcher', '==', 'true'),
                    ),
                ),
            ),
             array(
                'type'    => 'notice',
                'style'   => 'success',
                'content' => '注意,这里添加特权说明时,请添加3或3的倍数个,不然不美观!!!特权图标示例 <span style="color:red;">fa fa-vimeo-square</span> <a  target="_blank">图标获取地址:http://fontawesome.dashgame.com/</a>',
                'dependency' => array('is_show_homevip', '==', 'true'),
            ),
            array(
                'id'    => 'homevip_numtext',
                'type'   => 'text',
                'title'     => 'VIP特权模块标题',
                'default' => '会员尊享6项特权',
            ),
             array(
              'id'        => 'homevip_group',
              'type'      => 'group',
              'title'     => 'VIP特权说明',
              'label'     => '请添加3或3的倍数个,不然不美观!!!',
              'max'       => '6',
              'fields'    => array(
                array(
                  'id'    => '_ico',
                  'type'  => 'text',
                  'title' => '特权图标',
                  'default'=>'fa fa-vimeo-square',
                ),
                array(
                  'id'    => '_text1',
                  'type'  => 'text',
                  'title' => '特权说明-1(大标题)',
                  'default'=>'1000+资源,无限量下载',
                ),
                array(
                  'id'    => '_text2',
                  'type'  => 'text',
                  'title' => '特权说明-2',
                  'default'=>'真正的海量,无套路,诚意满满',
                ),
              ),
              'default' => array(
                    array(
                        '_ico'  => 'fa fa-vimeo-square',
                        '_text1'=> '1000+资源,无限量下载',
                        '_text2'=> '真正的海量,无套路,诚意满满',
                    ),
                ),
            ),
            array(
                'id'    => 'homevip_montext',
                'type'   => 'fieldset',
                'title'     => 'VIP资费设置',
                'fields' => array(
                  array(
                    'id'    => '_title1',
                    'type'  => 'text',
                    'title' => '标题-1',
                    'default'=>'VIP会员资费介绍',
                  ),
                  array(
                    'id'    => '_title2',
                    'type'  => 'text',
                    'title' => '标题-2',
                    'attributes' => array(
                        'style' => 'width: 100%;',
                     ),
                    'default'=>'在这里,会员每平均10个用户开通会员, 下载资源 100+份~',
                  ),
                ),
            ),
            
        ),
    ));

    第四步:主题目录打开 functions.php ,搜索“pages/tags.php”并跳转到该处,换一行添加

    1
    'pages/vip.php' => array('会员介绍', 'vip'),

    注:第四步作用是将vip引导页设为默认添加页面,这一步不强求大家添加,视个人喜好而定


    教程二、添加统计模块(本人是单独分离,网上大多的方法是集成到“catbox2.php”内)
    第一步:ripro -> inc -> codestar-framework -> options 目录下打开 options.theme.php,搜索“‘lastpost’ => ‘最新文章展示’”并跳转到该处,换一行添加

    1
    'census'  => '统计模块',

    第二步:ripro -> parts -> home-mode目录下新建“census.php”,并添加如下代码

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <?php
    $mode_census = _cao('mode_census');
    $count_posts = wp_count_posts();
    $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");
    ob_start(); ?>
    <div class="section text-center pb-0" style="padding-top:20px; height:75px;">
      <div class="container">
        <div class="alert alert-modern alert-dark">
          <div class="alert-content">
            <span class="type_icont_2"><i class="fa fa-bell-o"></i> 博主统计 </span>
            <span class="description-17codesign">
              <p>  资源总数:<?php echo $published_posts = $count_posts->publish;?>个   &#3665;   注册用户:<?php echo $users; ?>位   &#3665;   本周更新:<?php echo get_week_post_count(); ?>篇   &#3665;   今日更新:<?php echo WeeklyUpdate();?>篇  </p>
            </span> 
          </div>
        </div>
      </div>
    </div>

    第三步:主题目录打开 functions.php ,在最后一行后面添加

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 每周更新
    function get_week_post_count(){
        $date_query = array(
            array(
                'after'=>'1 week ago'
            )
        );$args = array(
            'post_type' => 'post',
            'post_status'=>'publish',
            'date_query' => $date_query,
            'no_found_rows' => true,
            'suppress_filters' => true,
            'fields'=>'ids',
            'posts_per_page'=>-1
        );
        $query = new WP_Query( $args );
        return $query->post_count;
    }
    // 每周日新
    function WeeklyUpdate() {
        $today = getdate();
        $query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);
        $postsNumber = $query->found_posts;
        echo $postsNumber;
    }

    教程三、修改幻灯片布局样式
    第一步:ripro -> parts -> home-mode -> slider.php,第五行到第九行替换为如下代码

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    <div class="section">
                <div class="container">
                    <div class="module slider big owl nav-white <?php echo esc_attr( $mode_slider['autoplay'] ? ' autoplay' : '' ); ?>">
                        <?php foreach ($mode_slider['diy_data'] as $key => $item) {?>
                        <article class="post lazyload visible" data-bg="<?php echo esc_url( $item['_img'] );?>">
                            <div class="container">
                                <a target="_blank" class="u-permalink" href="<?php echo esc_url( $item['_href'] );?>"></a>
                            </div>
                        </article>
                        <?php } ?>
                    </div>
                </div>
            </div>

    声明:在第二期分享中有人提出我所发布的资源存在抄袭情况,对此我不想与你浪费什么口舌,本人所做美化的css来源于“素材虎”,并对此进行了部分修改,以达到正常显示的目的,本人美化没有抄袭过你们任何人的源码,所有美化内容仿至“素材虎”,VIP角标仿至“WP迷死

     

    分享的css文件默认首页显示5列布局,不喜欢的自行删除所对应的css代码,后期教程发布完后会针对部分支持者提供本人所美化和二开的源码程序一套(整站打包),到时候请注意接收我的艾特信息


    请注意:VIP页面有额外功能没有上传代码,请大家及时改正(除教程发布的代码外,需额外添加其他设置选项)
    ripro -> inc -> codestar-framework -> options 目录下打开 options.theme.php,搜索“开通套餐设置”,定位到该结果出,修改该处设置

    array(
                'id'      => 'vip-pay-setting',
                'type'    => 'repeater',
                'title'   => '开通套餐设置(' . _cao('site_vip_name') . ')',
                'max'            => '3',
                'fields'  => array(
                        array(
                        'id'      => 'vipico',
                        'type'    => 'upload',
                        'title'   => 'VIP图标',
                        'desc'    => '上传一张png图片作为VIP展示图',
                                'default'    => get_stylesheet_directory_uri() . '/assets/images/vip.png',
                    ),
                    array(
                        'id'      => 'daynum',
                        'type'    => 'text',
                        'default' => '30',
                        'desc'    => '比如你想设置一个套餐是月费,则填写30,如果要设置终身会员套餐,填写:9999',
                        'title'   => '开通天数',
                    ),
                    array(
                        'id'      => 'price',
                        'type'    => 'text',
                        'default' => '20',
                        'desc'    => '此套餐所需的' . _cao('site_money_ua') . '数量,例: 会员一天需要1,设置一个月费则是30,如果填写为15,则相当于在打折',
                        'title'   => '套餐价格',
                    ),
                    array(
                        'id'      => 'color',
                        'type'    => 'color',
                        'default' => '#ff6a6d',
                        'title'   => '背景颜色',
                    ),
                    array(
                        'id'      => 'description1',
                        'type'    => 'text',
                        'title'   => 'VIP特权说明-1',
                        'default' => '享受下载折扣及免费下载相应资源',
                    ),
                    array(
                        'id'      => 'description2',
                        'type'    => 'text',
                        'title'   => 'VIP特权说明-2',
                        'default' => '急速网盘无广告',
                    ),
                    
                ),
                'default' => array(
                    array(
                            'vipico'=> get_stylesheet_directory_uri() . '/assets/images/vip.png',
                        'daynum' => '30',
                        'price'  => '10',
                        'color'  => '#ff6a6d',
                        'description1'=> '享受下载折扣及免费下载相应资源',
                        'description2'=> '急速网盘无广告',
                    ),
                ),
            ),

    VIP引导页设置项缺失,现已补上缺失代码

    素材及CSS

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有J币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.gaoanj.cn",如遇到无法解压的请联系管理员!

    高岸姬 » RiPro 主题美化教程+源码 (第三期)
    4
    +860天安全运行
    高岸姬专注高端网站建设
    6
    +6篇本周更新
    我更新我快乐

    VIP免费下载全站资源

    立即了解