WordPress 有时候一篇文章需要上传多个特色图像,常用于产品详情页。使用一下的代码,可以实现在文章编辑页右侧添加一个模块:
功能说明
我们将使用 add_meta_box 和 update_post_meta 手动创建多个“特色图像”字段。你可以上传多张图片,并在前台调用它们。
实现步骤
步骤 1:添加 Meta Box(在 functions.php 中添加)
// 添加多个特色图像 Meta Box
function add_multiple_featured_images_metabox() {
$post_types = array('post', 'product'); // 支持的文章类型,可以根据需要修改
foreach ($post_types as $post_type) {
add_meta_box(
'multiple-featured-images',
__('额外特色图像', 'textdomain'),
'render_multiple_featured_images_metabox',
$post_type,
'side',
'default'
);
}
}
add_action('add_meta_boxes', 'add_multiple_featured_images_metabox');
步骤 2:渲染 Meta Box 内容(继续在 `functions.php` 中)
// 渲染 Meta Box 内容
function render_multiple_featured_images_metabox($post) {
wp_nonce_field('save_multiple_featured_images', 'multiple_featured_images_nonce');
// 获取已保存的图片 ID 数组
$image_ids = get_post_meta($post->ID, '_multiple_featured_image_ids', true);
if (!is_array($image_ids)) $image_ids = array();
echo '<div id="multiple-featured-images-container" style="margin-top:10px;">';
foreach ($image_ids as $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'thumbnail');
echo '<div class="image-item" data-id="' . esc_attr($image_id) . '" style="display:inline-block; position:relative; margin:5px;">
<img src="' . esc_url($image_url) . '" style="width:60px;height:60px;" />
<a href="#" class="remove-image" style="position:absolute;top:0;right:0;color:red;">×</a>
</div>';
}
echo '</div>';
echo '<a href="#" id="add-multiple-featured-images" class="button">' . __('添加图片', 'textdomain') . '</a>
<input type="hidden" name="multiple_featured_image_ids" id="multiple_featured_image_ids" value="' . esc_attr(implode(',', $image_ids)) . '" />';
}
步骤 3:保存 Meta Box 数据(继续在 `functions.php` 中)
// 保存数据
function save_multiple_featured_images($post_id) {
if (!isset($_POST['multiple_featured_images_nonce']) || !wp_verify_nonce($_POST['multiple_featured_images_nonce'], 'save_multiple_featured_images')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
$image_ids = isset($_POST['multiple_featured_image_ids']) ? explode(',', sanitize_text_field($_POST['multiple_featured_image_ids'])) : array();
update_post_meta($post_id, '_multiple_featured_image_ids', $image_ids);
}
add_action('save_post', 'save_multiple_featured_images');
步骤 4:加载前端脚本(媒体库支持多图上传)
// 加载媒体库脚本
function enqueue_multiple_featured_images_scripts($hook) {
global $post_type;
if ($hook == 'post.php' || $hook == 'post-new.php') {
if (in_array($post_type, array('post', 'product'))) { // 修改为你想支持的文章类型
wp_enqueue_media();
wp_enqueue_script('multiple-featured-images', get_template_directory_uri() . '/js/multiple-featured-images.js', array('jquery'), null, true);
}
}
}
add_action('admin_enqueue_scripts', 'enqueue_multiple_featured_images_scripts');
步骤 5:创建 JS 文件 `js/multiple-featured-images.js`
在你的主题目录下新建文件夹 `/js/`,并创建文件 `multiple-featured-images.js`:
jQuery(document).ready(function($) {
var frame;
$('#add-multiple-featured-images').on('click', function(event){
event.preventDefault();
if (frame) {
frame.open();
return;
}
frame = wp.media({
title: '选择图片',
button: { text: '选择图片' },
multiple: true
});
frame.on('select', function(){
var attachments = frame.state().get('selection').toJSON();
var ids = [];
$('#multiple-featured-images-container').empty();
$.each(attachments, function(index, attachment){
var item = $('<div class="image-item" data-id="'+attachment.id+'" style="display:inline-block; position:relative; margin:5px;"><img src="'+attachment.sizes.thumbnail.url+'" style="width:60px;height:60px;" /><a href="#" class="remove-image" style="position:absolute;top:0;right:0;color:red;">×</a></div>');
$('#multiple-featured-images-container').append(item);
ids.push(attachment.id);
});
$('#multiple_featured_image_ids').val(ids.join(','));
});
frame.open();
});
// 删除图片
$('#multiple-featured-images-container').on('click', '.remove-image', function(e){
e.preventDefault();
$(this).parent().remove();
var ids = [];
$('.image-item').each(function(){
ids.push($(this).attr('data-id'));
});
$('#multiple_featured_image_ids').val(ids.join(','));
});
});
前端调用这些图片的方法
你可以在模板中使用如下代码来显示所有上传的“额外特色图像”:
$image_ids = get_post_meta(get_the_ID(), '_multiple_featured_image_ids', true);
if (is_array($image_ids)) {
foreach ($image_ids as $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'full');
echo '<img src="' . esc_url($image_url) . '" alt="" style="max-width:100%;margin-bottom:10px;">';
}
}
0 条评论