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

求推荐WordPress独立图库插件(非Gutenberg,置于文章管理侧边栏)

解决方案

一、自定义代码实现(完全免费且可控)

不想用插件的话,直接在主题的functions.php里添加以下代码,就能在文章编辑页的侧边栏生成独立的图片选择框:

  1. 注册侧边栏元框
function add_post_sidebar_image_meta_box() {
    add_meta_box(
        'post_sidebar_image',
        '侧边栏文章图片',
        'render_post_sidebar_image_meta_box',
        'post',
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'add_post_sidebar_image_meta_box');
  1. 渲染图片选择界面
function render_post_sidebar_image_meta_box($post) {
    $image_id = get_post_meta($post->ID, '_post_sidebar_image_id', true);
    $image_url = $image_id ? wp_get_attachment_image_url($image_id, 'medium') : '';
    
    echo '<div id="post-sidebar-image-container">';
    if ($image_url) {
        echo '<img src="' . esc_url($image_url) . '" style="max-width:100%;margin-bottom:10px;" />';
    }
    echo '<button type="button" class="button" id="upload-sidebar-image-btn">选择图片</button>';
    echo '<button type="button" class="button" id="remove-sidebar-image-btn" style="display:none;">移除图片</button>';
    echo '<input type="hidden" name="post_sidebar_image_id" id="post_sidebar_image_id" value="' . esc_attr($image_id) . '" />';
    echo '</div>';
    
    wp_enqueue_media();
    ?>
    <script>
        jQuery(document).ready(function($) {
            const uploadBtn = $('#upload-sidebar-image-btn');
            const removeBtn = $('#remove-sidebar-image-btn');
            const imageInput = $('#post_sidebar_image_id');
            const imageContainer = $('#post-sidebar-image-container');
            
            uploadBtn.click(function(e) {
                e.preventDefault();
                const frame = wp.media({
                    title: '选择文章侧边栏图片',
                    button: { text: '使用这张图片' },
                    multiple: false
                });
                
                frame.on('select', function() {
                    const attachment = frame.state().get('selection').first().toJSON();
                    imageInput.val(attachment.id);
                    imageContainer.prepend(`<img src="${attachment.url}" style="max-width:100%;margin-bottom:10px;" />`);
                    uploadBtn.hide();
                    removeBtn.show();
                });
                
                frame.open();
            });
            
            removeBtn.click(function(e) {
                e.preventDefault();
                imageInput.val('');
                imageContainer.find('img').remove();
                removeBtn.hide();
                uploadBtn.show();
            });
        });
    </script>
    <?php
}
  1. 保存图片数据
function save_post_sidebar_image_meta_box($post_id) {
    if (!current_user_can('edit_post', $post_id) || (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)) {
        return;
    }
    
    if (isset($_POST['post_sidebar_image_id'])) {
        update_post_meta($post_id, '_post_sidebar_image_id', sanitize_text_field($_POST['post_sidebar_image_id']));
    }
}
add_action('save_post', 'save_post_sidebar_image_meta_box');

前端调用时,用这段代码获取并显示图片:

$image_id = get_post_meta(get_the_ID(), '_post_sidebar_image_id', true);
if ($image_id) {
    echo wp_get_attachment_image($image_id, 'full');
}

二、轻量免费插件推荐

嫌写代码麻烦的话,这两个插件完全能满足需求:

  • Advanced Custom Fields 免费版:免费版的基础图片字段功能足够用,创建字段时选择显示位置为「Sidebar」,就能在文章侧边栏生成图片选择框,不用付Pro版的年费。
  • Meta Box:完全免费的自定义元框工具,可视化创建图片字段,设置显示位置为文章侧边栏,操作简单无冗余功能。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.18 17:10:14