本节主要讲解使用 Advanced Custom Fields PRO （自定义字段插件）进行网站轮播图banner开发，可用于企业网站，博客网站等。通过后台控制网站前台的轮播图片以及链接。
如果你有html和css基础会更加容易理解，如果没有也没关系，只要细心，相信你也一定可以完成。
自己开发的好处
节省资源，无多余代码，不依赖庞大的轮播滑块插件，更明显的优势：加载速度快，可定制性高。
准备工作
下载并安装启用自定义字段PRO插件：Advanced Custom Fields PRO
1.头部引入资源
以下代码添加到主题根目录下的：header.php （<?php wp_head(); ?> 标签之前）
<link href="//cdn.bootcdn.net/ajax/libs/flexslider/2.7.2/flexslider.min.css" rel="stylesheet">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//cdn.bootcdn.net/ajax/libs/flexslider/2.7.2/jquery.flexslider.min.js"></script>2.创建轮播结构
以下代码添加到主题根目录下的：index.php，任意展示的位置
<div class="flexslider">
<ul class="slides">
<li>
<a href="#">
<img src="图片地址">
</a>
</li>
</ul>
</div>3.添加自定义字段
（点击图片放大对照设置）
4.主题添加轮播设置
以下代码添加到主题根目录下的：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',
));
}
}5.调用轮播
以下代码添加到主题根目录下的：index.php，你想展示的任何位置（即替换第2步）
<div class="flexslider">
<ul class="slides">
<?php if( have_rows('slider', 'option') ): ?>
<?php while( have_rows('slider', 'option') ): the_row(); ?>
<li>
<a href="<?php the_sub_field('link'); ?>">
<?php
$img = get_sub_field('img');
if( !empty($img) ): ?>
<img src= "<?php echo $img['url']; ?>">
<?php endif; ?>
</a>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>6.大功告成！
附录：
- 视频片头演示代码来源：https://www.jq22.com
- 视频中引入轮播js，css，jQuery的CDN地址：https://www.bootcdn.cn
- flexslider 轮播文档地址：https://woocommerce.com/flexslider
- flexslider 轮播更多演示：http://flexslider.woothemes.com/index.html
- 小老虎壁纸来源于：http://www.netbian.com
