WordPress主题开发-网站添加轮播Banner图片教程【ACF PRO自定义字段系列教程】

如何使用ACF 自定义字段插件来实现网站的轮播幻灯片?有些 Dedecms转WordPress 的老项目维护人员,经常问到。本节主要讲解使用 Advanced Custom Fields PRO (自定义字段插件专业版)进行网站轮播图banner开发,可用于企业网站,博客网站等。可以很方便的通过后台设置网站的轮播图和链接。如果你有html和css基础会更加容易理解,如果没有也没关系,只要细心,相信你也一定可以完成。

最终实现效果

 

1.安装Advanced Custom Fields 专业版

下载Advanced Custom Fields 专业版,在网站后台【插件】中【上传插件】安装并启用。

2.创建轮播图设置页

我们需要有一个设置页面来修改图片或者设置轮播图的跳转链接,就需要添加一个设置页面来更灵活的控制控制。如下图:

2.1 将以下代码添加到当前使用主题根目录下:functions.php 文件的(<?php 括号之后)

/**
 * 添加网站控制选项
 */

add_action('acf/init', 'my_acf_op_init');
function my_acf_op_init() {

    if( function_exists('acf_add_options_sub_page') ) {
    
        $parent = acf_add_options_page(array(
            'page_title'  => __('轮播设置'),
            'menu_title'  => __('轮播设置'),
            'menu_slug'   => 'theme-slider-settings',
            'redirect'    => false,
            'icon_url' => 'dashicons-images-alt2', 
        ));


    }
}

2.2创建成功后,在后台管理菜单中可见新增的【轮播设置】:

3.导入轮播图字段

插件激活启用后,需要在后台选择【字段】-【工具】导入轮播设置配置文件,

配置文件下载:点击下载

3.1选择导入字段组,将轮播图配置文件上传并导入。

3.2导入成功后显示

4.引入轮播静态文件

轮播图需要js和css来支持显示,需要引入js和css文件,点击下载静态资源文件

4.1将下载好的压缩包文件解压到当前使用主题的根目录

4.2解压完成后,在主题根目录下的functions.php 文件(<?php 括号之后)引入静态资源文件

/**
 * 加载轮播图样式
 */
function wpwu_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  wp_enqueue_style( 'wpwu-swiper',get_template_directory_uri() . '/assets/css/swiper.min.css');
  wp_enqueue_style( 'wpwu-font',get_template_directory_uri() . '/assets/css/font.css');
  wp_enqueue_style( 'wpwu-ups',get_template_directory_uri() . '/assets/css/ups.css');
  wp_enqueue_script( 'swiper-js', get_template_directory_uri() . '/assets/js/swiper.min.js', array( 'jquery' ), '20200914', true );
  wp_enqueue_script( 'ups-js', get_template_directory_uri() . '/assets/js/ups.js', array( 'jquery' ), '20200914', true );

}
add_action( 'wp_enqueue_scripts', 'wpwu_scripts' );

5.调用轮播

在主题根目录的 index.php 文件或者你想显示的地方,进行调用:具体的代码说明如图:

图片中的代码:

<div id="ups-banner">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      
    
          <?php if( have_rows('slider', 'option') ): ?>
              <?php while( have_rows('slider', 'option') ): the_row(); ?>
                
                  <div class="swiper-slide">
                    <div class="content">
                      <div class="txt">
                        <h3>
                          <?php the_sub_field('title-s'); ?>
                        </h3>
                        <p>
                        <?php the_sub_field('desc'); ?>
                        </p>
                      </div>
                      <a href="<?php the_sub_field('btn-a'); ?>" class="link">
                        <?php the_sub_field('btn'); ?>
                      </a>
                    </div>
                    <div class="img-fix">
                      <div class="img-inner">
                        <?php 
                            $img = get_sub_field('img');
                            if( !empty($img) ): ?>
                        <img src= "<?php echo $img['url']; ?>" class="img">
                        <?php endif; ?>
                        
                      </div>
                    </div>
                  </div>
      
              <?php endwhile; ?>
          <?php endif; ?>
   
    </div>
    <div class="bottom-nav">
      <div class="ups-icon-videoplay">
      </div>
      <div class="swiper-pagination">
      </div>
    </div>
    <div class="swiper-button-next">
    </div>
    <div class="swiper-button-prev">
    </div>
  </div>
</div>

6.上传并设置轮播图

附录:

如果你没有成功,可以下载启用教程中所使用的主题(只有轮播图功能)

主题下载:acf-轮播主题1.0

下载在后台【外观】中,安装启用。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

上一篇
Avada Website Builder Fbtw Compressor 800x500 1

免费下载 Avada v7.6.1 – 畅销全球的高级WorPress主题

相关文章