|
|
<?php
|
|
|
/**
|
|
|
* Tabs区块模板
|
|
|
* 支持自定义器设置和短代码调用
|
|
|
*/
|
|
|
|
|
|
// 防止直接访问
|
|
|
if (!defined('ABSPATH')) {
|
|
|
exit;
|
|
|
}
|
|
|
|
|
|
// 获取短代码参数（如果通过短代码调用）
|
|
|
global $tabs_shortcode_atts;
|
|
|
$is_shortcode = !empty($tabs_shortcode_atts) && is_array($tabs_shortcode_atts);
|
|
|
|
|
|
// 获取容器设置
|
|
|
$container_id = $is_shortcode ? $tabs_shortcode_atts['id'] : 'nenghui-tabs';
|
|
|
$container_class = $is_shortcode ? $tabs_shortcode_atts['class'] : '';
|
|
|
$show_animation = $is_shortcode ? $tabs_shortcode_atts['show_animation'] : 'true';
|
|
|
|
|
|
// 获取选项卡数量设置
|
|
|
$tabs_count = $is_shortcode && !empty($tabs_shortcode_atts['tabs_count']) ?
|
|
|
intval($tabs_shortcode_atts['tabs_count']) :
|
|
|
get_theme_mod('tabs_count', 3);
|
|
|
|
|
|
// 获取实际有效的选项卡（只有设置了标题的才算有效）
|
|
|
$valid_tabs = array();
|
|
|
$max_check = max($tabs_count, 5); // 检查范围扩大到5或设定数量
|
|
|
for ($i = 1; $i <= $max_check; $i++) {
|
|
|
// 使用自定义器中设置的默认值
|
|
|
$tab_title = get_theme_mod('tab_title_' . $i, "选项卡 {$i}");
|
|
|
if (!empty(trim($tab_title))) {
|
|
|
$valid_tabs[] = $i;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 如果简码指定了数量，则只取前N个有效选项卡
|
|
|
if ($is_shortcode && !empty($tabs_shortcode_atts['tabs_count'])) {
|
|
|
$valid_tabs = array_slice($valid_tabs, 0, $tabs_count);
|
|
|
} else {
|
|
|
// 否则取设定数量的有效选项卡
|
|
|
$valid_tabs = array_slice($valid_tabs, 0, $tabs_count);
|
|
|
}
|
|
|
|
|
|
$first_tab_id = '';
|
|
|
$first_tab_title = '';
|
|
|
$first_tab_image = '';
|
|
|
$first_tab_image_alt = '';
|
|
|
$first_tab_button_text = '';
|
|
|
$first_tab_button_url = '';
|
|
|
|
|
|
// 获取第一个有效选项卡的信息作为默认显示
|
|
|
$default_placeholder = get_template_directory_uri() . '/assets/images/NaN-img.png';
|
|
|
if (!empty($valid_tabs)) {
|
|
|
$first_tab_index = $valid_tabs[0];
|
|
|
$first_tab_id = get_theme_mod('tab_id_' . $first_tab_index, "tab-{$first_tab_index}");
|
|
|
$first_tab_title = get_theme_mod('tab_main_title_' . $first_tab_index, "这是选项卡 {$first_tab_index} 的主要内容标题");
|
|
|
$first_tab_image = get_theme_mod('tab_image_' . $first_tab_index, $default_placeholder);
|
|
|
$first_tab_image_alt = get_theme_mod('tab_image_alt_' . $first_tab_index, "选项卡 {$first_tab_index} 图片");
|
|
|
$first_tab_button_text = get_theme_mod('tab_button_text_' . $first_tab_index, '了解更多');
|
|
|
$first_tab_button_url = get_theme_mod('tab_button_url_' . $first_tab_index, '#');
|
|
|
|
|
|
// 如果没有设置图片，使用默认占位图片
|
|
|
if (empty($first_tab_image)) {
|
|
|
$first_tab_image = $default_placeholder;
|
|
|
}
|
|
|
} else {
|
|
|
// 如果没有有效选项卡，使用第一个选项卡的默认值
|
|
|
$first_tab_id = 'tab-1';
|
|
|
$first_tab_title = '这是选项卡 1 的主要内容标题';
|
|
|
$first_tab_image = $default_placeholder;
|
|
|
$first_tab_image_alt = '选项卡 1 图片';
|
|
|
$first_tab_button_text = '了解更多';
|
|
|
$first_tab_button_url = '#';
|
|
|
// 确保至少有一个默认选项卡
|
|
|
$valid_tabs = array(1);
|
|
|
}
|
|
|
?>
|
|
|
|
|
|
<style>
|
|
|
/* Tabs区块样式 - 使用更具体的选择器避免冲突 */
|
|
|
#<?php echo esc_attr($container_id); ?>.nenghui-container,
|
|
|
.nenghui-container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
padding: 40px 20px;
|
|
|
font-family: 'NotoSans', Arial, sans-serif;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tabs,
|
|
|
.nenghui-container .nenghui-tabs {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 40px;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tab,
|
|
|
.nenghui-container .nenghui-tab {
|
|
|
padding: 12px 24px;
|
|
|
background-color: #e8e8e8;
|
|
|
border: none;
|
|
|
border-radius: 25px;
|
|
|
cursor: pointer;
|
|
|
font-size: 20px;
|
|
|
margin-right: 15px;
|
|
|
color: #666;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
font-weight: 500;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tab:hover,
|
|
|
.nenghui-container .nenghui-tab:hover {
|
|
|
background-color: #d0d0d0;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tab.active,
|
|
|
.nenghui-container .nenghui-tab.active {
|
|
|
background-color: #1e5a96;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tab.active:hover,
|
|
|
.nenghui-container .nenghui-tab.active:hover {
|
|
|
background-color: #1e5a96;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-content,
|
|
|
.nenghui-container .main-content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 60px;
|
|
|
border-radius: 20px;
|
|
|
padding: 10px;
|
|
|
background: #ffffff;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .content-left,
|
|
|
.nenghui-container .content-left {
|
|
|
flex: 1;
|
|
|
max-width: 50%;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .content-right,
|
|
|
.nenghui-container .content-right {
|
|
|
flex: 1;
|
|
|
max-width: 50%;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-title,
|
|
|
.nenghui-container .main-title {
|
|
|
font-size: 48px;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
line-height: 1.2;
|
|
|
margin-bottom: 30px;
|
|
|
transition: all 0.5s ease;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-title .highlight,
|
|
|
.nenghui-container .main-title .highlight {
|
|
|
color: #1e5a96;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .learn-more-btn,
|
|
|
.nenghui-container .learn-more-btn {
|
|
|
background-color: #1e5a96;
|
|
|
color: white;
|
|
|
padding: 15px 30px;
|
|
|
border: none;
|
|
|
border-radius: 25px;
|
|
|
font-size: 16px;
|
|
|
cursor: pointer;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
text-decoration: none;
|
|
|
transition: all 0.5s ease;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .learn-more-btn:hover,
|
|
|
.nenghui-container .learn-more-btn:hover {
|
|
|
background-color: #164a7a;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .learn-more-btn .arrow,
|
|
|
.nenghui-container .learn-more-btn .arrow {
|
|
|
font-size: 14px;
|
|
|
transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .learn-more-btn:hover .arrow,
|
|
|
.nenghui-container .learn-more-btn:hover .arrow {
|
|
|
transform: translateX(3px);
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .tab-image,
|
|
|
.nenghui-container .tab-image {
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
border-radius: 15px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .tab-image img,
|
|
|
.nenghui-container .tab-image img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
border-radius: 15px;
|
|
|
transition: all 0.5s ease;
|
|
|
}
|
|
|
|
|
|
/* 当没有图片时的占位样式 */
|
|
|
#<?php echo esc_attr($container_id); ?> .tab-image:empty::before,
|
|
|
.nenghui-container .tab-image:empty::before {
|
|
|
content: "暂无图片";
|
|
|
color: #999;
|
|
|
font-size: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
/* 动画效果类 */
|
|
|
#<?php echo esc_attr($container_id); ?> .fade-out,
|
|
|
.nenghui-container .fade-out {
|
|
|
opacity: 0;
|
|
|
transform: translateY(20px);
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .fade-in,
|
|
|
.nenghui-container .fade-in {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .content-left,
|
|
|
.nenghui-container .content-left {
|
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .content-right,
|
|
|
.nenghui-container .content-right {
|
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 1024px) {
|
|
|
#<?php echo esc_attr($container_id); ?>.nenghui-container,
|
|
|
.nenghui-container {
|
|
|
max-width: 95%;
|
|
|
padding: 40px 15px;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-content,
|
|
|
.nenghui-container .main-content {
|
|
|
gap: 40px;
|
|
|
padding: 40px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
#<?php echo esc_attr($container_id); ?>.nenghui-container,
|
|
|
.nenghui-container {
|
|
|
padding: 30px 15px;
|
|
|
border-radius: 15px;
|
|
|
max-width: 90%; /* Increase max-width for mobile */
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-content,
|
|
|
.nenghui-container .main-content {
|
|
|
flex-direction: column;
|
|
|
padding: 30px 20px;
|
|
|
gap: 30px;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .content-left,
|
|
|
.nenghui-container .content-left,
|
|
|
#<?php echo esc_attr($container_id); ?> .content-right,
|
|
|
.nenghui-container .content-right {
|
|
|
width: 100%;
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-title,
|
|
|
.nenghui-container .main-title {
|
|
|
font-size: 32px;
|
|
|
text-align: center;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tabs,
|
|
|
.nenghui-container .nenghui-tabs {
|
|
|
flex-wrap: wrap;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tab,
|
|
|
.nenghui-container .nenghui-tab {
|
|
|
font-size: 13px;
|
|
|
padding: 10px 18px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .tab-image,
|
|
|
.nenghui-container .tab-image {
|
|
|
height: auto;
|
|
|
width: 100%;
|
|
|
max-width: 80%;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .tab-image img,
|
|
|
.nenghui-container .tab-image img {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
#<?php echo esc_attr($container_id); ?>.nenghui-container,
|
|
|
.nenghui-container {
|
|
|
padding: 20px 10px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-content,
|
|
|
.nenghui-container .main-content {
|
|
|
padding: 20px 15px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .main-title,
|
|
|
.nenghui-container .main-title {
|
|
|
font-size: 28px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .nenghui-tab,
|
|
|
.nenghui-container .nenghui-tab {
|
|
|
font-size: 12px;
|
|
|
padding: 8px 16px;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .learn-more-btn,
|
|
|
.nenghui-container .learn-more-btn {
|
|
|
padding: 12px 24px;
|
|
|
font-size: 14px;
|
|
|
margin: 0 auto;
|
|
|
display: inline-flex;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .content-left,
|
|
|
.nenghui-container .content-left {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
#<?php echo esc_attr($container_id); ?> .tab-image,
|
|
|
.nenghui-container .tab-image {
|
|
|
max-width: 90%;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<div id="<?php echo esc_attr($container_id); ?>" class="nenghui-container <?php echo esc_attr($container_class); ?>" data-aos="fade-up">
|
|
|
<!-- 选项卡导航 -->
|
|
|
<div class="nenghui-tabs" data-aos="fade-up" data-aos-delay="200">
|
|
|
<?php
|
|
|
if (is_array($valid_tabs) && !empty($valid_tabs)) {
|
|
|
foreach ($valid_tabs as $index => $i) {
|
|
|
$tab_title = get_theme_mod('tab_title_' . $i, "选项卡 {$i}");
|
|
|
$tab_id = get_theme_mod('tab_id_' . $i, "tab-{$i}");
|
|
|
|
|
|
if (!empty($tab_title)) {
|
|
|
$active_class = ($index == 0) ? ' active' : '';
|
|
|
echo '<button class="nenghui-tab' . $active_class . '" data-nenghui-tab="' . esc_attr($tab_id) . '">';
|
|
|
echo esc_html($tab_title);
|
|
|
echo '</button>';
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
// 如果没有有效选项卡，显示提示信息
|
|
|
echo '<div style="text-align: center; padding: 20px; color: #666;">请在自定义器中设置选项卡内容</div>';
|
|
|
}
|
|
|
?>
|
|
|
</div>
|
|
|
<!-- 主要内容区域 -->
|
|
|
<div class="main-content" data-aos="fade-up" data-aos-delay="400">
|
|
|
<div class="content-left" data-aos="fade-up" data-aos-delay="600">
|
|
|
<h1 class="main-title">
|
|
|
<?php echo wp_kses_post($first_tab_title); ?>
|
|
|
</h1>
|
|
|
<?php if (!empty($first_tab_button_text)) : ?>
|
|
|
<a href="<?php echo esc_url($first_tab_button_url); ?>" class="learn-more-btn">
|
|
|
<span><?php echo esc_html($first_tab_button_text); ?></span>
|
|
|
</a>
|
|
|
<?php endif; ?>
|
|
|
</div>
|
|
|
<div class="content-right" data-aos="fade-up" data-aos-delay="800">
|
|
|
<div class="tab-image">
|
|
|
<img src="<?php echo esc_url($first_tab_image); ?>" alt="<?php echo esc_attr($first_tab_image_alt); ?>">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 选项卡切换功能
|
|
|
* 处理用户鼠标移入不同选项卡时的交互
|
|
|
*/
|
|
|
function initNenghuiTabs() {
|
|
|
const container = document.getElementById('<?php echo esc_js($container_id); ?>');
|
|
|
if (!container) return;
|
|
|
|
|
|
const nenghuiTabs = container.querySelectorAll('.nenghui-tab');
|
|
|
|
|
|
nenghuiTabs.forEach(nenghuiTab => {
|
|
|
nenghuiTab.addEventListener('mouseenter', function () {
|
|
|
// 移除所有选项卡的活动状态
|
|
|
nenghuiTabs.forEach(t => t.classList.remove('active'));
|
|
|
|
|
|
// 为当前鼠标移入的选项卡添加活动状态
|
|
|
this.classList.add('active');
|
|
|
|
|
|
// 获取选项卡类型
|
|
|
const nenghuiTabType = this.getAttribute('data-nenghui-tab');
|
|
|
|
|
|
// 根据选项卡类型更新内容
|
|
|
updateContent(nenghuiTabType, container);
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 根据选项卡类型更新页面内容
|
|
|
* @param {string} nenghuiTabType - 选项卡类型
|
|
|
*/
|
|
|
function updateContent(nenghuiTabType, container) {
|
|
|
// 获取PHP传递的选项卡数据
|
|
|
const tabsData = <?php
|
|
|
$tabs_data = array();
|
|
|
if (is_array($valid_tabs) && !empty($valid_tabs)) {
|
|
|
foreach ($valid_tabs as $i) {
|
|
|
// 使用自定义器中设置的默认值
|
|
|
$tab_title = get_theme_mod('tab_title_' . $i, "选项卡 {$i}");
|
|
|
if (!empty($tab_title)) {
|
|
|
$tab_id = get_theme_mod('tab_id_' . $i, "tab-{$i}");
|
|
|
$tab_main_title = get_theme_mod('tab_main_title_' . $i, "这是选项卡 {$i} 的主要内容标题");
|
|
|
$tab_image = get_theme_mod('tab_image_' . $i, $default_placeholder);
|
|
|
$tab_image_alt = get_theme_mod('tab_image_alt_' . $i, "选项卡 {$i} 图片");
|
|
|
$tab_button_text = get_theme_mod('tab_button_text_' . $i, '了解更多');
|
|
|
$tab_button_url = get_theme_mod('tab_button_url_' . $i, '#');
|
|
|
|
|
|
// 如果没有设置图片，使用默认占位图片
|
|
|
if (empty($tab_image)) {
|
|
|
$tab_image = $default_placeholder;
|
|
|
}
|
|
|
|
|
|
$tabs_data[$tab_id] = array(
|
|
|
'title' => wp_kses_post($tab_main_title),
|
|
|
'image' => $tab_image,
|
|
|
'imageAlt' => $tab_image_alt,
|
|
|
'buttonText' => $tab_button_text,
|
|
|
'buttonUrl' => $tab_button_url
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
echo json_encode($tabs_data, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
|
|
|
?>;
|
|
|
|
|
|
// 更新内容
|
|
|
if (tabsData[nenghuiTabType]) {
|
|
|
const data = tabsData[nenghuiTabType];
|
|
|
const contentLeft = container.querySelector('.content-left');
|
|
|
const contentRight = container.querySelector('.content-right');
|
|
|
const title = container.querySelector('.main-title');
|
|
|
const button = container.querySelector('.learn-more-btn');
|
|
|
const image = container.querySelector('.tab-image img');
|
|
|
|
|
|
// 添加淡出效果
|
|
|
contentLeft.classList.add('fade-out');
|
|
|
contentRight.classList.add('fade-out');
|
|
|
|
|
|
// 延迟更新内容，等待淡出动画完成
|
|
|
setTimeout(() => {
|
|
|
// 更新标题
|
|
|
if (title && data.title) {
|
|
|
title.innerHTML = data.title;
|
|
|
}
|
|
|
|
|
|
// 更新按钮
|
|
|
if (button && data.buttonText) {
|
|
|
button.href = data.buttonUrl;
|
|
|
const textSpan = button.querySelector('span:not(.arrow)');
|
|
|
if (textSpan) {
|
|
|
textSpan.textContent = data.buttonText;
|
|
|
} else {
|
|
|
button.innerHTML = '<span>' + data.buttonText + '</span><span class="arrow">→</span>';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 更新图片
|
|
|
if (image && data.image) {
|
|
|
image.src = data.image;
|
|
|
image.alt = data.imageAlt;
|
|
|
}
|
|
|
|
|
|
// 移除淡出效果，添加淡入效果
|
|
|
contentLeft.classList.remove('fade-out');
|
|
|
contentRight.classList.remove('fade-out');
|
|
|
contentLeft.classList.add('fade-in');
|
|
|
contentRight.classList.add('fade-in');
|
|
|
|
|
|
// 清理动画类
|
|
|
setTimeout(() => {
|
|
|
contentLeft.classList.remove('fade-in');
|
|
|
contentRight.classList.remove('fade-in');
|
|
|
}, 500);
|
|
|
}, 250); // 等待一半的过渡时间
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后初始化功能
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
initNenghuiTabs();
|
|
|
// 如果存在initLearnMoreButton函数则调用
|
|
|
if (typeof initLearnMoreButton === 'function') {
|
|
|
initLearnMoreButton();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
