本节主要讲解使用 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.大功告成!

附录:

发表回复

您的电子邮箱地址不会被公开。

评论(1)

  • 无名 2022年5月19日 下午4:31

    列表文章循环怎么调用重复器