修改Woocommerce签名插件：取消媒体库添加并调整存储路径

需求回顾 #

• 保留后台订单页的签名显示功能
• 禁止将签名图片添加到WordPress媒体库
• 将签名存储到/wp-content/uploads/signatures/子目录

修改后完整代码 #

add_action('woocommerce_after_order_notes', 'DSCFW_add_signature_field', 50);
function DSCFW_add_signature_field($post)
{
?>
    <div class="validate-required validate-signature" style="position: relative;">
        <p><?php echo esc_html('Please sign below confirming that you understand you are purchasing a subscription which will renew automatically.', 'digital-signature-checkout-for-woocommerce'); ?> <span class="bp-required-field-label"><abbr class="required" title="required">*</abbr></span></p>

        <canvas id="dscfw_sign" name="signaturefield" width="300" height="100" required></canvas>

        <input class="clearButton" type="button" value="X">
        <input id="signPadInput" type="hidden" required name="signpad" value="">
    </div>

<?php
}

add_action('woocommerce_checkout_update_order_meta', 'DSCFW_product_get_data');
function DSCFW_product_get_data($order_id)
{     
    if (is_string($_REQUEST['signpad']) && strrpos($_REQUEST['signpad'], "data:image/png;base64", -strlen($_REQUEST['signpad'])) !== FALSE) {
        $signature_url = DSCFW_save_image($_REQUEST['signpad'], 'signature');
        if ($signature_url) {
            update_post_meta($order_id, 'signpad', $signature_url);
        }
    }
}

function DSCFW_save_image($base64_img, $title)
{
    $upload_dir  = wp_upload_dir();
    $signature_dir = $upload_dir['basedir'] . '/signatures/';
    $signature_url_dir = $upload_dir['baseurl'] . '/signatures/';

    // 自动创建目录并处理权限
    if (!wp_mkdir_p($signature_dir)) {
        return false;
    }

    $img             = str_replace('data:image/png;base64,', '', $base64_img);
    $img             = str_replace(' ', '+', $img);
    $decoded         = base64_decode($img);
    $filename        = $title . '_' . md5(microtime()) . '.png';

    $save_path = $signature_dir . $filename;
    if (file_put_contents($save_path, $decoded)) {
        return $signature_url_dir . $filename;
    }

    return false;
}

add_action('woocommerce_admin_order_data_after_billing_address', 'DSCFW_checkout_field_display_admin_order_meta', 10, 1);
function DSCFW_checkout_field_display_admin_order_meta($order)
{
    $signature_url = $order->get_meta('signpad');
    if ($signature_url) {
?>  
    <p><strong style="display:block;">用户签名:</strong>
    <a href="<?php echo esc_url($signature_url); ?>" target="_blank"><img id="signature" src="<?php echo esc_url($signature_url); ?>" width="100"></a></p>
    <script>
        jQuery(document).ready(function($) {
            function resize() {
                var signatureBlock = document.querySelector('#signature');
                var checkoutContainer = document.querySelector('.order_data_column');
                checkoutWidth = $(checkoutContainer).width();
                signatureBlock.width = checkoutWidth;
            }
            $(window).on("resize", resize);
            $(window).on("load", resize);

        });
    </script>
<?php
    }
}

关键修改点说明 #

1. 移除媒体库集成

   • 删除原代码中wp_insert_attachment相关逻辑，不再生成媒体库附件
   • 订单元数据直接存储图片访问URL，而非附件ID

2. 解决权限与目录问题

   • 使用wp_mkdir_p()自动创建signatures目录，WordPress会自动处理目录权限，避免手动修改权限的麻烦
   • 基于WordPress官方上传目录API构建路径，保证兼容性

3. 图片格式优化

   • 将签名保存为PNG格式，更适合线条类签名，避免JPEG压缩失真
   • 用时间戳哈希生成唯一文件名，防止文件重名覆盖

4. 后台显示逻辑调整

   • 直接读取订单元数据中的URL渲染图片，无需通过媒体库接口获取
   • 增加URL有效性判断，避免无效数据导致的页面错误

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