WooCommerce品牌页二级描述PHP代码后台编辑空白问题排查

问题排查 #

1. 编辑页面未加载已保存内容
   在编辑品牌的secondary_desc_edit方法中，调用wp_editor()时没有传入已存储的二级描述数据，导致编辑器始终显示空白。

2. 添加品牌时字段名称不匹配
   添加品牌页面的wp_editor配置里，textarea_name设置为带空格的'Secondary description'，但保存逻辑里读取的是$_POST['secondary-description']，两者名称不一致，会导致新品牌的二级描述无法正确保存，同时影响编辑器内容加载。

修复后的完整代码 #

/**
*  为品牌添加二级描述字段
*/
class Custom_PWB_Secondary_Description{
    static $field_name = '二级描述';
    static $field_desc = '这里是二级描述的输入区域';

    function __construct(){
        add_action( 'pwb-brand_add_form_fields', array( $this, 'secondary_desc_add' ), 9, 1 );
        add_action( 'pwb-brand_edit_form_fields', array( $this, 'secondary_desc_edit' ), 9, 2 );
        add_action( 'edited_pwb-brand', array( $this, 'save_desc_add' ), 10, 2 );
        add_action( 'create_pwb-brand', array( $this, 'save_desc_add' ), 10, 2 );
        add_action( 'woocommerce_after_main_content', array( $this, 'add_desc_to_brands_page' ) );
    }

    /**
     *  在添加品牌页面添加额外字段
     */
    public function secondary_desc_add( $taxonomy ){
        ?>
        <div class="form-field">
            <label for="tag-secondary-description"><?php echo self::$field_name;?></label>
            <?php
            $settings = array(
                'textarea_name' => 'secondary-description', // 统一字段名称
                'quicktags' => array( 'buttons' => 'em,strong,link' ),
                'tinymce' => array(
                    'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
                    'theme_advanced_buttons2' => '',
                ),
                'editor_css' => '<style>#wp-seconddesc-editor-container .wp-editor-area{height:175px; width:100%;}</style>', // 修正编辑器容器选择器
            );

            wp_editor( '', 'seconddesc', $settings );
            ?>
        </div>
        <?php
    }

    /**
     *  在编辑品牌页面添加额外字段
     */
    public function secondary_desc_edit( $brand, $taxonomy ){
        $sec_desc = get_term_meta( $brand->term_id, 'secondary-description', true );
        ?>
        <tr class="form-field">
            <th scope="row"><label for="secondary-description"><?php echo self::$field_name;?></label></th>
            <td>
                <?php
                $settings = array(
                    'textarea_name' => 'secondary-description',
                    'quicktags' => array( 'buttons' => 'em,strong,link' ),
                    'tinymce' => array(
                        'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
                        'theme_advanced_buttons2' => '',
                    ),
                    'editor_css' => '<style>#wp-seconddesc-editor-container .wp-editor-area{height:175px; width:100%;}</style>', // 修正编辑器容器选择器
                );

                wp_editor( $sec_desc, 'seconddesc', $settings ); // 传入已保存的描述内容
                ?>
                <p class="secondary-description"><?php echo self::$field_desc;?></p>
            </td>
        </tr>
        <?php
    }

    /**
     *  保存二级描述为分类元数据
     */
    public function save_desc_add( $term_id, $tt_id = '', $taxonomy = '' ){
        if( isset( $_POST['secondary-description'] ) ){
            update_term_meta( $term_id, 'secondary-description', wp_kses_post( $_POST['secondary-description'] ) ); // 增加内容过滤提升安全性
        }
    }

    /**
     *  在品牌归档页面循环后显示二级描述
     */
    public function add_desc_to_brands_page(){
        if( is_tax( 'pwb-brand' ) ){
            $brand = get_queried_object();
            $sec_desc = get_term_meta( $brand->term_id, 'secondary-description', true );
            if( !empty( $sec_desc ) ){ // 空内容时不输出容器
                ?>
                <div class="secondary-description"><?php echo $sec_desc;?></div>
                <?php
            }
        }
    }

}
new Custom_PWB_Secondary_Description();

额外优化说明 #

• 修正编辑器容器的CSS选择器，原代码误用了摘要编辑器的容器ID，改为匹配当前编辑器ID的选择器
• 保存逻辑中添加wp_kses_post()过滤用户输入，防止恶意代码注入
• 前端输出时增加非空判断，避免生成空的容器标签

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