WordPress后台面板实现图片无刷新删除：为<i>标签添加<a>标签的技术求助

第一步：修改画廊模板的HTML结构 #

首先需要把删除图标用<a>标签包裹，同时添加专属类名方便后续JS监听，还要阻止默认跳转行为。修改后的代码片段如下：

<# _.each( data.values, function( img, id) { #>
<div class="thumbs">
  <div class="inner">
    <img src="{{img.thumb}}" />
    <div class="inner-hover">
      <a href="#" class="stm-delete-image" data-delete="{{id}}">
        <i class="fa fa-remove"></i>
      </a>
      <i class="fa fa-arrows"></i>
    </div>
  </div>
</div>
<# } ) #>

第二步：编写JavaScript处理点击与AJAX请求 #

在插件的JS文件中添加以下代码（确保该JS在后台画廊页面加载），实现点击事件监听、AJAX请求发送和前端DOM更新：

jQuery(document).ready(function($) {
    // 监听删除按钮点击
    $(document).on('click', '.stm-delete-image', function(e) {
        e.preventDefault(); // 阻止默认链接跳转

        var $this = $(this);
        var imageId = $this.data('delete'); // 获取目标图片ID
        var $thumbContainer = $this.closest('.thumbs'); // 获取当前缩略图容器

        // 发送AJAX请求到WordPress后台
        $.ajax({
            url: ajaxurl, // WordPress全局AJAX地址（后台自动定义）
            type: 'POST',
            data: {
                action: 'stm_delete_gallery_image', // 自定义AJAX动作标识
                image_id: imageId,
                post_id: $('#post_ID').val(), // 获取当前编辑的文章ID
                nonce: stm_gallery_nonce.nonce // 安全验证用的nonce
            },
            beforeSend: function() {
                // 可选：添加加载状态，比如给按钮加禁用样式
                $this.addClass('loading');
            },
            success: function(response) {
                if (response.success) {
                    // 删除成功，动画移除缩略图容器
                    $thumbContainer.fadeOut(function() {
                        $(this).remove();

                        // 如果所有图片都被删完，显示占位符
                        if ($('.stm_mini_thumbs .thumbs').length === 0) {
                            $('.main_image').remove();
                            $('.stm_mini_thumbs').after('<div class="butterbean-placeholder">' + stm_gallery_l10n.placeholder + '</div>');
                        }
                    });
                } else {
                    // 删除失败，提示错误信息
                    alert(response.data.message);
                }
            },
            error: function() {
                alert('删除图片时发生错误，请重试');
            },
            complete: function() {
                $this.removeClass('loading');
            }
        });
    });
});

第三步：在PHP中实现AJAX处理逻辑 #

在插件的PHP文件中添加以下代码，处理前端发送的AJAX请求，完成图片删除和数据更新：

3.1 注册AJAX动作与权限验证 #

// 仅允许登录用户（后台用户）访问该AJAX接口
add_action('wp_ajax_stm_delete_gallery_image', 'stm_delete_gallery_image_handler');

function stm_delete_gallery_image_handler() {
    // 验证nonce，防止CSRF攻击
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'stm_gallery_nonce')) {
        wp_send_json_error(array('message' => '安全验证失败'));
    }

    // 验证用户权限
    if (!current_user_can('edit_posts')) {
        wp_send_json_error(array('message' => '你没有权限执行此操作'));
    }

    $image_id = intval($_POST['image_id']);
    $post_id = intval($_POST['post_id']);

    if (!$image_id || !$post_id) {
        wp_send_json_error(array('message' => '参数错误'));
    }

    // 替换成你实际存储画廊数据的元键名
    $gallery_values = get_post_meta($post_id, 'your_gallery_meta_key', true);

    if (empty($gallery_values)) {
        wp_send_json_error(array('message' => '画廊中没有图片'));
    }

    // 删除指定ID的图片并更新元数据
    if (isset($gallery_values[$image_id])) {
        unset($gallery_values[$image_id]);
        // 重新索引数组（可选，保持数组键名连续）
        $gallery_values = array_values($gallery_values);
        update_post_meta($post_id, 'your_gallery_meta_key', $gallery_values);

        wp_send_json_success(array('message' => '图片删除成功'));
    } else {
        wp_send_json_error(array('message' => '要删除的图片不存在'));
    }
}

3.2 传递Nonce与本地化文本到前端 #

在后台加载脚本时，把安全验证用的nonce和本地化文本传递给JS：

add_action('admin_enqueue_scripts', 'stm_enqueue_gallery_scripts');

function stm_enqueue_gallery_scripts($hook) {
    // 仅在文章编辑页面加载脚本
    if (!in_array($hook, array('post.php', 'post-new.php'))) {
        return;
    }

    // 注册并加载你的JS文件，替换为实际路径
    wp_enqueue_script('stm-gallery-script', plugin_dir_url(__FILE__) . 'js/stm-gallery.js', array('jquery'), '1.0', true);

    // 传递nonce
    wp_localize_script('stm-gallery-script', 'stm_gallery_nonce', array(
        'nonce' => wp_create_nonce('stm_gallery_nonce')
    ));

    // 传递本地化文本，替换为你的文本域
    wp_localize_script('stm-gallery-script', 'stm_gallery_l10n', array(
        'placeholder' => __('No images in gallery', 'your-text-domain')
    ));
}

第四步：关键注意事项 #

• 替换your_gallery_meta_key为你实际存储画廊图片数据的元数据键名；
• 替换your-text-domain为你的插件/主题的文本域，用于多语言支持；
• 可以根据需求添加CSS样式，优化删除按钮的交互效果（比如悬停颜色、加载状态）；
• 确保权限验证逻辑严谨，避免未授权操作。

这样就完成了无刷新删除功能：点击删除图标后，前端发送AJAX请求到后台删除对应图片，成功后动态移除缩略图容器，若所有图片被删除则自动显示占位符。

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