求助：WooCommerce设置页添加支持HTML字段及高级编辑器字段

一、修复HTML内容无法保存的问题 #

你当前使用的默认textarea类型字段会被WooCommerce自动进行严格HTML过滤，导致Google Map的iframe代码被清除。解决方法是为字段添加自定义内容清理回调，允许合法的iframe标签及属性：

add_filter('woocommerce_general_settings', 'general_settings_shop_map_address');
function general_settings_shop_map_address($settings) {
    $key = 0;

    foreach( $settings as $values ){
        $new_settings[$key] = $values;
        $key++;

        // 在"Store Address"区域的默认国家字段后插入地图字段
        if($values['id'] == 'woocommerce_default_country'){
            $new_settings[$key] = array(
                'title'             => __('Store Address (Map)'),
                'desc'              => __('Copy your store Google Map iframe here'),
                'id'                => 'woocommerce_store_map',
                'default'           => '',
                'type'              => 'textarea',
                'desc_tip'          => true,
                'sanitize_callback' => 'allow_iframe_html_sanitize' // 绑定自定义清理函数
            );
            $key++;
        }
    }
    return $new_settings;
}

// 自定义HTML清理函数，仅允许安全的iframe标签及属性
function allow_iframe_html_sanitize($input) {
    $allowed_tags = array(
        'iframe' => array(
            'src' => true,
            'width' => true,
            'height' => true,
            'frameborder' => true,
            'style' => true,
            'allowfullscreen' => true
        )
    );
    return wp_kses($input, $allowed_tags);
}

二、添加支持WordPress高级编辑器（TinyMCE）的字段 #

要在WooCommerce设置中集成TinyMCE编辑器，需要先注册自定义字段类型，再将其添加到设置页面：

1. 注册自定义编辑器字段渲染函数 #

add_action('woocommerce_admin_field_tinymce_editor', 'render_tinymce_editor_field');
function render_tinymce_editor_field($field) {
    $saved_value = get_option($field['id'], $field['default']);
    ?>
    <tr valign="top">
        <th scope="row" class="titledesc">
            <label for="<?php echo esc_attr($field['id']); ?>"><?php echo esc_html($field['title']); ?></label>
            <?php if (!empty($field['desc_tip'])) : ?>
                <span class="woocommerce-help-tip" data-tip="<?php echo esc_attr($field['desc_tip']); ?>"></span>
            <?php endif; ?>
        </th>
        <td class="forminp">
            <?php
            // 初始化TinyMCE编辑器
            wp_editor(
                wp_kses_post($saved_value),
                $field['id'],
                array(
                    'textarea_name' => $field['id'],
                    'textarea_rows' => 10,
                    'media_buttons' => true, // 开启媒体上传按钮
                    'tinymce' => array(
                        'toolbar1' => 'bold,italic,underline,link,unlink,alignleft,aligncenter,alignright,undo,redo',
                        'toolbar2' => 'formatselect,forecolor,pastetext,removeformat,charmap,outdent,indent,bullist,numlist'
                    )
                )
            );
            ?>
            <?php if (!empty($field['desc'])) : ?>
                <p class="description"><?php echo wp_kses_post($field['desc']); ?></p>
            <?php endif; ?>
        </td>
    </tr>
    <?php
}

2. 将编辑器字段添加到常规设置页面 #

修改之前的general_settings_shop_map_address函数，插入编辑器字段定义：

add_filter('woocommerce_general_settings', 'general_settings_shop_map_address');
function general_settings_shop_map_address($settings) {
    $key = 0;

    foreach( $settings as $values ){
        $new_settings[$key] = $values;
        $key++;

        // 插入地图字段
        if($values['id'] == 'woocommerce_default_country'){
            $new_settings[$key] = array(
                'title'             => __('Store Address (Map)'),
                'desc'              => __('Copy your store Google Map iframe here'),
                'id'                => 'woocommerce_store_map',
                'default'           => '',
                'type'              => 'textarea',
                'desc_tip'          => true,
                'sanitize_callback' => 'allow_iframe_html_sanitize'
            );
            $key++;

            // 插入高级编辑器字段
            $new_settings[$key] = array(
                'title'             => __('Custom Formatted Content'),
                'desc'              => __('Use advanced editor to add rich text content'),
                'id'                => 'woocommerce_custom_editor_content',
                'default'           => '',
                'type'              => 'tinymce_editor', // 使用自定义字段类型
                'desc_tip'          => true,
                'sanitize_callback' => 'wp_kses_post' // 使用WordPress内置的安全清理函数
            );
            $key++;
        }
    }
    return $new_settings;
}

说明 #

• iframe字段通过自定义清理函数仅允许必要的属性，平衡功能与安全性；
• 高级编辑器使用wp_kses_post进行内容清理，允许WordPress默认支持的文章内容HTML标签，同时过滤危险代码。

内容的提问来源于stack exchange，提问作者sokan client