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