如何让多作者WordPress站点前端Add Media直接跳转至设备文件？

嘿，这个需求完全可以搞定！我之前帮不少多作者WordPress站点做过类似的自定义上传优化，核心就是拦截默认的Add Media按钮行为，把它换成原生的本地文件选择触发逻辑。下面是具体的代码实现，你可以直接套用：

第一步：添加自定义脚本到前端投稿页面 #

把这段PHP代码放到你的主题functions.php文件里，或者创建一个简单的自定义插件来加载它（推荐后者，避免主题更新丢失代码）：

function custom_frontend_upload_script() {
    // 只在前端投稿页面加载脚本，替换成你的投稿页面slug/ID
    if ( is_page( 'submit-post' ) ) { 
        // 注册脚本，依赖WordPress默认加载的jQuery
        wp_enqueue_script(
            'custom-frontend-upload',
            get_stylesheet_directory_uri() . '/js/custom-frontend-upload.js', // 脚本路径根据主题调整
            array( 'jquery' ),
            '1.0',
            true // 在页面底部加载，确保DOM已渲染
        );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_frontend_upload_script' );

第二步：编写JavaScript拦截逻辑 #

在主题的js目录下创建custom-frontend-upload.js文件，写入以下代码：

jQuery(document).ready(function($) {
    // 监听Add Media按钮点击（用事件委托兼容动态生成的按钮）
    $(document).on('click', '.add_media', function(e) {
        // 彻底阻止默认的媒体库弹窗行为
        e.preventDefault();
        e.stopPropagation();

        // 创建隐藏的文件输入元素，支持多选和指定文件类型
        var fileInput = $('<input type="file" multiple accept="image/*,video/*,.pdf,.doc,.docx" style="display:none;">');
        
        // 插入到页面中
        $('body').append(fileInput);

        // 触发本地文件选择器
        fileInput.click();

        // 可选：监听文件选择事件，后续可扩展上传逻辑
        fileInput.on('change', function() {
            var selectedFiles = this.files;
            console.log('选中的文件:', selectedFiles);
            
            // 这里可以添加AJAX上传到WordPress媒体库的逻辑
            // 比如调用wp.media API或自定义上传接口
            
            // 处理完后移除临时输入元素
            fileInput.remove();
        });
    });
});

代码细节说明： #

• 用事件委托$(document).on()监听按钮，适配前端投稿页面可能动态生成的Add Media按钮。
• accept属性可以自定义允许上传的文件类型，你可以根据站点需求修改（比如只允许图片就写accept="image/*"）。
• 如果需要实现选中文件后自动上传到媒体库并插入到内容框，可以在change事件里扩展AJAX上传逻辑，调用WordPress的wp_handle_upload函数完成上传，再把文件链接插入到投稿编辑器中。

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