你很接近。这和我最近做的事情很相似。下面是对正在运行的代码的重写。此外,在整个函数中,我将“image”一词改为“video”,以便对其进行恰当的命名。最后,我更改了管理面板中的方向,使此元框显示在内容编辑器上方。首先:
// add necessary scripts
add_action(\'plugins_loaded\', function(){
if($GLOBALS[\'pagenow\']==\'post.php\'){
add_action(\'admin_print_scripts\', \'my_admin_scripts\');
add_action(\'admin_print_styles\', \'my_admin_styles\');
}
});
function my_admin_scripts() { wp_enqueue_script(\'jquery\'); wp_enqueue_script(\'media-upload\'); wp_enqueue_script(\'thickbox\'); }
function my_admin_styles() { wp_enqueue_style(\'thickbox\'); }
接下来,添加元框以及表单字段和上载按钮的html:
add_action(\'add_meta_boxes\', function(){ add_meta_box(\'video-metabox\', \'Add a Video\',\'func99999\', get_post_types(),\'top\', \'high\'); }, 9);
function func99999($post){
$url =get_post_meta($post->ID,\'video-for-post\', true); ?>
<label for="video_URL">
<input id="video_URL" type="text" size="36" name="video_URL" value="<?php echo $url;?>" />
<input id="upload_video_button" class="button" type="button" value="Choose a Video" />
<br />Choose a video from the media library then, update your post/page to save it.<br /><br />
// This is to display the video in the admin area
<video class="video" controls>
<source src="<?php echo $url;?>" type="video/mp4" id="vidsrc">
Your browser does not support HTML5 video.
</video>
</label>
然后添加jquery(我添加了一行css以在元框上方提供一些空间):
<script>
jQuery(document).ready(function($){
$(\'#video-metabox.postbox\').css(\'margin-top\',\'30px\');
var custom_uploader;
$(\'#upload_video_button\').click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: \'Choose a Video\',
button: {
text: \'Choose a Video\'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field\'s value
custom_uploader.on(\'select\', function() {
attachment = custom_uploader.state().get(\'selection\').first().toJSON();
$(\'#video_URL\').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
</script>
接下来,为url提供保存功能:
<?php
}
add_action( \'save_post\', function ($post_id) {
if (isset($_POST[\'video_URL\'])){
update_post_meta($post_id, \'video-for-post\',$_POST[\'video_URL\']);
}
});
最后,添加一个函数,将元框移动到内容编辑器上方。这将在您的管理页面上创建一个名为top的位置,因此请确保与代码中包含的参数中的位置和优先级相匹配,以将元框添加到“top”,并将优先级设置为“high”。如果您不想将元框移到顶部,只需删除此函数,并将元框参数中的代码更改为“normal”或“side”,并将优先级从“high”更改为“default”,您还可能需要删除jquery行“$(\'\\video metabox.postbox”).css(\'margin-top\',\'30px\');”如果未将元框放置在内容编辑器上方,请删除空间:
add_action(\'edit_form_after_title\', function() {
do_meta_boxes(get_current_screen(), \'top\', $post);
unset($wp_meta_boxes[get_post_type($post)][\'top\']);
});
如果您需要像我一样仅在某个页面模板上显示此元框,您可以将最后一个函数更改为以下内容:
add_action(\'edit_form_after_title\', function() {
global $post, $wp_meta_boxes;
if ( \'template-name.php\' == get_post_meta( $post->ID, \'_wp_page_template\', true ) ) {
do_meta_boxes(get_current_screen(), \'top\', $post);
unset($wp_meta_boxes[get_post_type($post)][\'top\']);
}
});