后台设置页面使用WordPress媒体上传工具上传图片

Joker织梦开发者

WordPress 的媒体上传工具有着良好的用户体验，即时从来没有接触过 WordPress 的新手，使用一两遍之后也会很快上手。开发 WordPress 设置页面的时候，如果我们需要用户上传图片，直接调用 Woi f 7 a ( ErdPress 的媒体上传工具是一个非常好的选择。

在本文中，我们将通过简单的几段示例代Z 8 2 p \码，为大家{ A [ }介绍怎么在 Wordh 9 ZPress 的设置页面调用 WordPress 的媒体上传工具来实现上传字段。

1、实现需要( G ] 7 S : ~的 Javascript 代码

首先，我们需要在主题或插件文件夹中创建一个 JavaScript 文件（如：media-upl[ C W _ h / T + Woader.js），该文件中包含如下代码。

jQuery(document).ready(function($){
var mediaUploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) \ ~ w e X x W ? 4123;
mediaUploader.open();
ret( Z \ [ - vurn;
}
mediaUploader = wp.media.frames.file_frame = wp.3 X emedia({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('selectD G : |', function() {
var attachment = mediaUploader.state().get('selection').f( ! + i j q ^ pirst().toJSOs A XN();
// 插入媒体URL到背景图像字段中
$('#background_image').val(attachme9 f + Cnt.url);
}&L ? ~ & 1 q#041;;
mediaUploader.open();
});
});

上面代码所做的工作很简单，当我们点击 #upload_imagc O \ i # ?e_button 按钮时，代码调用 WordPress 的媒体上传工具，用户选择图片后，插入图片网址到 #background_image 字段，作为该字段的值。

创建并保存好上面的代码文件后，下一步，我们需要把这个 JavaScriG b y ^pt 文件加载到页面中。

add_aG } Q J i F \ction('admin_enqueue_scripts', function () {
wp_enqueue_media();
wp_register_script('media-uploader4 i W C X k 5 B +',P % \ $ S & plugins_url} 1 \040;'media-uploader.js', __FI; D V l =LE__ ), array('jque~ * 3 3 l # ( ` @ry'));
wpn * v_enqueue_script('media-uploader');
});

需要注意的是，因为本示例中，我们开发( T C i _ $ ! %的是后台页面p { K [，需要使用 admin_enqueue_scripts 钩子来加载 JavaScript 文件，如果是前端页面，我们需要使用 wp_enqueue_scJ o ;ripts 钩子。

2、实现表单字G F Q段

实现了上传的 JavaScript 功能后，下一步，我们需要在对应的位置插入包含对应 ID 的表单字段。

<input id="background_image" type=&quoN K ( K ;t;text" name="background_image" value="<?php echo get_option('background_image'); ?>" /&gc n R ] F } w Y $t;
&X C q Q N 0 glt;input id="up\ M $ ) 0 M & :load_image_button" type="button" class="button-primary" valuB I : ` & W 6 G Ce=&) * G 7 R z Hquoq i y u u 5 #t;Insert Image" />