自定义WordPress仪表盘小部件可关闭通知失效问题求助

问题根源 #

1. 仪表盘小部件容器默认未加载wp-dismiss-notice.js脚本，导致is-dismissible类的关闭功能无法触发。
2. 代码中错误地将_e()用于字符串拼接——该函数是直接输出文本，会导致HTML结构错乱，应使用返回字符串的__()。
3. 旧的error类虽兼容，但官方现在推荐用notice-error统一样式规范。

修复方案 #

1. 手动加载通知所需资源 #

通过钩子仅在仪表盘页面加载通知的脚本和样式，确保关闭功能和样式生效。

2. 修正文本输出用法 #

将拼接场景中的_e()替换为__()，避免输出顺序混乱。

3. 替换过时类名 #

用notice-error替代error，符合WordPress最新规范。

完整修正代码 #

// 注册自定义仪表盘小部件
add_action( 'wp_dashboard_setup', 'my_admin_dashboard_widget' );
function my_admin_dashboard_widget() {
    // 给小部件设置唯一ID，避免冲突
    wp_add_dashboard_widget( 
        'custom-alerts-dashboard-widget', 
        __( 'Alerts', 'text-domain' ), 
        'my_dashboard_admin_widget_handler' 
    );
}

// 仅在仪表盘页面加载通知所需脚本和样式
add_action( 'admin_enqueue_scripts', 'load_notice_assets_for_dashboard' );
function load_notice_assets_for_dashboard( $hook ) {
    if ( 'index.php' !== $hook ) return;
    
    wp_enqueue_script( 'wp-dismiss-notice' ); // 关闭通知的核心脚本
    wp_enqueue_style( 'wp-admin' ); // 确保通知默认样式正常应用
}

// 渲染小部件内容
function my_dashboard_admin_widget_handler() {
    echo '<div class="start-stylling-my-widget">';

    _e( 'Here I put some text.', 'text-domain' );

    // 成功通知
    echo '<div class="notice notice-success is-dismissible">';
    echo '<p>' . __( 'Done!', 'text-domain' ) . '</p>';
    echo '</div>';

    // 错误通知（使用规范类名）
    echo '<div class="notice notice-error is-dismissible">';
    echo '<p>' . __( 'Install it now!', 'text-domain' ) . '</p>';
    echo '</div>';

    echo '</div>';
}

额外提示 #

• 给小部件设置唯一ID能避免与其他插件的小部件产生冲突。
• 仅在仪表盘页面加载资源，可减少不必要的性能消耗。

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