WordPress 后台图片圆角处理工具 – 上传即转 WebP,一键保存到媒体库

🔧 告别重复劳动:在 WordPress 后台一键给图片加圆角并自动转 WebP

从“需求痛点”到“完美解决”,借助 WPCode 定制你自己的图片处理工作流

💡 我遇到的真问题

运营 WordPress 网站的日常中,图片处理几乎无处不在:文章封面、课程卡片、产品缩略图、社交分享图…… 为了让页面视觉更统一,我经常需要为这些图片加上圆角,并且为了优化加载速度,格式必须使用 WebP

原来的流程是:

  • 从 Photoshop 或 Figma 打开原图 → 添加圆角遮罩 → 导出为 WebP
  • 再登录 WordPress → 媒体库上传 → 插入文章

单张图片还好,但当有 10 张、20 张时,这种重复操作就变得枯燥而耗时。我一直在想:能不能直接在 WordPress 后台就搞定圆角+转格式这两件事?

尝试过几款图片编辑插件,要么功能太重、要么需要付费、要么生成的图片并不完美。直到我意识到,WPCode 这个强大的代码片段插件,完全有能力搭建一个轻量但完全符合自己需求的后台工具。

🛠️ 我是怎么解决的:用 WPCode 定制“一键圆角”工具

借助 WPCode 的 PHP 代码片段,我写了一个完整的后台页面,把它注册为一个左侧菜单项。打开后就是一个所见即所得的图片圆角处理器,完全在浏览器本地处理,不上传任何第三方

核心功能一览

📂

多种上传方式

拖拽、点击上传、Ctrl+V 粘贴,甚至直接从媒体库选择已有图片,无需离开后台。

🎚️

自由调节圆角

拖动滑块或输入数值,实时预览。锁定时可统一四个角;解锁后能单独调整每个角的半径,实现不对称创意。

🎨

透明/纯色背景

默认保留透明(WebP/PNG透明通道),也可关闭透明并选取任意背景颜色,适应不同场景。

自动 WebP 转换

无论上传的是 JPG、PNG 还是 GIF,保存到媒体库或下载时均自动转为 WebP,体积小、质量高。

💾

双保存路径

点击“下载图片”保存到本地;点击“保存到媒体库”则直接添加至 WordPress 媒体库,方便复用。

🚀

快速预设

内置 8px、16px、30px 等常用值,还有“胶囊形”可一键生成最大圆角(正方形变圆形)。

最棒的是:整个工具就是一个 PHP 文件,通过 WPCode 注入 WordPress,不增加任何额外插件负担,代码完全透明可控

🧩 完整 WPCode 代码(带一键复制)

将以下代码完整复制,粘贴到 WPCode → 新增代码片段 → PHP Snippet,自动插入位置选 “仅后台” 即可。

<?php
/**
 * 图片圆角处理工具 - WordPress 后台插件版
 * 通过 WPCode 添加,支持圆角调整、WebP 保存
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

add_action( 'admin_menu', 'rt_add_image_rounder_menu' );
function rt_add_image_rounder_menu() {
    add_menu_page(
        '图片圆角处理',
        '图片圆角',
        'upload_files',
        'rt-image-rounder',
        'rt_render_image_rounder_page',
        'dashicons-format-image',
        30
    );
}

add_action( 'wp_ajax_rt_save_rounded_image', 'rt_handle_save_rounded_image' );
function rt_handle_save_rounded_image() {
    if ( ! current_user_can( 'upload_files' ) ) {
        wp_send_json_error( [ 'message' => '无上传权限' ] );
    }

    if ( empty( $_FILES['rounded_image'] ) ) {
        wp_send_json_error( [ 'message' => '未收到图片文件' ] );
    }

    $file = $_FILES['rounded_image'];
    $file_name = sanitize_file_name( $_POST['filename'] ?? 'rounded_image.png' );

    $upload = wp_handle_upload( $file, [ 'test_form' => false, 'test_type' => false ] );

    if ( isset( $upload['error'] ) ) {
        wp_send_json_error( [ 'message' => $upload['error'] ] );
    }

    $uploaded_file = $upload['file'];
    $final_file    = $uploaded_file;
    $final_name    = $file_name;
    $final_type    = $upload['type'];
    $final_url     = $upload['url'];
    $converted     = false;

    // 尝试转换为 WebP
    $editor = wp_get_image_editor( $uploaded_file );
    if ( ! is_wp_error( $editor ) ) {
        $webp_upload = wp_upload_dir();
        $new_name    = pathinfo( $file_name, PATHINFO_FILENAME ) . '.webp';
        $new_path    = trailingslashit( $webp_upload['path'] ) . $new_name;

        $saved = $editor->save( $new_path, 'image/webp' );
        if ( ! is_wp_error( $saved ) && file_exists( $saved['path'] ) ) {
            @unlink( $uploaded_file );
            $final_file = $saved['path'];
            $final_name = $new_name;
            $final_type = 'image/webp';
            $final_url  = trailingslashit( $webp_upload['url'] ) . $new_name;
            $converted  = true;
        }
    }

    $attachment = [
        'guid'           => $final_url,
        'post_mime_type' => $final_type,
        'post_title'     => pathinfo( $final_name, PATHINFO_FILENAME ),
        'post_content'   => '',
        'post_status'    => 'inherit',
    ];

    $attach_id = wp_insert_attachment( $attachment, $final_file );
    if ( is_wp_error( $attach_id ) ) {
        wp_send_json_error( [ 'message' => $attach_id->get_error_message() ] );
    }

    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    $attach_data = wp_generate_attachment_metadata( $attach_id, $final_file );
    wp_update_attachment_metadata( $attach_id, $attach_data );

    $msg = '图片已保存到媒体库';
    if ( $converted ) {
        $msg .= '(已自动转为 WebP 格式)';
    }

    wp_send_json_success( [
        'attach_id' => $attach_id,
        'url'       => $final_url,
        'message'   => $msg,
    ] );
}

function rt_render_image_rounder_page() {
    if ( ! current_user_can( 'upload_files' ) ) {
        wp_die( __( '您没有权限访问此页面。' ) );
    }

    wp_enqueue_media();
    ?>
    <div id="rt-wrapper" style="margin: 20px 20px 20px 0;">
        <!-- 样式与脚本省略,请使用完整代码 -->
    </div>
    <?php
}

📌 注意:上面代码块为精简示意,完整版请参考本教程最早提供的完整 WPCode 代码。

📈 最终效果:效率提升立竿见影

部署这个工具后,我的图片处理流程变成了:

  • 在后台点击“图片圆角”菜单
  • 拖入(或粘贴)原始图片
  • 选择圆角大小(或点“胶囊形”一键圆形)
  • 点击“保存到媒体库”
  • 在文章编辑中直接插入这张带圆角的 WebP 图片

整个操作不超过 10 秒,而且生成的图片在视觉上和 Photoshop 输出没有差别。更重要的是,所有图片都统一成了 WebP,页面加载速度明显提升。

如果你也受困于重复的图片处理,不妨试试这个方案——只需一个 WPCode 片段,就能拥有自己的专属后台图片编辑器。

🚶 3 步开始使用

  1. 安装并激活 WPCode 插件(免费版)。
  2. 进入 WPCode → 代码片段,新建 PHP 片段,粘贴本文提供的完整代码。
  3. 设置自动插入为“仅后台”,保存并激活。

刷新后台,左侧菜单就会出现“图片圆角”,马上开始高效处理图片吧!

用代码为自己量身定制工作流,这是 WordPress 灵活性的最佳体现之一。

相关推荐

世界,您好!

欢迎使用 WordPress。这是您的第一篇文章。编辑或删除它,然后开始写作吧!

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。