自定义FAQ功能

集成了短代码输出的功能，如果要获取全部faq ： $faqs = get_option(‘dynamic_faqs_list’, []);

<?php 
class Dynamic_FAQ_Plugin {
    public function __construct() {
        add_action('admin_menu', [$this, 'add_admin_menu']);
        add_action('admin_init', [$this, 'register_settings']);
        add_action('wp_enqueue_scripts', [$this, 'enqueue_frontend_scripts']);
        add_action('wp_ajax_save_faq', [$this, 'save_faq']);
        add_action('wp_ajax_delete_faq', [$this, 'delete_faq']);
        add_shortcode('dynamic_faqs', [$this, 'render_faqs_shortcode']);
    }

    public function add_admin_menu() {
        add_menu_page(
            'Dynamic FAQs', 
            'Dynamic FAQs', 
            'manage_options', 
            'dynamic-faqs', 
            [$this, 'render_admin_page'],
            'dashicons-editor-help',
            30
        );
    }

    public function register_settings() {
        register_setting('dynamic_faqs_group', 'dynamic_faqs_list');
    }

    public function render_admin_page() {
        ?>
        <div class="wrap">
            <h1>Manage FAQs</h1>
            <form id="faq-form" method="post">
                <?php 
                wp_nonce_field('dynamic_faqs_nonce', 'dynamic_faqs_nonce'); 
                settings_fields('dynamic_faqs_group');
                ?>
                <div id="faq-container">
                    <?php 
                    $faqs = get_option('dynamic_faqs_list', []);
                    if (!empty($faqs)) {
                        foreach ($faqs as $index => $faq) {
                            ?>
                            <div class="faq-item">
                                <input type="text" name="faq_question[]" placeholder="Question" value="<?php echo esc_attr($faq['question']); ?>">
                                <textarea name="faq_answer[]" placeholder="Answer"><?php echo esc_textarea($faq['answer']); ?></textarea>
                                <button type="button" class="delete-faq-btn">Delete</button>
                            </div>
                            <?php
                        }
                    }
                    ?>
                </div>
                <button type="button" id="add-faq-btn" class="button button-primary">Add FAQ</button>
                <button type="submit" id="save-faqs-btn" class="button button-secondary">Save FAQs</button>
            </form>
        </div>
        <script>
        jQuery(document).ready(function($) {
            $('#add-faq-btn').on('click', function() {
                $('#faq-container').append(`
                    <div class="faq-item">
                        <input type="text" name="faq_question[]" placeholder="Question">
                        <textarea name="faq_answer[]" placeholder="Answer"></textarea>
                        <button type="button" class="delete-faq-btn">Delete</button>
                    </div>
                `);
            });

            $(document).on('click', '.delete-faq-btn', function() {
                $(this).closest('.faq-item').remove();
            });

            $('#faq-form').on('submit', function(e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    data: {
                        action: 'save_faq',
                        form_data: formData,
                        nonce: '<?php echo wp_create_nonce('dynamic_faqs_save_nonce'); ?>'
                    },
                    success: function(response) {
                        alert('FAQs saved successfully!');
                        location.reload();
                    }
                });
            });
        });
        </script>
        <style>
        .faq-item {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ddd;
        }
        .faq-item input, 
        .faq-item textarea {
            width: 100%;
            margin-bottom: 10px;
        }
        </style>
        <?php
    }

    public function save_faq() {
        // Verify nonce
        check_ajax_referer('dynamic_faqs_save_nonce', 'nonce');

        // Ensure user has proper capabilities
        if (!current_user_can('manage_options')) {
            wp_send_json_error('Unauthorized');
        }

        // Parse form data
        parse_str($_POST['form_data'], $form_data);

        // Prepare FAQ data
        $faqs = [];
        if (isset($form_data['faq_question']) && isset($form_data['faq_answer'])) {
            for ($i = 0; $i < count($form_data['faq_question']); $i++) {
                if (!empty(trim($form_data['faq_question'][$i]))) {
                    $faqs[] = [
                        'question' => sanitize_text_field($form_data['faq_question'][$i]),
                        'answer' => wp_kses_post($form_data['faq_answer'][$i])
                    ];
                }
            }
        }

        // Save FAQs
        update_option('dynamic_faqs_list', $faqs);

        wp_send_json_success('FAQs saved');
        wp_die();
    }

    public function render_faqs_shortcode() {
        $faqs = get_option('dynamic_faqs_list', []);
        
        ob_start();
        ?>
        <div class="faq-wrapper">
            <?php foreach ($faqs as $faq): ?>
                <div class="item">
                        <div class="item-head">
                            <div class="title-head">
                                <div class="q">Q</div>
                                <p><?php echo esc_html($faq['question']); ?></p>
                            </div>
                            <div class="push open">
                                <i class="icon icon-angle-down"></i>
                                <i class="icon icon-angle-up"></i>
                            </div>
                        </div>
                        <div class="item-contact">
                            <div class="a">A</div>
                            <p><?php echo wp_kses_post($faq['answer']); ?></p>
                        </div>
                    </div>
            <?php endforeach; ?>
        </div>
        <style>
        .dynamic-faqs-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .faq-item {
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .faq-question {
            cursor: pointer;
            color: #333;
        }
        .faq-answer {
            display: block;
            margin-top: 10px;
            color: #666;
        }
        </style>
        <?php
        return ob_get_clean();
    }

    public function enqueue_frontend_scripts() {
        wp_enqueue_script('jquery');
    }
}

// Initialize the plugin
new Dynamic_FAQ_Plugin();

×

自定义FAQ功能

集成了短代码输出的功能，如果要获取全部f...