WordPress 网站轮播图开发教程【Advanced Custom Fields PRO自定义字段插件系列教程】

本节主要讲解使用 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

艾瑞永久会员

收藏 海报 链接