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

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

红袖普通用户

收藏 海报 链接