You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在WordPress的POST和PAGE中添加自定义PDF上传选项?

在WordPress文章/页面中添加自定义PDF上传选项的方法

下面给你两种实用方案,按需选择:

方案一:用插件快速实现(适合新手)

  • 安装并激活**Advanced Custom Fields (ACF)**插件,这是WordPress生态里最常用的自定义字段工具
  • 后台进入「自定义字段」→「添加字段组」
  • 新建字段:字段类型选「文件」,设置字段标签(比如「上传PDF文件」),在「文件类型」里限定为PDF;字段名称可以设为custom_pdf(内部识别用)
  • 在「位置」设置里,选择「文章类型」等于「文章」和「页面」,确保这个上传框同时出现在文章和页面的编辑页
  • 保存字段组后,回到文章/页面编辑界面,就能看到新增的PDF上传区域,直接上传选择PDF即可

方案二:手动写代码实现(无需插件,更灵活)

需要在主题的functions.php文件里添加代码,或者用自定义代码插件(比如Code Snippets)来添加,避免主题更新丢失代码。

步骤1:添加后台上传框(Metabox)

// 给文章和页面添加PDF上传Metabox
function add_custom_pdf_metabox() {
    // 给文章添加
    add_meta_box(
        'custom_pdf_upload_box', // 唯一ID
        '上传PDF文件', // 后台显示的标题
        'render_pdf_upload_interface', // 渲染上传界面的函数
        'post', // 目标文章类型:post(文章)
        'normal', // 显示位置:编辑区下方
        'default' // 优先级
    );
    // 给页面添加
    add_meta_box(
        'custom_pdf_upload_box',
        '上传PDF文件',
        'render_pdf_upload_interface',
        'page', // 目标文章类型:page(页面)
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'add_custom_pdf_metabox');

步骤2:渲染上传界面(集成WordPress媒体库)

// 渲染PDF上传的UI界面
function render_pdf_upload_interface($post) {
    // 获取已保存的PDF附件ID
    $saved_pdf_id = get_post_meta($post->ID, '_custom_pdf_attachment_id', true);
    // 添加安全验证nonce
    wp_nonce_field('save_custom_pdf_data', 'custom_pdf_nonce');
    ?>
    <div class="pdf-upload-wrap">
        <label>选择PDF文件:</label>
        <input type="hidden" id="custom_pdf_id" name="custom_pdf_id" value="<?php echo esc_attr($saved_pdf_id); ?>">
        
        <?php if ($saved_pdf_id) : ?>
            <?php $pdf_url = wp_get_attachment_url($saved_pdf_id); ?>
            <p>已上传:<a href="<?php echo esc_url($pdf_url); ?>" target="_blank">查看PDF</a> | <button class="remove-pdf-btn">移除</button></p>
        <?php endif; ?>
        
        <button class="upload-pdf-btn">上传/选择PDF</button>
    </div>

    <script>
        jQuery(document).ready(function($) {
            let mediaModal;

            // 打开媒体库选择PDF
            $('.upload-pdf-btn').on('click', function(e) {
                e.preventDefault();
                if (mediaModal) {
                    mediaModal.open();
                    return;
                }

                // 初始化媒体库弹窗,只允许PDF文件
                mediaModal = wp.media({
                    title: '选择PDF文件',
                    button: { text: '确认选择' },
                    multiple: false,
                    library: { type: 'application/pdf' }
                });

                // 选中文件后填充到输入框
                mediaModal.on('select', function() {
                    const attachment = mediaModal.state().get('selection').first().toJSON();
                    $('#custom_pdf_id').val(attachment.id);
                    $('.upload-pdf-btn').replaceWith(`<p>已上传:<a href="${attachment.url}" target="_blank">查看PDF</a> | <button class="remove-pdf-btn">移除</button></p>`);
                });

                mediaModal.open();
            });

            // 移除已上传的PDF
            $(document).on('click', '.remove-pdf-btn', function() {
                $('#custom_pdf_id').val('');
                $(this).parent().replaceWith('<button class="upload-pdf-btn">上传/选择PDF</button>');
            });
        });
    </script>
    <?php
}

步骤3:保存上传的PDF数据

// 保存PDF的附件ID到文章元数据
function save_custom_pdf_data($post_id) {
    // 验证安全nonce
    if (!isset($_POST['custom_pdf_nonce']) || !wp_verify_nonce($_POST['custom_pdf_nonce'], 'save_custom_pdf_data')) {
        return;
    }
    // 跳过自动保存
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    // 验证用户权限
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // 更新或删除PDF元数据
    if (isset($_POST['custom_pdf_id'])) {
        update_post_meta($post_id, '_custom_pdf_attachment_id', sanitize_text_field($_POST['custom_pdf_id']));
    } else {
        delete_post_meta($post_id, '_custom_pdf_attachment_id');
    }
}
add_action('save_post', 'save_custom_pdf_data');

步骤4:在前端显示PDF下载链接

如果需要在文章/页面前端展示这个PDF的下载链接,在主题的文章模板(比如single.php)或页面模板(page.php)里添加以下代码:

// 获取当前文章的PDF附件ID
$pdf_id = get_post_meta(get_the_ID(), '_custom_pdf_attachment_id', true);
if ($pdf_id) {
    $pdf_url = wp_get_attachment_url($pdf_id);
    echo '<div class="pdf-download-section">
            <h4>相关PDF下载</h4>
            <a href="' . esc_url($pdf_url) . '" target="_blank" class="pdf-link">点击下载PDF</a>
          </div>';
}

内容的提问来源于stack exchange,提问作者Chetan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.25 12:42:29