看图说话：
V2小工具设置：
[rihide]
/*
* 原创v2小工具：afo子主题轮播图
*/
function afo_v2_widget_banner($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
// echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
$banner = $instance;
$b_cats = $banner['cats'];
//var_dump($banner);
ob_start();?>
<!-- 内容 -->
<section class="banner">
<div class="banner-bg">
<img src="<?php%20echo%20$banner['bg']%20?>" alt="<?php bloginfo('name'); ?>" />
</div>
<div class="banner-box">
<h3><?php echo $banner['title']; ?></h3>
<div class="search-group">
<div class="left-link">
<b class="all">
<i class="fa fa-star"></i>
<span>推荐分类</span>
</b>
<?php foreach ( $b_cats as $cat ) { ?>
<a href="<?php%20echo%20$cat['url'];%20?>" target="_blank" rel="nofollow"><?php echo $cat['title']; ?></a>
<?php } ?>
</div>
<form method="get" class="" action="/">
<input type="search" placeholder="输入关键字搜索" autocomplete="off" value="" name="s" required="required" class="">
<button type="submit"><i class="fa fa-search"></i>搜一搜</button>
</form>
<ul class="search-group-tags">
<?php
$tags_list = get_tags('orderby=count&order=DESC&number=20');
if($tags_list) {
foreach($tags_list as $tag) {
echo '<li><a target="_blank" href="'.get_tag_link($tag).'">'. $tag->name .'</a></li>';
}
}
?>
</ul>
</div>
</div>
</section>
<?php echo ob_get_clean();
echo $args['after_widget'];
}
CSF::createWidget('afo_v2_widget_banner', array(
'title' => 'afo-首页模块：轮播图',
'classname' => 'afo-widget-banner',
'description' => '轮播图',
'fields' => array(
array(
'id' => 'title',
'type' => 'text',
'title' => '标题',
'default'=> '海量优质UI设计源文件，免费下载！'
),
array(
'id' => 'bg',
'type' => 'upload',
'title' => '背景图片',
'library' => 'image',
'placeholder' => 'http://',
'button_title' => '上传',
'remove_title' => '删除',
'default' => '',
),
array(
'id' => 'cats',
'type' => 'group',
'title' => '推荐分类',
'fields' => array(
array(
'id' => 'title',
'type' => 'text',
'title' => '标题',
),
array(
'id' => 'url',
'type' => 'text',
'title' => '链接',
),
),
'default' => array(
array(
'title' => '分类名称',
'url' => '/',
),
),
),
),
));
/*
* 原创v2小工具：afo子主题轮播图
*/[/rihide]
[rihide]
/*afo子主题轮播图*/
.afo-widget-banner {
overflow: hidden;
background: #fff;
padding: 0;
}
.afo-widget-banner .banner-box {
position: relative;
z-index: 10;
}
.afo-widget-banner .banner-bg {
width: 100%;
height: 380px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.afo-widget-banner .banner-bg img {
filter: blur(10px);
min-width: 100%;
min-height: 100%;
transform: scale(1.2);
opacity: .8;
}
.afo-widget-banner h3 {
color: #fff;
font-family: Arial;
font-size: 26px;
margin: 60px 0;
font-weight: normal;
text-align: center;
}
/*子主题搜索组*/
.afo-widget-banner .search-group {
background: #fff;
margin-top: 40px;
border-radius: 4px;
padding: 40px;
}
.afo-widget-banner .search-group .left-link {
display: flex;
align-items: center;
}
.afo-widget-banner .search-group .left-link a {
display: inline-block;
font-size: 13px;
color: #606266;
font-family: Arial;
margin-right: 30px;
}
.afo-widget-banner .search-group .left-link .all {
display: inline-block;
display: flex;
align-items: center;
color: #e60012;
margin-right: 20px;
font-size: 13px;
}
.afo-widget-banner .search-group .left-link .all i {
font-size: 12px;
color: #fff;
padding: 4px;
border-radius: 4px;
background: #e60012;
margin-right: 10px;
background: linear-gradient(60deg,#e60012),#e60012);
}
.afo-widget-banner .search-group form {
margin: 40px 0;
border-radius: 4px;
overflow: hidden;
background: #f3f7fb;
position: relative;
}
.afo-widget-banner .search-group form input {
background: transparent !important;
border: 0;
height: 56px;
padding-left: 20px;
margin: 0;
font-size: 14px;
width: 100%;
}
.afo-widget-banner .search-group form input:focus{
outline: none;
}
.afo-widget-banner .search-group form button {
height: 100%;
border: 0;
color: #fff;
font-size: 16px;
letter-spacing: 1px;
background: #e60012;
padding: 0 20px;
cursor: pointer;
outline:none;
position: absolute;
top: 0;
right: 0;
}
.afo-widget-banner .search-group form button i {
margin-right: 5px;
}
.afo-widget-banner .search-group .search-group-tags {
padding: 0;
list-style: none;
overflow: hidden;
margin: 0 -10px -10px;
}
.afo-widget-banner .search-group .search-group-tags li {
width: 10%;
display: inline-block;
margin-bottom: 10px;
}
.afo-widget-banner .search-group .search-group-tags li a {
display: block;
font-size: 12px;
border: 1px solid #f3f7fb;
text-align: left;
color: #606266;
font-family: arial;
padding: 8px 10px;
line-height: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-radius: 3px;
transition: all .3s;
margin: 0 5px;
}
.afo-widget-banner .search-group .search-group-tags li a:hover {
background: #e60012;
color: #fff;
padding-left: 15px;
}
/*afo子主题轮播图*/[/rihide]