如何创建自定义元框以将MP4视频添加到页面?

时间:2016-09-27 作者:cmd

我从几篇不同的帖子中拼凑出代码(因为我是php和jquery的新手),试图在wordpress管理中获得mp4视频URL输入字段。我已经能够在wordpress admin中让媒体上传程序显示、选择文件并在选择时使用URL填充表单字段,但是当我单击update时,URL消失。我一辈子都搞不清楚,一旦页面更新,我需要做什么来显示这个URL。任何帮助都将不胜感激!这是我添加到函数中的代码。php(请忽略id etc被称为“上传图像”,而不是视频,我会在工作后更改所有这些内容):

    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\'); }

    add_action(\'add_meta_boxes\', function(){  add_meta_box(\'my-metaboxx1\', \'my-metaboxx1-title\',\'func99999\', get_post_types(),\'normal\'); }, 9);

function func99999($post){ 
$attachment =get_post_meta($post->ID,\'my-image-for-post\', true);   ?>
以下是表单字段的HTML:

<label for="upload_image">
<input id="upload_image" type="text" size="36" name="ad_image" value="<?php echo $attachment; ?>" /> 
<input id="upload_image_button" class="button" type="button" value="Upload Image" />
<br />Enter a URL or upload an image
</label>
以下是jQuery:

<script>
    jQuery(document).ready(function($){


var custom_uploader;


$(\'#upload_image_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 Image\',
        button: {
            text: \'Choose Image\'
        },
        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();
        $(\'#upload_image\').val(attachment.url);
        $(\'#upload_image\').attr("src", attachment.url);
    });

    //Open the uploader dialog
    custom_uploader.open();

});


});
</script>
下面是我用来尝试保存输入字段的内容:

add_action( \'save_post\', function ($post_id) {
if (isset($_POST[\'upload_image\'])){
    update_post_meta($post_id, \'my-image-for-post\',$_POST[\'upload_image\']);
}
});
是否可能需要更改此行中的值,或者是否存在更大的问题?

<input id="upload_image" type="text" size="36" name="ad_image" value="<?php echo $attachment; ?>" />

1 个回复
SO网友:Storio digital

你很接近。这和我最近做的事情很相似。下面是对正在运行的代码的重写。此外,在整个函数中,我将“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\']);
}
});

相关推荐

WP-ADMIN:“对不起,您不能访问此页面。”

两周后不使用我们的WP站点,登录/wp-admin/ 出现白屏错误:抱歉,不允许您访问此页面。我有:重命名plugins 到plugins.temp.通过phpMyAdmin创建了一个新的管理员用户。新用户已user_meta 的作用a:1:{s:13:"administrator";s:1:"1";}.</已重命名themes 到themes.temp.</删除核心WordPress文件,并替换为新上载的文件</已替换.htaccess 使用默认