我创建了一个meta-box
通过WordPress的默认媒体上传程序提供上传功能。
只要我有一个上传选项,这就可以了<你猜怎么着?我想要另一个。
如果我这样做,媒体盒就会打开,我可以选择一个图像。问题是两者input
-字段由图像的URL填充。
我想能够添加多个选择选项来上传图像,最好使用一个脚本。
以下是脚本(输出):
function dynamic_meta_callback( $post ) {
wp_nonce_field( basename( __FILE__ ), \'dynamic_nonce\' );
$dsm = get_post_meta( $post->ID );
$post = get_post($post_id, ARRAY_A);
$pn = $post[\'post_name\'];
$a = \'_\'.$pn.\'_1\';
$b = \'_\'.$pn.\'_2\';
?>
<div class="image_large" style="background-image: url(<?php echo $dsm[\'dynamic-image\'.$a.\'\'][0] ?>); background-repeat: no-repeat;">
<p><strong>Image 1</strong></p>
<p>
<label for="dynamic-image" class="dynamic-row-title"><?php _e( \'Image 1\', \'dynamic-textdomain\' )?></label>
<input type="text" name="dynamic-image<?php echo $a; ?>" class="dynamic-image" value="<?php if ( isset ( $dsm[\'dynamic-image\'.$a.\'\'] ) ) echo $dsm[\'dynamic-image\'.$a.\'\'][0]; ?>" />
<input type="button" class="dynamic-image-button" class="button" value="<?php _e( \'Choose or Upload\', \'dynamic-textdomain\' )?>" />
</p>
</div>
<div class="image_large" style="background-image: url(<?php echo $dsm[\'dynamic-image\'.$b.\'\'][0] ?>); background-repeat: no-repeat;">
<p><strong>Image 2</strong></p>
<p>
<label for="dynamic-image" class="dynamic-row-title"><?php _e( \'Image2\', \'dynamic-textdomain\' )?></label>
<input type="text" name="dynamic-image<?php echo $b; ?>" class="dynamic-image" value="<?php if ( isset ( $dsm[\'dynamic-image\'.$b.\'\'] ) ) echo $dsm[\'dynamic-image\'.$b.\'\'][0]; ?>" />
<input type="button" class="dynamic-image-button" class="button" value="<?php _e( \'Choose or Upload\', \'dynamic-textdomain\' )?>" />
</p>
</div>
<?php
}
这里是保存功能function dynamic_meta_save( $post_id ) {
$post = get_post($post_id, ARRAY_A);
$pn = $post[\'post_name\'];
$a = \'_\'.$pn.\'_1\';
$b = \'_\'.$pn.\'_2\';
// Checks save status
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ \'dynamic_nonce\' ] ) && wp_verify_nonce( $_POST[ \'dynamic_nonce\' ], basename( __FILE__ ) ) ) ? \'true\' : \'false\';
// Exits script depending on save status
if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
return;
}
// Checks for input and sanitizes/saves if needed
// Checks for input and saves if needed
if( isset( $_POST[ \'dynamic-image\'.$a.\'\' ] ) ) { update_post_meta( $post_id, \'dynamic-image\'.$a.\'\', $_POST[ \'dynamic-image\'.$a.\'\' ] );}
if( isset( $_POST[ \'dynamic-image\'.$b.\'\' ] ) ) { update_post_meta( $post_id, \'dynamic-image\'.$b.\'\', $_POST[ \'dynamic-image\'.$b.\'\' ] );}
}
add_action( \'save_post\', \'dynamic_meta_save\' );
这是调用外部js
并提供数据function dynamic_image_enqueue() { global $typenow;
$post = get_post($post_id, ARRAY_A);
if( $typenow == \'page\' ) { wp_enqueue_media();
wp_register_script( \'dynamic-box-image\', plugin_dir_url( __FILE__ ) . \'dynamic-box-image.js\', array( \'jquery\' ) );
wp_localize_script( \'dynamic-box-image\', \'meta_image\',
array(\'title\' => __( \'Choose or Upload\', \'dynamic-textdomain\' ),
\'button\' => __( \'Use this image\', \'dynamic-textdomain\' ),
));
wp_enqueue_script( \'dynamic-box-image\' ); }}
add_action( \'admin_enqueue_scripts\', \'dynamic_image_enqueue\' );
}
这就是外部js
看起来像jQuery(document).ready(function($){
// Instantiates the variable that holds the media library frame.
var meta_image_frame;
// Runs when the image button is clicked.
$(\'.dynamic-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 ) { meta_image_frame.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(){ var media_attachment = meta_image_frame.state().get(\'selection\').first().toJSON();
$(\'.dynamic-image\').val(media_attachment.url); });
// Opens the media library frame.
meta_image_frame.open();
});
});
希望有人能帮我!------------更新--------------
我尝试给输入按钮一个唯一的值,并将其传递给外部.js
. 发现每次选择图像时都必须将值保存到数据库中。如果不是每个输入字段都会选择最后一幅图像的值!
仍在与此斗争!