本期教大家美化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主题美化:首页全屏轮播幻灯片大小美化修改插图

 

发表评论

后才能评论

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”,如密码还是错误请联系客服。

本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付技术服务费100+,请大家谅解!

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。