如何在WordPress中无缝集成文档集与JetEngine自定义文章类型？

一、插件方案（无需编码） #

1. Advanced Custom Fields (ACF) + JetEngine #

• 给你的自定义文章类型添加一个多选文件字段（ACF的File字段，设置为“返回对象”，允许选择多个文件），直接关联媒体库中的文档。
• 额外添加重复字段组，包含“文档ID”（隐藏字段，存储选中的附件ID）和“自定义显示名称”（文本字段），用来单独设置每个文档的展示名称。
• 用JetEngine制作列表模板：
  • 调用附件缩略图：使用JetEngine动态标签选择“附件缩略图”，指定medium或自定义尺寸。
  • 显示名称：优先调用重复字段组的“自定义显示名称”，无值时 fallback 到附件默认标题。
  • 链接设置：将文档URL设为链接地址，目标选择“新标签页”。

2. JetEngine原生关系字段 + 附件自定义字段 #

• 在JetEngine中给自定义文章类型添加关系字段，关联类型选择“媒体”，允许多选。
• 用ACF或JetEngine的自定义字段功能，给媒体附件添加名为doc_display_name的文本字段，用于存储自定义显示名。
• 制作列表模板时：
  • 动态调用对应尺寸的附件缩略图。
  • 显示名称时，先读取doc_display_name字段值，为空则用附件标题。
  • 链接目标设为_blank，实现新标签打开。

二、自定义开发方案（灵活度更高） #

1. 添加 metabox 关联媒体文档 #

在主题functions.php或自定义插件中添加代码，创建支持多选媒体的 metabox：

add_action('add_meta_boxes', 'add_documents_metabox');
function add_documents_metabox() {
    add_meta_box('custom_documents', '关联文档', 'render_documents_metabox', 'your_cpt_slug', 'normal', 'high');
}

function render_documents_metabox($post) {
    $selected_docs = get_post_meta($post->ID, '_selected_documents', true) ?: [];
    ?>
    <input type="hidden" id="selected_docs" name="selected_docs" value="<?php echo esc_attr(implode(',', $selected_docs)); ?>">
    <div id="doc_list" style="margin: 10px 0;">
        <?php foreach($selected_docs as $doc_id): ?>
            <div class="doc-item" style="display:flex; align-items:center; margin-bottom:8px; padding:8px; border:1px solid #eee;">
                <?php echo wp_get_attachment_image($doc_id, 'thumbnail', false, ['style' => 'margin-right:10px;']); ?>
                <input type="text" name="doc_names[<?php echo $doc_id; ?>]" 
                       value="<?php echo esc_attr(get_post_meta($doc_id, '_doc_display_name', true) ?: get_the_title($doc_id)); ?>"
                       placeholder="自定义显示名称" style="flex:1; margin-right:10px;">
                <button class="remove-doc button button-small" data-id="<?php echo $doc_id; ?>">移除</button>
            </div>
        <?php endforeach; ?>
    </div>
    <button id="add_doc" class="button">添加文档</button>
    <?php
    wp_enqueue_media();
    ?>
    <script>
        jQuery(document).ready(function($) {
            $('#add_doc').click(function(e) {
                e.preventDefault();
                var frame = wp.media({
                    title: '选择文档',
                    multiple: true,
                    library: { type: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'] }
                });
                frame.on('select', function() {
                    var attachments = frame.state().get('selection').toJSON();
                    var currentIds = $('#selected_docs').val().split(',').filter(Boolean);
                    attachments.forEach(function(att) {
                        if (!currentIds.includes(att.id.toString())) {
                            currentIds.push(att.id);
                            $('#selected_docs').val(currentIds.join(','));
                            var thumbHtml = att.sizes.thumbnail ? `<img src="${att.sizes.thumbnail.url}" style="margin-right:10px;">` : '<div style="margin-right:10px; width:150px; text-align:center;">无缩略图</div>';
                            $('#doc_list').append(`
                                <div class="doc-item" style="display:flex; align-items:center; margin-bottom:8px; padding:8px; border:1px solid #eee;">
                                    ${thumbHtml}
                                    <input type="text" name="doc_names[${att.id}]" value="${att.title}" placeholder="自定义显示名称" style="flex:1; margin-right:10px;">
                                    <button class="remove-doc button button-small" data-id="${att.id}">移除</button>
                                </div>
                            `);
                        }
                    });
                });
                frame.open();
            });
            $(document).on('click', '.remove-doc', function() {
                var id = $(this).data('id');
                var currentIds = $('#selected_docs').val().split(',').filter(item => item != id);
                $('#selected_docs').val(currentIds.join(','));
                $(this).parent().remove();
            });
        });
    </script>
    <?php
}

add_action('save_post', 'save_documents_metabox');
function save_documents_metabox($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    if (isset($_POST['selected_docs'])) {
        update_post_meta($post_id, '_selected_documents', array_filter(explode(',', $_POST['selected_docs'])));
    }
    if (isset($_POST['doc_names'])) {
        foreach($_POST['doc_names'] as $doc_id => $name) {
            update_post_meta($doc_id, '_doc_display_name', sanitize_text_field($name));
        }
    }
}

2. 前端渲染文档列表 #

在自定义文章类型的模板文件中添加代码，渲染带缩略图的文档列表：

$selected_docs = get_post_meta(get_the_ID(), '_selected_documents', true) ?: [];
if ($selected_docs) {
    echo '<div class="document-list" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:20px; margin:20px 0;">';
    foreach($selected_docs as $doc_id) {
        $doc_url = wp_get_attachment_url($doc_id);
        $display_name = get_post_meta($doc_id, '_doc_display_name', true) ?: get_the_title($doc_id);
        $thumb = wp_get_attachment_image($doc_id, 'medium', false, ['class' => 'doc-thumb', 'style' => 'width:100%; height:auto; border-radius:4px;']);
        echo '<a href="' . esc_url($doc_url) . '" target="_blank" class="doc-item" style="text-decoration:none; color:inherit; text-align:center;">';
        echo $thumb;
        echo '<span class="doc-name" style="display:block; margin-top:8px; font-size:14px;">' . esc_html($display_name) . '</span>';
        echo '</a>';
    }
    echo '</div>';
}

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