RiPro主题美化教程之VIP引导界面/滚动条/头像/LOGO

本期美化教程:添加VIP引导界面,美化滚动条,添加头像滚动,添加LOGO流光效果

效果展示

VIP引导界面教程:

1.  ripro -> parts -> navbar.php,在“<div class=”actions”>”和“<?php if (is_site_shop_open()) : ?>”之间添加如下代码

<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主题美化教程之个人中心菜单

2. ripro -> pages 目录新建 vip.php 文件,并添加如下代码

<?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(); ?>

3. ripro -> inc -> codestar-framework -> options -> options.theme.php,搜索“vip-pay-setting”,并将整个“array”数组替换为如下代码

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'=> '急速网盘无广告',
		),
    ),
),
123
实用教程

RiPro主题美化教程之个人中心菜单

2020-2-24 15:08:32

实用教程

RiPro主题美化教程之幻灯片/搜索框/统计模块/VIP角标/首页五列布局

2020-2-24 16:06:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索