本期教大家美化RiPro主题首页幻灯片的大小修改,并附上设置教程,帮助新手快速掌握RiPro主题的相关设置与美化,展示效果可参考截图,360模板吧感谢大家的支持!

展示效果:

RiPro主题美化幻灯美化

美化教程:

1.打开:“/ripro/parts/home-mode/slider.php”文件,子主题也可参考本路径。

2.打开“slider.php”文件,并全部替换修改如下代码:(也可下载附件直接替换)

<?php
$mode_slider = _cao('mode_slider');
ob_start(); ?>
<?php if ($mode_slider['diy_slider']) : ?>
<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) {
        echo '<article class="post lazyload visible" data-bg="'.esc_url( $item['_img'] ).'">';
          echo '<div class="container">';
          echo '<a'.( $item['_blank'] ? ' target="_blank"' : '' ).' class="u-permalink" href="'.esc_url( $item['_href'] ).'"></a>';
          echo '</div>';
        echo '</article>';
    } ?>
        </div>
    </div>
  </div>
<?php else : ?>
  <?php 
    $args = array(
        'cat'       => $mode_slider['category'],
        'ignore_sticky_posts' => true,
        'post_status'         => 'publish',
        'posts_per_page'      => $mode_slider['count'],
        'offset'              => $mode_slider['offset'],
        'orderby'              => $mode_slider['orderby'],
    );
    $data = new WP_Query($args);
    if ($mode_slider['is_styles_rand']) {
        $mode_slider_style = mt_rand(0,1);
    }else{
        $mode_slider_style = $mode_slider['styles'];
    }
  ?>
  <?php if ($mode_slider_style == '1') : ?>
  <div class="section">
    <div class="container">
        <div class="module slider big owl nav-white<?php echo esc_attr( $mode_slider['autoplay'] ? ' autoplay' : '' ); ?>">
          <?php while ( $data->have_posts() ) : $data->the_post();
              $bg_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); 
              $bg_image_src = ($bg_image) ? $bg_image[0] : _the_theme_thumb_full();
              ?>
              <article <?php post_class( 'post lazyload visible' ); ?> data-bg="<?php echo esc_url( $bg_image_src ); ?>">
                <div class="entry-wrapper">
                  <?php cao_entry_header( array( 'tag' => 'h2', 'link' => false, 'white' => true, 'category' => true,'author'=>true ) ); ?>
                  <?php if ( $_get_excerpt = _get_excerpt(120) ) : ?>
                    <div class="entry-excerpt u-text-format">
                      <?php echo $_get_excerpt; ?>
                    </div>
                  <?php endif; ?>
                  <?php get_template_part( 'parts/entry-footer' ); ?>
                </div>
                <a<?php echo _target_blank();?> class="u-permalink" href="<?php echo esc_url( get_permalink() ); ?>"></a>
              </article>
            <?php endwhile; ?>
        </div>
    </div>
  </div>
  <?php else : ?>
  <div class="section bgcolor-fff pt-0">
      <div class="module slider center owl<?php echo esc_attr( $mode_slider['autoplay'] ? ' autoplay' : '' ); ?>">

        <?php while ( $data->have_posts() ) : $data->the_post();
            $bg_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); 
            $bg_image_src = ($bg_image) ? $bg_image[0] : _the_theme_thumb_full();
            ?>
            <article <?php post_class( 'post lazyload visible' ); ?> data-bg="<?php echo esc_url( $bg_image_src ); ?>">
              <div class="entry-wrapper">
                <?php cao_entry_header( array( 'tag' => 'h2', 'link' => false, 'white' => true, 'category' => true ,'author'=>true) ); ?>
                <?php if ( $_get_excerpt = _get_excerpt(120) ) : ?>
                  <div class="entry-excerpt u-text-format">
                    <?php echo $_get_excerpt; ?>
                  </div>
                <?php endif; ?>
                <?php get_template_part( 'parts/entry-footer' ); ?>
              </div>
              <a<?php echo _target_blank();?> class="u-permalink" href="<?php echo esc_url( get_permalink() ); ?>"></a>
            </article>
          <?php endwhile; ?>
        
      </div>
  </div>
  <?php endif;?>
<?php endif; ?>

<?php
wp_reset_postdata();
echo ob_get_clean();

3.打开WordPress后台:找到“RiPro主题设置”→“首页设置”→“幻灯片模块”,找到“自定义全屏幻灯片图片和链接”,将其打开,然后自定义幻灯图片即可。

RiPro主题美化设置

4.幻灯片像素大小推荐为:“1170像素×400像素”

教程说明:

1.增加默认的div包裹上即可,大约第四行

<div class="section">
  <div class="container">
默认内容
</div>
</div>
RiPro主题美化:首页全屏轮播幻灯片大小美化修改插图

 

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定,不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益,请联系我们进行处理。