製品コレクションページのよくある質問

简码是[category_faq_accordion]

<?php
add_action('acf/init', function () {
    if( function_exists('acf_add_local_field_group') ) {
        acf_add_local_field_group(array(
            'key' => 'group_category_faq',
            'title' => 'Category FAQs',
            'fields' => array(
                array(
                    'key' => 'field_category_faqs',
                    'label' => 'FAQs',
                    'name' => 'category_faqs',
                    'type' => 'repeater',
                    'layout' => 'block',
                    'button_label' => 'Add FAQ',
                    'sub_fields' => array(
                        array(
                            'key' => 'field_faq_title',
                            'label' => 'FAQ Title',
                            'name' => 'faq_title',
                            'type' => 'text',
                        ),
                        array(
                            'key' => 'field_faq_content',
                            'label' => 'FAQ Content',
                            'name' => 'faq_content',
                            'type' => 'wysiwyg',
                            'tabs' => 'all',
                            'media_upload' => false,
                        ),
                    ),
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'taxonomy',
                        'operator' => '==',
                        'value' => 'product_cat',
                    ),
                ),
            ),
        ));
    }
});


add_shortcode('category_faq_accordion', function () {
    if (!is_product_category()) return '';
    $term = get_queried_object();
    if (!$term || !isset($term->term_id)) return '';

    $faqs = get_field('category_faqs', 'product_cat_' . $term->term_id);
    if (!$faqs) return '';

    ob_start(); ?>
    <div class="category-faq-accordion-wrapper">
        <?php foreach ($faqs as $index => $faq): ?>
            <div class="faq-item">
                <div class="faq-question" data-faq-index="<?php echo $index; ?>">
                    <span class="faq-title"><?php echo esc_html($faq['faq_title']); ?></span>
                    <span class="faq-toggle-icon">+</span>
                </div>
                <div class="faq-answer">
                    <div class="faq-content"><?php echo wp_kses_post($faq['faq_content']); ?></div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

    <style>
        .category-faq-accordion-wrapper {
            margin: 30px 20px;
            padding: 20px 0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

        .faq-item {
            background: #f9f9f9;
            font-family: 'Satoshi-Regular', sans-serif;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .faq-question {
            cursor: pointer;
            font-size: 14px;
            padding: 0.8333rem 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-toggle-icon {
            font-size: 16px;
            margin-left: 10px;
        }

        .faq-answer {
            display: none;
            font-size: 14px;
            padding: 0.8333rem 20px;
            font-family: 'Satoshi-Regular', sans-serif;
            background: #f9f9f9;
        }

        .faq-item.open .faq-answer {
            display: block;
        }

        .faq-item.open .faq-toggle-icon {
            content: '-';
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.faq-question').forEach(function (q) {
                q.addEventListener('click', function () {
                    var item = q.closest('.faq-item');
                    item.classList.toggle('open');
                    const icon = q.querySelector('.faq-toggle-icon');
                    icon.textContent = item.classList.contains('open') ? '−' : '+';
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
});

简码是[category_faq_accordion]

<?php
add_action('acf/init', function () {
    if( function_exists('acf_add_local_field_group') ) {
        acf_add_local_field_group(array(
            'key' => 'group_category_faq',
            'title' => 'Category FAQs',
            'fields' => array(
                array(
                    'key' => 'field_category_faqs',
                    'label' => 'FAQs',
                    'name' => 'category_faqs',
                    'type' => 'repeater',
                    'layout' => 'block',
                    'button_label' => 'Add FAQ',
                    'sub_fields' => array(
                        array(
                            'key' => 'field_faq_title',
                            'label' => 'FAQ Title',
                            'name' => 'faq_title',
                            'type' => 'text',
                        ),
                        array(
                            'key' => 'field_faq_content',
                            'label' => 'FAQ Content',
                            'name' => 'faq_content',
                            'type' => 'wysiwyg',
                            'tabs' => 'all',
                            'media_upload' => false,
                        ),
                    ),
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'taxonomy',
                        'operator' => '==',
                        'value' => 'product_cat',
                    ),
                ),
            ),
        ));
    }
});


add_shortcode('category_faq_accordion', function () {
    if (!is_product_category()) return '';
    $term = get_queried_object();
    if (!$term || !isset($term->term_id)) return '';

    $faqs = get_field('category_faqs', 'product_cat_' . $term->term_id);
    if (!$faqs) return '';

    ob_start(); ?>
    <div class="category-faq-accordion-wrapper">
        <?php foreach ($faqs as $index => $faq): ?>
            <div class="faq-item">
                <div class="faq-question" data-faq-index="<?php echo $index; ?>">
                    <span class="faq-title"><?php echo esc_html($faq['faq_title']); ?></span>
                    <span class="faq-toggle-icon">+</span>
                </div>
                <div class="faq-answer">
                    <div class="faq-content"><?php echo wp_kses_post($faq['faq_content']); ?></div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

    <style>
        .category-faq-accordion-wrapper {
            margin: 30px 20px;
            padding: 20px 0;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

        .faq-item {
            background: #f9f9f9;
            font-family: 'Satoshi-Regular', sans-serif;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .faq-question {
            cursor: pointer;
            font-size: 14px;
            padding: 0.8333rem 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-toggle-icon {
            font-size: 16px;
            margin-left: 10px;
        }

        .faq-answer {
            display: none;
            font-size: 14px;
            padding: 0.8333rem 20px;
            font-family: 'Satoshi-Regular', sans-serif;
            background: #f9f9f9;
        }

        .faq-item.open .faq-answer {
            display: block;
        }

        .faq-item.open .faq-toggle-icon {
            content: '-';
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.faq-question').forEach(function (q) {
                q.addEventListener('click', function () {
                    var item = q.closest('.faq-item');
                    item.classList.toggle('open');
                    const icon = q.querySelector('.faq-toggle-icon');
                    icon.textContent = item.classList.contains('open') ? '−' : '+';
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
});