mirror of https://github.com/vtrois/kratos
refactor: optimize carousel function
Seaton Jiang
parent
56cafe1ea0
commit
4256a2c8e1
|
|
@ -483,49 +483,43 @@ add_action('save_post', 'wpdocs_save_meta_box');
|
||||||
// 主页轮播
|
// 主页轮播
|
||||||
function kratos_carousel()
|
function kratos_carousel()
|
||||||
{
|
{
|
||||||
$output = '';
|
|
||||||
$carousel_img = null;
|
|
||||||
$carousel_url = null;
|
|
||||||
if (kratos_option('g_carousel', false)) {
|
if (kratos_option('g_carousel', false)) {
|
||||||
for ($i = 1; $i < 6; $i++) {
|
$slide = 0;
|
||||||
$carousel_img_[$i] = kratos_option("c_i_{$i}") ?: null;
|
$item = 0;
|
||||||
$carousel_url_[$i] = kratos_option("c_u_{$i}") ?: null;
|
$output = '<div id="indexCarousel" class="carousel article-carousel slide" data-ride="carousel"> <ol class="carousel-indicators">';
|
||||||
if ($carousel_img_[$i]) {
|
|
||||||
$carousel_img[] = $carousel_img_[$i];
|
if (!empty(kratos_option('carousel_group'))) {
|
||||||
$carousel_url[] = $carousel_url_[$i];
|
|
||||||
|
foreach (kratos_option('carousel_group') as $group_item) {
|
||||||
|
$active = null;
|
||||||
|
if ($slide == 0) {
|
||||||
|
$active = 'class="active"';
|
||||||
}
|
}
|
||||||
}
|
$output .= '<li data-target="#indexCarousel" data-slide-to="' . $slide . '" ' . $active . '></li>';
|
||||||
if (is_array($carousel_img)) {
|
$slide++;
|
||||||
$count = count($carousel_img);
|
|
||||||
} else {
|
|
||||||
$count = '0';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$output = '<div class="carousel article-carousel slide" id="carouselControls" data-ride="carousel"><ol class="carousel-indicators">';
|
|
||||||
|
|
||||||
for ($i = 0; $i < $count; $i++) {
|
|
||||||
$output .= '<li data-target="#carouselControls" data-slide-to="' . $i . '"';
|
|
||||||
if ($i == 0) $output .= 'class="active"';
|
|
||||||
$output .= '></li>';
|
|
||||||
};
|
|
||||||
$output .= '</ol><div class="carousel-inner">';
|
$output .= '</ol><div class="carousel-inner">';
|
||||||
|
|
||||||
for ($i = 0; $i < $count; $i++) {
|
foreach (kratos_option('carousel_group') as $group_item) {
|
||||||
$output .= '<div class="carousel-item';
|
$active = null;
|
||||||
if ($i == 0) $output .= ' active';
|
if ($item == 0) {
|
||||||
$output .= '">';
|
$active = 'active';
|
||||||
if (!empty($carousel_url[$i])) {
|
}
|
||||||
$output .= '<a href="' . $carousel_url[$i] . '" target="_blank"><img src="' . $carousel_img[$i] . '" class="d-block w-100"></a>';
|
$output .= '
|
||||||
} else {
|
<div class="carousel-item ' . $active . '">
|
||||||
$output .= '<img src="' . $carousel_img[$i] . '" class="d-block w-100">';
|
<a href="' . $group_item['c_url'] . '"><img src="' . $group_item['c_img'] . '" class="d-block w-100"></a>
|
||||||
|
<div class="carousel-caption d-none d-md-block">
|
||||||
|
<h5 style="color:' . $group_item['c_color'] . '">' . $group_item['c_title'] . '</h5>
|
||||||
|
<p style="color:' . $group_item['c_color'] . '">' . $group_item['c_subtitle'] . '</p>
|
||||||
|
</div>
|
||||||
|
</div>';
|
||||||
|
$item++;
|
||||||
}
|
}
|
||||||
$output .= "</div>";
|
|
||||||
};
|
|
||||||
|
|
||||||
$output .= '</div><a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span></a>';
|
$output .= '</div> <a class="carousel-control-prev" href="#indexCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#indexCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div>';
|
||||||
$output .= '<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span></a></div>';
|
|
||||||
}
|
}
|
||||||
if (is_array($carousel_img)) {
|
|
||||||
echo $output;
|
echo $output;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -238,7 +238,7 @@ CSF::createSection($prefix, array(
|
||||||
),
|
),
|
||||||
'default' => array(
|
'default' => array(
|
||||||
'g_wechat' => false,
|
'g_wechat' => false,
|
||||||
'g_wechat_url' => get_template_directory_uri() . '/assets/img/wechat.png',
|
'g_wechat_url' => get_template_directory_uri() . '/assets/img/200.png',
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
@ -325,100 +325,58 @@ CSF::createSection($prefix, array(
|
||||||
array(
|
array(
|
||||||
'id' => 'g_carousel',
|
'id' => 'g_carousel',
|
||||||
'type' => 'switcher',
|
'type' => 'switcher',
|
||||||
'title' => __('首页轮播', 'kratos'),
|
'title' => __('功能开关', 'kratos'),
|
||||||
'subtitle' => __('开启/关闭首页轮播功能', 'kratos'),
|
'subtitle' => __('开启/关闭首页轮播功能', 'kratos'),
|
||||||
'text_on' => __('开启', 'kratos'),
|
'text_on' => __('开启', 'kratos'),
|
||||||
'text_off' => __('关闭', 'kratos'),
|
'text_off' => __('关闭', 'kratos'),
|
||||||
'default' => false,
|
'default' => false,
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'id' => 'carousel_tabbed',
|
'id' => 'carousel_group',
|
||||||
'type' => 'tabbed',
|
'type' => 'group',
|
||||||
'tabs' => array(
|
'title' => '首页轮播',
|
||||||
array(
|
'subtitle' => '点击添加轮播内容，最多添加 7 个轮播内容',
|
||||||
'title' => '轮播一',
|
'min' => 1,
|
||||||
|
'max' => 7,
|
||||||
'fields' => array(
|
'fields' => array(
|
||||||
array(
|
array(
|
||||||
'id' => 'c_i_1',
|
'id' => 'c_id',
|
||||||
|
'type' => 'text',
|
||||||
|
'title' => __('唯一标识', 'kratos'),
|
||||||
|
'subtitle' => __('仅用于轮播标识，可以作为备注使用', 'kratos'),
|
||||||
|
),
|
||||||
|
array(
|
||||||
|
'id' => 'c_img',
|
||||||
'type' => 'upload',
|
'type' => 'upload',
|
||||||
'title' => __('轮播图片', 'kratos'),
|
'title' => __('轮播图片', 'kratos'),
|
||||||
|
'subtitle' => __('可以直接填写图片链接，也可以上传图片', 'kratos'),
|
||||||
'library' => 'image',
|
'library' => 'image',
|
||||||
'preview' => true,
|
'preview' => true,
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'id' => 'c_u_1',
|
'id' => 'c_url',
|
||||||
'type' => 'text',
|
'type' => 'text',
|
||||||
'title' => __('网址链接', 'kratos'),
|
'title' => __('网址链接', 'kratos'),
|
||||||
),
|
'subtitle' => __('需要填写完整的链接地址，包含协议头', 'kratos'),
|
||||||
),
|
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'title' => '轮播二',
|
'id' => 'c_title',
|
||||||
'fields' => array(
|
|
||||||
array(
|
|
||||||
'id' => 'c_i_2',
|
|
||||||
'type' => 'upload',
|
|
||||||
'title' => __('轮播图片', 'kratos'),
|
|
||||||
'library' => 'image',
|
|
||||||
'preview' => true,
|
|
||||||
),
|
|
||||||
array(
|
|
||||||
'id' => 'c_u_2',
|
|
||||||
'type' => 'text',
|
'type' => 'text',
|
||||||
'title' => __('网址链接', 'kratos'),
|
'title' => __('轮播标题', 'kratos'),
|
||||||
),
|
'subtitle' => __('选填项目，如果不填则不显示', 'kratos'),
|
||||||
),
|
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'title' => '轮播三',
|
'id' => 'c_subtitle',
|
||||||
'fields' => array(
|
'type' => 'textarea',
|
||||||
array(
|
'title' => __('轮播简介', 'kratos'),
|
||||||
'id' => 'c_i_3',
|
'subtitle' => __('选填项目，如果不填则不显示', 'kratos'),
|
||||||
'type' => 'upload',
|
|
||||||
'title' => __('轮播图片', 'kratos'),
|
|
||||||
'library' => 'image',
|
|
||||||
'preview' => true,
|
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'id' => 'c_u_3',
|
'id' => 'c_color',
|
||||||
'type' => 'text',
|
'type' => 'color',
|
||||||
'title' => __('网址链接', 'kratos'),
|
'default' => '#000',
|
||||||
),
|
'title' => __('文字颜色', 'kratos'),
|
||||||
),
|
'subtitle' => __('轮播标题和简介的颜色', 'kratos'),
|
||||||
),
|
|
||||||
array(
|
|
||||||
'title' => '轮播四',
|
|
||||||
'fields' => array(
|
|
||||||
array(
|
|
||||||
'id' => 'c_i_4',
|
|
||||||
'type' => 'upload',
|
|
||||||
'title' => __('轮播图片', 'kratos'),
|
|
||||||
'library' => 'image',
|
|
||||||
'preview' => true,
|
|
||||||
),
|
|
||||||
array(
|
|
||||||
'id' => 'c_u_4',
|
|
||||||
'type' => 'text',
|
|
||||||
'title' => __('网址链接', 'kratos'),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
array(
|
|
||||||
'title' => '轮播五',
|
|
||||||
'fields' => array(
|
|
||||||
array(
|
|
||||||
'id' => 'c_i_5',
|
|
||||||
'type' => 'upload',
|
|
||||||
'title' => __('轮播图片', 'kratos'),
|
|
||||||
'library' => 'image',
|
|
||||||
'preview' => true,
|
|
||||||
),
|
|
||||||
array(
|
|
||||||
'id' => 'c_u_5',
|
|
||||||
'type' => 'text',
|
|
||||||
'title' => __('网址链接', 'kratos'),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
@ -752,8 +710,8 @@ CSF::createSection($prefix, array(
|
||||||
),
|
),
|
||||||
'default' => array(
|
'default' => array(
|
||||||
'g_donate' => false,
|
'g_donate' => false,
|
||||||
'g_donate_wechat' => get_template_directory_uri() . '/assets/img/donate.png',
|
'g_donate_wechat' => get_template_directory_uri() . '/assets/img/200.png',
|
||||||
'g_donate_alipay' => get_template_directory_uri() . '/assets/img/donate.png',
|
'g_donate_alipay' => get_template_directory_uri() . '/assets/img/200.png',
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
65
style.css
65
style.css
|
|
@ -21,14 +21,15 @@ License URI: https://github.com/vtrois/kratos/blob/main/LICENSE
|
||||||
1. 全局
|
1. 全局
|
||||||
2. 导航
|
2. 导航
|
||||||
3. Banner
|
3. Banner
|
||||||
4. 分页按钮
|
4. 首页轮播
|
||||||
5. 文章列表
|
5. 分页按钮
|
||||||
6. 文章正文
|
6. 文章列表
|
||||||
7. 内容工具区
|
7. 文章正文
|
||||||
8. 文章评论
|
8. 内容工具区
|
||||||
9. 小工具
|
9. 文章评论
|
||||||
10. 404
|
10. 小工具
|
||||||
11. 页脚
|
11. 404
|
||||||
|
12. 页脚
|
||||||
|
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|
@ -510,7 +511,29 @@ button:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
4. 分页按钮
|
4. 首页轮播
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
|
.k-main .board .article-carousel {
|
||||||
|
margin: 0 0 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.k-main .board .article-carousel li {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
list-style: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.k-main .board .article-carousel .carousel-caption h5 {
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.k-main .board .article-carousel .carousel-caption p {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
5. 分页按钮
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .board .paginations > * {
|
.k-main .board .paginations > * {
|
||||||
|
|
@ -586,19 +609,9 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
5. 文章列表
|
6. 文章列表
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .board .article-carousel {
|
|
||||||
margin: 0 0 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-main .board .article-carousel li {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
list-style: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-main .board .article-panel {
|
.k-main .board .article-panel {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 0 23px;
|
margin: 0 0 23px;
|
||||||
|
|
@ -843,7 +856,7 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
6. 文章正文
|
7. 文章正文
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .details .article {
|
.k-main .details .article {
|
||||||
|
|
@ -1348,7 +1361,7 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
7. 内容工具区
|
8. 内容工具区
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .details .toolbar {
|
.k-main .details .toolbar {
|
||||||
|
|
@ -1543,7 +1556,7 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
8. 文章评论
|
9. 文章评论
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .details .comments {
|
.k-main .details .comments {
|
||||||
|
|
@ -1789,7 +1802,7 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
9. 小工具
|
10. 小工具
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .sidebar img {
|
.k-main .sidebar img {
|
||||||
|
|
@ -2229,7 +2242,7 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
10. 404
|
11. 404
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-main .page404 {
|
.k-main .page404 {
|
||||||
|
|
@ -2346,7 +2359,7 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
/*--------------------------------------------------------------
|
||||||
11. 页脚
|
12. 页脚
|
||||||
--------------------------------------------------------------*/
|
--------------------------------------------------------------*/
|
||||||
|
|
||||||
.k-footer {
|
.k-footer {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue