WordPress插件引入CSS/JS后编辑页面保存报错排查求助

核心问题原因 #

1. 资源加载钩子错误：你使用的wp钩子会在**所有WordPress请求（包括后台页面编辑/保存）**中触发，后台环境不需要加载前端的CSS/JS资源，且这些资源的加载逻辑可能与后台的脚本机制冲突，导致保存错误。
2. 短代码输出方式不符合规范：直接用echo输出短代码内容，虽然前端显示正常，但WordPress短代码推荐使用return返回内容，否则可能在后台编辑器处理时引发潜在的输出顺序问题。

修复后的插件主文件代码 #

<?php
/*
 * Plugin Name: My Plugin
 * Plugin URI:  https://example.com
 * Description: A brief description of my plugin
 * Version:     1.0.0
 * Author:      Your Name
 * Author URI:  https://example.com
 * License:     GPL2
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: my-plugin
 * Domain Path: /languages
 */

function my_shortcode_function() {
    // 用return替代echo，遵循WordPress短代码规范
    return "<p class='myxxx'>Hello world</p>";
}
add_shortcode('my_shortcode', 'my_shortcode_function');

function my_plugin_enqueue_assets() {
    // 仅在前台页面加载前端资源
    wp_enqueue_style('my-plugin-style', plugins_url('css/style.css', __FILE__));
    wp_enqueue_script('my-plugin-script', plugins_url('js/script.js', __FILE__));
}
// 使用wp_enqueue_scripts钩子（官方推荐的前台资源加载钩子）
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_assets');

修复说明 #

• 钩子替换：wp_enqueue_scripts是WordPress官方指定的前台脚本/样式加载钩子，只会在用户访问前台页面时触发，后台编辑保存流程不会执行该钩子，彻底避免了后台加载前端资源引发的冲突。
• 短代码输出优化：改用return返回内容，确保WordPress能正确处理短代码的输出逻辑，避免后台编辑器在解析短代码时出现异常。

可选：支持Divi编辑器预览加载资源 #

如果需要在Divi的前端编辑器预览中看到样式效果，可以修改资源加载函数，添加编辑器预览的判断：

function my_plugin_enqueue_assets() {
    // 前台加载 或 Divi编辑器预览模式下加载
    if ( !is_admin() || ( isset( $_GET['et_fb'] ) && $_GET['et_fb'] === '1' ) ) {
        wp_enqueue_style('my-plugin-style', plugins_url('css/style.css', __FILE__));
        wp_enqueue_script('my-plugin-script', plugins_url('js/script.js', __FILE__));
    }
}
add_action('wp_enqueue_scripts', 'my_plugin_enqueue_assets');

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