关键词：
【中文标题】Wordpress 自定义元框多张图片上传【英文标题】：Wordpress custom meta box multiple image upload 【发布时间】：2016-08-25 23:08:07 【问题描述】：我正在使用添加了自定义元框的自定义帖子类型。在自定义元框中，我正在尝试为多个图像添加媒体上传器。使用这个上传器，我想将多个图像 ID 存储在一个数组中。问题是我只能保存一个 ID，即使我选择了多个图像。
我真的希望有人可以帮助我。
我的 JS：
jQuery(document).ready(function()
var addButton = document.getElementById('last-opp-bilde');
var deleteButton = document.getElementById('fjern-bilde');
var img = document.getElementById('image-tag');
var hidden = document.getElementById('img-hidden-field');
var imageUploader = wp.media(
title: 'Velg bilde',
button:
text: 'Bruk dette bildet'
,
multiple: true
);
addButton.addEventListener( 'click', function()
if (imageUploader)
imageUploader.open();
);
imageUploader.on( 'select', function()
var attachment = imageUploader.state().get('selection').first().toJSON();
img.setAttribute( 'src', attachment.url);
img.setAttribute( 'style', 'width: 50%;');
hidden.setAttribute( 'value', JSON.stringify( [ id: attachment.id, url: attachment.url]));
);
deleteButton.addEventListener( 'click', function()
img.removeAttribute( 'src' );
hidden.removeAttribute( 'value' );
img.removeAttribute( 'style' );
);
window.addEventListener( 'DOMContentLoaded', function()
img.setAttribute( 'src', imageUploads.imageData.src);
img.setAttribute( 'style', 'width: 50%;');
hidden.setAttribute('value', JSON.stringify( [imageUploads.imageData]));
);
);
【问题讨论】：
【参考方案1】：我实际上设法解决了这个问题。这是为我完成这项工作的 JS。
jQuery(document).ready(function()
var addButton = document.getElementById('last-opp-bilde');
//var deleteButton = document.getElementById('fjern-bilde');
var img = document.getElementById('image-tag');
var hidden = document.getElementById('img-hidden-field');
var imageUploader = wp.media(
title: 'Velg bilde',
button:
text: 'Velg bilde(r)'
,
multiple: 'add'
);
addButton.addEventListener( 'click', function()
if (imageUploader)
imageUploader.open();
);
imageUploader.on('open',function()
var selection = imageUploader.state().get('selection');
ids = jQuery('#img-hidden-field-selected').val().split(',');
ids.forEach(function(id)
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
);
);
imageUploader.on( 'close', function()
//var attachment = imageUploader.state().get('selection').first().toJSON();
var attachment = imageUploader.state().get('selection');
var ids = attachment.map( function (attachment)
return attachment.id;
);
hidden.setAttribute( 'value', ids.join(',') );
);
imageUploader.on( 'select', function()
//var attachment = imageUploader.state().get('selection').first().toJSON();
var attachment = imageUploader.state().get('selection');
var ids = attachment.map( function (attachment)
return attachment.id;
);
hidden.setAttribute( 'value', ids.join(',') );
);
);
【讨论】：
【参考方案2】：将以下代码添加到您当前的主题 function.php 文件中。从 WordPress 管理员转到您的页面，并检查是否将多个图像上传自定义字段添加到每个页面。
<?php
// Add Meta Box to post
add_action( 'add_meta_boxes', 'multi_media_uploader_meta_box' );
function multi_media_uploader_meta_box()
add_meta_box( 'my-post-box', 'Media Field', 'multi_media_uploader_meta_box_func', 'post', 'normal', 'high' );
function multi_media_uploader_meta_box_func($post)
$banner_img = get_post_meta($post->ID,'post_banner_img',true);
?>
<style type="text/css">
.multi-upload-medias ul li .delete-img position: absolute; right: 3px; top: 2px; background: aliceblue; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 20px; color: red;
.multi-upload-medias ul li width: 120px; display: inline-block; vertical-align: middle; margin: 5px; position: relative;
.multi-upload-medias ul li img width: 100%;
</style>
<table cellspacing="10" cellpadding="10">
<tr>
<td>Banner Image</td>
<td>
<?php echo multi_media_uploader_field( 'post_banner_img', $banner_img ); ?>
</td>
</tr>
</table>
<script type="text/javascript">
jQuery(function($)
$('body').on('click', '.wc_multi_upload_image_button', function(e)
e.preventDefault();
var button = $(this),
custom_uploader = wp.media(
title: 'Insert image',
button: text: 'Use this image' ,
multiple: true
).on('select', function()
var attech_ids = '';
attachments
var attachments = custom_uploader.state().get('selection'),
attachment_ids = new Array(),
i = 0;
attachments.each(function(attachment)
attachment_ids[i] = attachment['id'];
attech_ids += ',' + attachment['id'];
if (attachment.attributes.type == 'image')
$(button).siblings('ul').append('<li data-attechment-id="' + attachment['id'] + '"><a href="' + attachment.attributes.url + '" target="_blank"><img class="true_pre_image" src="' + attachment.attributes.url + '" /></a><i class=" dashicons dashicons-no delete-img"></i></li>');
else
$(button).siblings('ul').append('<li data-attechment-id="' + attachment['id'] + '"><a href="' + attachment.attributes.url + '" target="_blank"><img class="true_pre_image" src="' + attachment.attributes.icon + '" /></a><i class=" dashicons dashicons-no delete-img"></i></li>');
i++;
);
var ids = $(button).siblings('.attechments-ids').attr('value');
if (ids)
var ids = ids + attech_ids;
$(button).siblings('.attechments-ids').attr('value', ids);
else
$(button).siblings('.attechments-ids').attr('value', attachment_ids);
$(button).siblings('.wc_multi_remove_image_button').show();
)
.open();
);
$('body').on('click', '.wc_multi_remove_image_button', function()
$(this).hide().prev().val('').prev().addClass('button').html('Add Media');
$(this).parent().find('ul').empty();
return false;
);
);
jQuery(document).ready(function()
jQuery(document).on('click', '.multi-upload-medias ul li i.delete-img', function()
var ids = [];
var this_c = jQuery(this);
jQuery(this).parent().remove();
jQuery('.multi-upload-medias ul li').each(function()
ids.push(jQuery(this).attr('data-attechment-id'));
);
jQuery('.multi-upload-medias').find('input[type="hidden"]').attr('value', ids);
);
)
</script>
<?php
function multi_media_uploader_field($name, $value = '')
$image = '">Add Media';
$image_str = '';
$image_size = 'full';
$display = 'none';
$value = explode(',', $value);
if (!empty($value))
foreach ($value as $values)
if ($image_attributes = wp_get_attachment_image_src($values, $image_size))
$image_str .= '<li data-attechment-id=' . $values . '><a href="' . $image_attributes[0] . '" target="_blank"><img src="' . $image_attributes[0] . '" /></a><i class="dashicons dashicons-no delete-img"></i></li>';
if($image_str)
$display = 'inline-block';
return '<div class="multi-upload-medias"><ul>' . $image_str . '</ul><a href="#" class="wc_multi_upload_image_button button' . $image . '</a><input type="hidden" class="attechments-ids ' . $name . '" name="' . $name . '" id="' . $name . '" value="' . esc_attr(implode(',', $value)) . '" /><a href="#" class="wc_multi_remove_image_button button" style="display:inline-block;display:' . $display . '">Remove media</a></div>';
// Save Meta Box values.
add_action( 'save_post', 'wc_meta_box_save' );
function wc_meta_box_save( $post_id )
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if( !current_user_can( 'edit_post' ) )
return;
if( isset( $_POST['post_banner_img'] ) )
update_post_meta( $post_id, 'post_banner_img', $_POST['post_banner_img'] );
?>
使用下面的代码从任何地方显示元框值
<?php
// Use below code to show metabox values from anywhere
$id = get_the_ID();
$banner_img = get_post_meta($id, 'post_banner_img', true);
$banner_img = explode(',', $banner_img);
if(!empty($banner_img))
?>
<table class="plugin-detail-tabl" cellspacing="0" cellpadding="0">
<tbody>
<?php foreach ($banner_img as $attachment_id) ?>
<tr>
<td><img src="<?php echo wp_get_attachment_url( $attachment_id );?>"></td>
</tr>
<?php ?>
</tbody>
</table>
<?php
【讨论】：
WordPress - 无法从自定义帖子类型中的元框获取价值
】WordPress-无法从自定义帖子类型中的元框获取价值【英文标题】：WordPress-can\'tgetvaluefrommetaboxincustomposttype【发布时间】：2016-04-0310:12:11【问题描述】：我无法从自定义帖子类型中的元框获取值。这是我在自定义帖子类型中注册... 查看详情
php在wordpress中添加自定义元框(代码片段)
php在wordpress中添加自定义元框(代码片段)
如何在wordpress插件的自定义元框中保存多个复选框值？
】如何在wordpress插件的自定义元框中保存多个复选框值？【英文标题】：howtosavemultiplecheckboxvaluesincustommetaboxinwordpressplugin?【发布时间】：2019-01-2304:21:24【问题描述】：是的，我知道还有另一个相关问题已得到解答，但我不明白... 查看详情
Wordpress 使用自定义端点 rest api 上传多个图像（离子作为最终用户）
】Wordpress使用自定义端点restapi上传多个图像（离子作为最终用户）【英文标题】：Wordpressuploadmultipleimageusingcustomendpointrestapi(ionicasenduser)【发布时间】：2019-04-2708:24:07【问题描述】：我想使用ionic(angularjs)将多张图片上传到wordpress... 查看详情
elementupload一次性上传多张图片(包含自定义上传不走action)
最重要的都圈出来了 查看详情
wordpress自定义post类型元框和字段
<?php /*customposttypes*/add_action('init','create_post_types');functioncreate_post_types(){ //vehiclesregister_post_type('wel_vehicle',array('labels'=>array('name'=>__('Vehicles'),'singular_name'=>__('Vehicle... 查看详情
ckeditor添加自定义按钮整合swfupload实现批量上传图片
ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片... 查看详情
wordpress添加多个图片上传自定义域到任何post类型
Hi,hereiimplementmultipleimageuploadcustomfieldtopageposttypeifyouwantitforanotherposttypejustchangeposttypename.Addthisfollowingcodetoyourcurrenttheme’sfunction.phpfile.Gotoyourpagesfromwordpressad 查看详情
从购物车表单复选框返回字符串（是/否）到 wordpress 元框
】从购物车表单复选框返回字符串（是/否）到wordpress元框【英文标题】：Retunastring(yes/no)fromcartformcheckboxtowordpressmetabox【发布时间】：2014-01-1604:18:08【问题描述】：请原谅PHP菜鸟问题...我在我的woocommerce购物车中添加了一个用于... 查看详情
如何在选中的自定义元框中设置单选按钮？
...您可以在其中从一些单选按钮中选择一个值并将其保存到wordpress数据库中的post_meta表中。使用以下代码保存值：functionsave_value_of_my_custom_metabox($post 查看详情
WordPress 自定义插入到帖子按钮
】WordPress自定义插入到帖子按钮【英文标题】：WordPressCustomInsertIntoPostButton【发布时间】：2012-10-2801:29:42【问题描述】：对于使用WordPress的媒体上传器上传的图片，有一个“插入帖子”按钮，可将短代码发送到该图片的编辑器。... 查看详情
Wordpress：在管理员选项页面中上传图片
】Wordpress：在管理员选项页面中上传图片【英文标题】：Wordpress:UploadImageinAdminOptionsPage【发布时间】：2014-05-1710:56:40【问题描述】：我正在开发我的第一个wordpress插件。它只需要允许用户更改自定义模板中的徽标和更改自定义模... 查看详情
Wordpress - 从自定义帖子类型查询第一个和名称
】Wordpress-从自定义帖子类型查询第一个和名称【英文标题】：Wordpress-queryfirstandnamefromcustomposttype【发布时间】：2019-08-0417:32:30【问题描述】：我想使用自定义帖子类型元框查询名字和姓氏。我正在使用的代码：$name=\'JohnDoe\';$args... 查看详情
在特色图片元框中添加或更改内容-wordpress
AddorChangeContentintheFeaturedImageMetaBoxPostedonMarch21,2011PerhapsyouneedtoprovidealittleextrainstructionabouttheFeaturedImagemetabox.Itdoesn’ttakemuchtoaddyourowntexttothatbox:add_filter('admin_post_thumbnail_html','add_featured_image_instruction');functionadd_featured_image_inst... 查看详情
php元框+自定义字段(代码片段)
Wordpress 自定义 Metabox 复选框保存问题
】Wordpress自定义Metabox复选框保存问题【英文标题】：WordpressCustomMetaboxCheckboxSaveIssue【发布时间】：2017-12-2816:45:50【问题描述】：我创建了一个自定义元框，并在我的网站上使用了一段时间，但它的保存方式存在一些问题。它往... 查看详情
按元框值自定义帖子类型查询
】按元框值自定义帖子类型查询【英文标题】：Customposttypequerybymetaboxvalue【发布时间】：2022-01-1007:05:47【问题描述】：我为“portfolio”创建了一个自定义帖子类型，其中包含一个带有许多额外字段的自定义元框，其中一个是我用... 查看详情