我正在尝试在我正在开发的主题上为自定义帖子类型设置图像上传器。
目的是让它将图像URL插入到id“元图像”的文本框中,而是将图像插入到内容编辑器字段中!
这是我到目前为止的代码:它显示按钮和文本输入:
<?php
global $post;
$prfx_stored_meta = get_post_meta( $post->ID );
?>
<p>
<label for="meta-image" class="prfx-row-title"><?php _e( 'Service Icon', 'prfx-textdomain' ); ?></label>
<input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $prfx_stored_meta['meta-image'] ) ) echo $prfx_stored_meta['meta-image'][0]; ?>" />
<input type="button" id="meta-image-button" class="button" value="<?php _e( 'Choose or Upload an Image', 'prfx-textdomain' ); ?>" />
</p>
这包括管理区域所需的js:
/**
* Loads the image management javascript
*/
function prfx_image_enqueue() {
global $typenow;
if( $typenow == 'service' ) {
wp_enqueue_media();
// Registers and enqueues the required javascript.
wp_register_script( 'meta-box-image', get_bloginfo('stylesheet_directory').'/js/meta-box-image.js', array( 'jquery' ) );
wp_localize_script( 'meta-box-image', 'meta_image',
array(
'title' => __( 'Choose or Upload an Image', 'prfx-textdomain' ),
'button' => __( 'Use this image', 'prfx-textdomain' ),
)
);
wp_enqueue_script( 'meta-box-image' );
}
}
add_action( 'admin_enqueue_scripts', 'prfx_image_enqueue' );
这是js:
/*
* Attaches the image uploader to the input field
*/
jQuery(document).ready(function(){
// Instantiates the variable that holds the media library frame.
var meta_image_frame;
// Runs when the image button is clicked.
jQuery('#meta-image-button').click(function(e){
// Prevents the default action from occuring.
e.preventDefault();
// If the frame already exists, re-open it.
if ( meta_image_frame ) {
wp.media.editor.open();
return;
}
// Sets up the media library frame
meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
title: meta_image.title,
button: { text: meta_image.button },
library: { type: 'image' }
});
// Runs when an image is selected.
meta_image_frame.on('select', function(){
// Grabs the attachment selection and creates a JSON representation of the model.
var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
// Sends the attachment URL to our custom image input field.
jQuery('#meta-image').val(media_attachment.url);
});
// Opens the media library frame.
wp.media.editor.open();
});
});
关于如何将其实际存储到适当区域的任何想法?