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

本期教程：幻灯片美化，搜索框美化，添加统计模块，添加VIP角标，修改首页五列布局（可选）

效果展示

幻灯片美化教程：

1. ripro – > parts -> home-mode -> slider.php 文件，找到如下代码

<div class="section pt-0 pb-0">
    <div class="module slider big diy owl <?php echo esc_attr( $mode_slider['autoplay'] ? ' autoplay' : '' ); ?>">
    <?php foreach ($mode_slider['diy_data'] as $key => $item) {
        echo '<article class="post lazyload visible" data-bg="'.esc_url( $item['_img'] ).'">';
          echo '<div class="container">';
          echo '<h2 class="slider-title">'.$item['_title'].'</h2>';
          echo '<h3 class="slider-desc">'.$item['_desc'].'</h3>';
          echo '<a'.( $item['_blank'] ? ' target="_blank"' : '' ).' class="u-permalink" href="'.esc_url( $item['_href'] ).'"></a>';
          echo '</div>';
        echo '</article>';
    }?>
    </div>
</div>

2. 将如上代码替换为

<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" rel="noopener noreferrer">"></a>
				</div>
        	</article>
		<?php } ?>
    	</div>
	</div>
</div>

3. ripro -> assets -> css-> diy.css 添加如下样式

.section {padding-top: 20px;}