求推荐WordPress独立图库插件(非Gutenberg,置于文章管理侧边栏)
解决方案
一、自定义代码实现(完全免费且可控)
不想用插件的话,直接在主题的functions.php里添加以下代码,就能在文章编辑页的侧边栏生成独立的图片选择框:
- 注册侧边栏元框
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');
- 渲染图片选择界面
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 }
- 保存图片数据
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
相关产品推荐
相关产品推荐

