关键词:
【中文标题】WordPress 3.5 自定义媒体上传为您的主题选项【英文标题】:WordPress 3.5 custom media upload for your theme options 【发布时间】:2012-11-30 15:02:29 【问题描述】:WordPress 3.5 最近发布了,我通过thickbox 和window.send_to_editor
使用了WordPress 媒体上传系统,用于我的WordPress 主题中的一些选项(背景、徽标等...)。
但正如您所知,WordPress 已经集成了一个新的媒体管理器,我想使用这个新功能将图像/文件作为自定义字段上传。所以我花了一上午的时间想办法得到想要的结果。
我发现了这个解决方案,它对你们中的一些人可能有用。感谢您对代码或您想到的任何改进提供反馈!
HTML 示例:
<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">
jQuery 代码:
$('.custom_media_upload').click(function()
var send_attachment_bkp = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment)
$('.custom_media_image').attr('src', attachment.url);
$('.custom_media_url').val(attachment.url);
$('.custom_media_id').val(attachment.id);
wp.media.editor.send.attachment = send_attachment_bkp;
wp.media.editor.open();
return false;
);
如果您想查看attachment
变量中包含的所有设置,您可以使用console.log(attachment)
或alert(attachment)
。
【问题讨论】:
Wordpress 管理员使用 noConflict 所以我不得不更改 $ -> jQuery。非常有帮助,谢谢! 非常感谢这个清晰的例子!传递帖子 ID 就像在 wp.media.editor.open() 中将其作为参数传递一样简单 我想知道如何将媒体 API 作为依赖项加载到wp_enqueue_script()
中的某些脚本。我知道wp_enqueue_media()
在那里,但我更喜欢使用依赖 - 有没有办法做到这一点?
【参考方案1】:
您以一种无意的方式进行操作。您的 javascript 代码应该看起来像这样:
$('.custom_media_upload').click(function(e)
e.preventDefault();
var custom_uploader = wp.media(
title: 'Custom Title',
button:
text: 'Custom Button Text'
,
multiple: false // Set this to true to allow multiple files to be selected
)
.on('select', function()
var attachment = custom_uploader.state().get('selection').first().toJSON();
$('.custom_media_image').attr('src', attachment.url);
$('.custom_media_url').val(attachment.url);
$('.custom_media_id').val(attachment.id);
)
.open();
);
【讨论】:
你能建议我如何从上传器中删除媒体库选项custom_uploader.on('open', function()...customize...)
?
有人知道wp.media()
的完整参数列表吗?例如,它也有库,并且需要类型,但我想从选择选项中排除某些 ID。
实例打开了2次,不明白为什么会这样?谢谢
我认为没有完整的参数列表,但如果您愿意,可以查看wp-includes/js/media-views.js
中的代码。只需搜索“media.controller.Library =”【参考方案2】:
如果您不在帖子编辑页面上,请不要忘记使用wp_enqueue_media
(3.5 中的新功能)
要使用旧媒体上传框,您可以这样做:
if(function_exists( 'wp_enqueue_media' ))
wp_enqueue_media();
else
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
【讨论】:
我想知道如何将媒体 API 作为依赖项加载到wp_enqueue_script()
中的某些脚本。我知道wp_enqueue_media()
在那里,但我更喜欢使用依赖 - 有没有办法做到这一点?我正在寻找所有必需库的名称 - 就像您在示例中使用 WP3.5 之前的媒体脚本一样。
最好查看源代码到底排入了什么队列:core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/…【参考方案3】:
我稍微修改了这段代码,使其可以同时用于多个字段:
HTML:
<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px 10px 0px 0px; display:inline-block;" />
<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>
jQuery:
jQuery(document).ready(function($)
$('.custom_media_upload').click(function()
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
wp.media.editor.send.attachment = function(props, attachment)
$(button).prev().prev().attr('src', attachment.url);
$(button).prev().val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
wp.media.editor.open(button);
return false;
);
);
【讨论】:
【参考方案4】:如果编辑器关闭,我没有发现任何可以触发自定义功能的东西。我用这个:
wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function()
//do some stuff
);
或更好:
var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );
if ( editor )
editor.on('close', function()
//do some stuff
);
【讨论】:
有close
和escape
等事件,您可以在wp.media
对象上进行绑定。例如,wp.media.editor.add('content').on('all',function(n)alert(n);)
【参考方案5】:
我没有太多机会玩这个,但对于那些希望利用画廊元素的人来说,这段代码应该会让你上路。
这只是一个起点 - 它只提供了一个逗号分隔的图像 ID 列表,但这应该足以开始有创意了。
<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>
<script type="text/javascript">
jQuery('.custom_media_upload').click(function()
var clone = wp.media.gallery.shortcode;
wp.media.gallery.shortcode = function(attachments)
images = attachments.pluck('id');
jQuery('#custom_media_id').val(images);
wp.media.gallery.shortcode = clone;
var shortcode= new Object();
shortcode.string = function() return '';
return shortcode;
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;
);
</script>
这将使用逗号分隔的图像 ID 列表填充输入字段,按照它们在编辑器中设置的顺序(使用新的拖放功能)。
该函数希望将短代码发回以放置在主编辑器中,但我们不想这样做,因此我们创建了一个新对象,该对象返回一个空白字符串以供插入。
另外请注意,这不会像上面描述的那样处理插入单个图像 - 它只会将其放入帖子编辑器中。所以尝试组合这两个监听器,或者删除相应的选项卡。
编辑
花了一些时间研究核心,我认为使用here 中的技术实际上可以更轻松地完成整个过程,但正如您将阅读的那样,我还没有弄清楚如何预先选择重新打开媒体管理器时的图像。
【讨论】:
php[自定义图像尺寸]添加自定义尺寸图像(上传媒体时的新尺寸)#wordpress#php(代码片段)
php将复选框自定义元字段添加到媒体上传器wordpress(代码片段)
WordPress 自定义插入到帖子按钮
】WordPress自定义插入到帖子按钮【英文标题】:WordPressCustomInsertIntoPostButton【发布时间】:2012-10-2801:29:42【问题描述】:对于使用WordPress的媒体上传器上传的图片,有一个“插入帖子”按钮,可将短代码发送到该图片的编辑器。... 查看详情
Wordpress 自定义元框多张图片上传
】Wordpress自定义元框多张图片上传【英文标题】:Wordpresscustommetaboxmultipleimageupload【发布时间】:2016-08-2523:08:07【问题描述】:我正在使用添加了自定义元框的自定义帖子类型。在自定义元框中,我正在尝试为多个图像添加媒体... 查看详情
带上传的 WordPress 3.0 自定义帖子类型
】带上传的WordPress3.0自定义帖子类型【英文标题】:WordPress3.0customposttypewithupload【发布时间】:2011-03-1601:08:24【问题描述】:有没有办法在自定义帖子类型编辑页面上插入一个(或多个)上传字段?我不想将midia库与所有字段和... 查看详情
带有媒体上传按钮的自定义wordpress窗口小部件,在每个窗口小部件上插入相同的图像(代码片段)
我是一个菜鸟,制作了自己的自定义小部件,我想制作一个自定义小部件来显示网站的特色服务,包括图像,标题,描述和链接按钮。我在stackoverflow上看了很多,最终得到了几乎可以正常工作的东西。问题是媒体按钮起作用,... 查看详情
wp.media undefined 使用 Wordpress 媒体上传器
】wp.mediaundefined使用Wordpress媒体上传器【英文标题】:wp.mediaundefinedusingWordpressMediaUploader【发布时间】:2017-06-0609:57:51【问题描述】:编辑:脚本的其他变体似乎也不起作用,wp_enqueue_media()没问题,但看起来包含wp.media的脚本... 查看详情
html为您的网站提供自定义iphone书签图标(代码片段)
WordPress 自定义帖子特色图片、标题和内容社交媒体共享
】WordPress自定义帖子特色图片、标题和内容社交媒体共享【英文标题】:WordPressCustomPostFeaturedImage,TitleandContentSocialMediaSharing【发布时间】:2016-11-2321:23:50【问题描述】:我想分享自定义帖子特色图片、标题和帖子文本的小内容。... 查看详情
如何将 CSV 上传到 wordpress 自定义表格
】如何将CSV上传到wordpress自定义表格【英文标题】:HowtouploadCSVtowordpresscustomtable【发布时间】:2016-10-0519:37:33【问题描述】:如何将CSV数据上传到wordpress自定义表wp_sonali_data。贝娄是我正在尝试的代码。但没有运气请帮忙这是我... 查看详情
php自定义字段与上传图像选项-wordpress(代码片段)
如何将完全自定义的 PHP/Web 文件上传到 WordPress?
】如何将完全自定义的PHP/Web文件上传到WordPress?【英文标题】:HowtouploadtotallycustomPHP/webfilesintoWordPress?【发布时间】:2018-08-0301:37:34【问题描述】:我知道PHP但不太了解WordPress,我需要将一组文件上传到我客户的WP站点。我想要... 查看详情
Wordpress 使用自定义端点 rest api 上传多个图像(离子作为最终用户)
】Wordpress使用自定义端点restapi上传多个图像(离子作为最终用户)【英文标题】:Wordpressuploadmultipleimageusingcustomendpointrestapi(ionicasenduser)【发布时间】:2019-04-2708:24:07【问题描述】:我想使用ionic(angularjs)将多张图片上传到wordpress... 查看详情
如何为自定义帖子类型创建档案
...rcustomposttype【发布时间】:2014-10-1016:00:00【问题描述】:WordPress框架允许为您的每个自定义帖子类型构建不同的存档模板,例如:archive-event.phptaxonomy-event_category.php是否可以通过执行以下操作为自定义帖子类型创建作者和日期存... 查看详情
Wordpress 媒体上传器无法正确上传
】Wordpress媒体上传器无法正确上传【英文标题】:Wordpressmediauploadernotuploadingproperly【发布时间】:2012-09-0413:38:27【问题描述】:我正在通过Wordpress媒体上传器上传媒体。它说它可以很好地上传文件(如果我检查我的上传文件夹,... 查看详情
带有upload_files true但edit_post false的Wordpress自定义用户角色,我如何删除和编辑媒体?
】带有upload_filestrue但edit_postfalse的Wordpress自定义用户角色,我如何删除和编辑媒体?【英文标题】:Wordpresscustomuserroleswithupload_filestruebutedit_postfalse,howcanideleteandeditmedia?【发布时间】:2015-06-1611:18:17【问题描述】:我用他的能力... 查看详情
PHP - 在自定义 Wordpress 数据库中上传 CSV 数据
】PHP-在自定义Wordpress数据库中上传CSV数据【英文标题】:PHP-UploadCSVdataincustomWordpressdatabase【发布时间】:2015-09-1222:56:56【问题描述】:my_custom_table:idint(11)product_typevarchar(210)product_serialvarchar(210)created_atdatetime//UploadCSVFileif 查看详情
wordpress添加多个图片上传自定义域到任何post类型
Hi,hereiimplementmultipleimageuploadcustomfieldtopageposttypeifyouwantitforanotherposttypejustchangeposttypename.Addthisfollowingcodetoyourcurrenttheme’sfunction.phpfile.Gotoyourpagesfromwordpressad 查看详情