
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
下载在后台【外观】中,安装启用。
声明:本站所有文章,均为转载,服务器不存留任何文件接口数据存储与服务。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(3)
管理能出个分类筛选的教程吗
官方有调用说明,这样写无疑更方便!但是利用官方的做法也很方便,选择文章类型即可创建!
确实