本期教程:幻灯片美化,搜索框美化,添加统计模块,添加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;}