|
|
<?php
|
|
|
/**
|
|
|
* FAQ 区块模板
|
|
|
* 显示常见问题和答案，支持手风琴折叠效果
|
|
|
*/
|
|
|
|
|
|
// 防止直接访问
|
|
|
if (!defined('ABSPATH')) {
|
|
|
exit;
|
|
|
}
|
|
|
|
|
|
// 获取短代码参数
|
|
|
global $faq_shortcode_atts;
|
|
|
$id = isset($faq_shortcode_atts['id']) ? $faq_shortcode_atts['id'] : 'nenghui-faq';
|
|
|
$class = isset($faq_shortcode_atts['class']) ? $faq_shortcode_atts['class'] : '';
|
|
|
$title = isset($faq_shortcode_atts['title']) ? $faq_shortcode_atts['title'] : 'Frequently Asked Questions';
|
|
|
$posts_per_page = isset($faq_shortcode_atts['posts_per_page']) ? $faq_shortcode_atts['posts_per_page'] : '-1';
|
|
|
$order_by = isset($faq_shortcode_atts['order_by']) ? $faq_shortcode_atts['order_by'] : 'menu_order';
|
|
|
$order = isset($faq_shortcode_atts['order']) ? $faq_shortcode_atts['order'] : 'ASC';
|
|
|
$show_animation = isset($faq_shortcode_atts['show_animation']) ? $faq_shortcode_atts['show_animation'] : 'true';
|
|
|
|
|
|
// 构建查询参数
|
|
|
$query_args = array(
|
|
|
'post_type' => 'faq',
|
|
|
'post_status' => 'publish',
|
|
|
'posts_per_page' => intval($posts_per_page),
|
|
|
'orderby' => $order_by,
|
|
|
'order' => $order
|
|
|
);
|
|
|
|
|
|
// 执行查询
|
|
|
$faq_query = new WP_Query($query_args);
|
|
|
|
|
|
// 生成唯一ID
|
|
|
$unique_id = $id . '-' . uniqid();
|
|
|
?>
|
|
|
|
|
|
<section id="<?php echo esc_attr($unique_id); ?>" class="faq-section <?php echo esc_attr($class); ?>">
|
|
|
<div class="faq-container">
|
|
|
<?php if (!empty($title)): ?>
|
|
|
<div class="faq-header">
|
|
|
<h2 class="faq-title"><?php echo esc_html($title); ?></h2>
|
|
|
</div>
|
|
|
<?php endif; ?>
|
|
|
|
|
|
<?php if ($faq_query->have_posts()): ?>
|
|
|
<div class="faq-accordion">
|
|
|
<?php
|
|
|
$item_index = 0;
|
|
|
while ($faq_query->have_posts()):
|
|
|
$faq_query->the_post();
|
|
|
$item_index++;
|
|
|
$item_id = $unique_id . '-item-' . $item_index;
|
|
|
?>
|
|
|
<div class="faq-item" data-aos="<?php echo $show_animation === 'true' ? 'fade-up' : ''; ?>" data-aos-delay="<?php echo $item_index * 100; ?>">
|
|
|
<div class="faq-question" data-target="<?php echo esc_attr($item_id); ?>">
|
|
|
<h3 class="faq-question-title"><?php the_title(); ?></h3>
|
|
|
<span class="faq-toggle-icon">
|
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path class="faq-icon-horizontal" d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
<path class="faq-icon-vertical" d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="faq-answer" id="<?php echo esc_attr($item_id); ?>">
|
|
|
<div class="faq-answer-content">
|
|
|
<?php
|
|
|
// 显示内容，如果没有内容则显示摘要
|
|
|
$content = get_the_content();
|
|
|
if (!empty($content)) {
|
|
|
echo apply_filters('the_content', $content);
|
|
|
} else {
|
|
|
echo '<p>' . get_the_excerpt() . '</p>';
|
|
|
}
|
|
|
?>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<?php endwhile; ?>
|
|
|
</div>
|
|
|
<?php else: ?>
|
|
|
<div class="faq-no-content">
|
|
|
<p>暂无FAQ内容。</p>
|
|
|
</div>
|
|
|
<?php endif; ?>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<?php wp_reset_postdata(); ?>
|
|
|
|
|
|
<style>
|
|
|
.faq-section {
|
|
|
padding: 80px 0;
|
|
|
background-color: #f8f9fa;
|
|
|
}
|
|
|
|
|
|
.faq-container {
|
|
|
max-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
.faq-header {
|
|
|
text-align: center;
|
|
|
margin-bottom: 60px;
|
|
|
}
|
|
|
|
|
|
.faq-title {
|
|
|
font-size: 2.5rem;
|
|
|
font-weight: 700;
|
|
|
color: #333333;
|
|
|
margin: 0;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.faq-title::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: -15px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 80px;
|
|
|
height: 4px;
|
|
|
background: linear-gradient(135deg, #2cb5a9, #00699f);
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
.faq-accordion {
|
|
|
max-width: 900px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.faq-item {
|
|
|
margin-bottom: 20px;
|
|
|
border-radius: 12px;
|
|
|
overflow: hidden;
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
background: #ffffff;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-item:hover {
|
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
|
transform: translateY(-2px);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-question {
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
background-repeat: no-repeat;
|
|
|
padding: 25px 30px;
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.faq-question:hover {
|
|
|
background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/faq-title-bg.webp');
|
|
|
}
|
|
|
|
|
|
.faq-item.active .faq-question {
|
|
|
background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/faq-title-bg.webp');
|
|
|
}
|
|
|
|
|
|
.faq-question::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-question:hover::before {
|
|
|
background: rgba(0, 86, 179, 0.9);
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-question-title {
|
|
|
font-size: 1.2rem;
|
|
|
font-weight: 600;
|
|
|
color: #000000;
|
|
|
margin: 0;
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
line-height: 1.4;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-question:hover .faq-question-title,
|
|
|
.faq-item.active .faq-question .faq-question-title {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.faq-toggle-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
color: #000000;
|
|
|
transition: transform 0.3s ease, color 0.3s ease;
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
flex-shrink: 0;
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
|
|
|
.faq-question:hover .faq-toggle-icon,
|
|
|
.faq-item.active .faq-question .faq-toggle-icon {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.faq-item.active .faq-toggle-icon {
|
|
|
transform: rotate(45deg);
|
|
|
}
|
|
|
|
|
|
.faq-answer {
|
|
|
max-height: 0;
|
|
|
overflow: hidden;
|
|
|
transition: max-height 0.4s ease, padding 0.4s ease;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.faq-item.active .faq-answer {
|
|
|
max-height: 1000px;
|
|
|
padding: 30px;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content {
|
|
|
color: #555555;
|
|
|
line-height: 1.7;
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content p {
|
|
|
margin: 0 0 15px 0;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content p:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content ul,
|
|
|
.faq-answer-content ol {
|
|
|
margin: 15px 0;
|
|
|
padding-left: 25px;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content li {
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content strong {
|
|
|
color: #333333;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content a {
|
|
|
color: #007bff;
|
|
|
text-decoration: none;
|
|
|
transition: color 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content a:hover {
|
|
|
color: #0056b3;
|
|
|
text-decoration: underline;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.faq-no-content {
|
|
|
text-align: center;
|
|
|
padding: 60px 20px;
|
|
|
color: #666666;
|
|
|
font-size: 1.1rem;
|
|
|
}
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
@media (max-width: 768px) {
|
|
|
.faq-section {
|
|
|
padding: 60px 0;
|
|
|
}
|
|
|
|
|
|
.faq-container {
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
|
|
|
.faq-title {
|
|
|
font-size: 2rem;
|
|
|
}
|
|
|
|
|
|
.faq-header {
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
|
|
|
.faq-question {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.faq-question-title {
|
|
|
font-size: 1.1rem;
|
|
|
}
|
|
|
|
|
|
.faq-toggle-icon {
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
|
|
|
.faq-item.active .faq-answer {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.faq-answer-content {
|
|
|
font-size: 0.95rem;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
.faq-title {
|
|
|
font-size: 1.8rem;
|
|
|
}
|
|
|
|
|
|
.faq-question {
|
|
|
padding: 18px 15px;
|
|
|
}
|
|
|
|
|
|
.faq-question-title {
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
|
|
|
.faq-item.active .faq-answer {
|
|
|
padding: 15px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
const faqSection = document.getElementById('<?php echo esc_js($unique_id); ?>');
|
|
|
if (!faqSection) return;
|
|
|
|
|
|
const faqQuestions = faqSection.querySelectorAll('.faq-question');
|
|
|
|
|
|
faqQuestions.forEach(function(question) {
|
|
|
question.addEventListener('click', function() {
|
|
|
const targetId = this.getAttribute('data-target');
|
|
|
const faqItem = this.closest('.faq-item');
|
|
|
const answer = document.getElementById(targetId);
|
|
|
|
|
|
if (!answer || !faqItem) return;
|
|
|
|
|
|
// 切换当前项目的状态
|
|
|
const isActive = faqItem.classList.contains('active');
|
|
|
|
|
|
// 关闭所有其他项目
|
|
|
faqSection.querySelectorAll('.faq-item.active').forEach(function(activeItem) {
|
|
|
if (activeItem !== faqItem) {
|
|
|
activeItem.classList.remove('active');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 切换当前项目
|
|
|
if (isActive) {
|
|
|
faqItem.classList.remove('active');
|
|
|
} else {
|
|
|
faqItem.classList.add('active');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 键盘导航支持
|
|
|
faqQuestions.forEach(function(question, index) {
|
|
|
question.setAttribute('tabindex', '0');
|
|
|
question.setAttribute('role', 'button');
|
|
|
question.setAttribute('aria-expanded', 'false');
|
|
|
|
|
|
question.addEventListener('keydown', function(e) {
|
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
|
e.preventDefault();
|
|
|
this.click();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 更新aria-expanded属性
|
|
|
const observer = new MutationObserver(function(mutations) {
|
|
|
mutations.forEach(function(mutation) {
|
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
|
const faqItem = mutation.target;
|
|
|
const question = faqItem.querySelector('.faq-question');
|
|
|
if (question) {
|
|
|
const isActive = faqItem.classList.contains('active');
|
|
|
question.setAttribute('aria-expanded', isActive.toString());
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
faqSection.querySelectorAll('.faq-item').forEach(function(item) {
|
|
|
observer.observe(item, { attributes: true, attributeFilter: ['class'] });
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<?php if ($show_animation === 'true'): ?>
|
|
|
<script>
|
|
|
// 如果AOS库可用，初始化动画
|
|
|
if (typeof AOS !== 'undefined') {
|
|
|
AOS.init({
|
|
|
duration: 800,
|
|
|
easing: 'ease-out-cubic',
|
|
|
once: true,
|
|
|
offset: 100
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
<?php endif; ?>
|
