Image media upload metabox

时间:2013-09-29 作者:Dannyw24

我已经创建了第一个图像上载元数据库,但似乎有问题。

当我添加图像然后更新页面时,数据不会保存-我确信这是我自己的错别字,我看不到。

第二个输入框的上载图像按钮无法像第一个一样加载媒体库框-Js可能会出现问题吗?

这是我的代码

<?php

/*
Plugin Name: Meta Box Media Library Image 
Plugin URI: 
Description: Adds the ability to select an image from the media library
Version: 1.0
Author: Danny Wardle
Author URI: www.thevisionists.com
License: GPLv2
*/

//second metabox

?>
<?php 
add_action( \'add_meta_boxes\', \'dd_image_create\' );

function dd_image_create() {

//create a custom meta image box
add_meta_box ( \'dd-meta-image\', \'Display chosen image\', \'dd_image_function\', \'page\', \'normal\', \'high\' );

}

?>

<?php

function dd_image_function( $post ) {
$dd_image_one = get_post_meta ($post->ID, \'dd_image_one\', true);
$dd_image_two = get_post_meta($post->ID, \'dd_image_two\', true);
?>
Image One
<input id="dd_image_one" type="text" size="75" name="dd_image_one" value="<?php echo esc_url( $dd_image_one ); ?>" />
<input id="upload_image_button" value="Media Library Upload" class="button-secondary" />
<br /> Enter an image URL or use an image from the Media Library
<br />
<br />
Image Two
<input id="dd_image_two" type="text" size="75" name="dd_image_two" value="<?php echo esc_url( $dd_image_two ); ?>" />
<input id="upload_image_button" value="Media Library Upload" class="button-secondary" />
<br /> Enter an image URL or use an image from the Media Library

<?php

}

//script actions with page detection
add_action(\'admin_print_scripts-post.php\', \'dd_image_admin_scripts\');
add_action(\'admin_print_scripts-post-new.php\', \'dd_image_admin_scripts\');

function dd_image_admin_scripts() {
wp_enqueue_script( \'boj-image-upload\',
plugins_url( \'/dd-meta-box/dd-meta-image.js\' ),
array( \'jquery\', \'media-upload\', \'thickbox\' ) );
}

//style actions with page detection
add_action(\'admin_print_styles-post.php\', \'dd_image_admin_styles\');
add_action(\'admin_print_styles-post-new.php\', \'dd_image_admin_styles\');

function dd_image_admin_styles() {
wp_enqueue_style( \'thickbox\' );
}

// hook to save the meta data 

add_action ( \'save_post\', \'dd_image_save_meta\' );

function dd_image_save_meta( $post_id ) {
//save the metadata

//verify the metadata is set
if ( isset ($_POST[\'dd_image_one\'])) {
//save the metadata
update_post_meta( $post_id, \'dd_image_one\', esc_url_raw( $_POST[\'dd_image\']));

}

if ( isset ($_POST[\'dd_image_two\'])) {
    update_post_meta( $post_id, \'dd_image_two\', esc_url_raw( $_POST[\'dd_image\']));
}

}

?>
js文件代码

jQuery(document).ready(function($) {
var formfield = null;

$(\'#upload_image_button\').click(function() {
$(\'html\').addClass(\'Image\');
formfield = $(\'#dd_image\').attr(\'name\');
tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
return false;
});

// user inserts file into post.
//only run custom if user started process using the above process
// window.send_to_editor(html) is how wp normally handle the received data

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
var fileurl;

if (formfield != null) {
fileurl = $(\'img\',html).attr(\'src\');
$(\'#dd_image\').val(fileurl);
tb_remove();
$(\'html\').removeClass(\'Image\');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});

1 个回复
SO网友:anou

在JS中,您有两次调用$(\'#dd_image\')在HTML中没有名为dd_image的输入,但是dd_image_one和dd_image_two。。。

而且在HTML中,您有两次id="upload_image_button"这很糟糕:-)。这样,当您单击第一个或第二个按钮时,您可以执行相同的调用,并且只修改一个不存在的输入(#dd\\u image)

您的按钮必须有两个不同的ID。

一旦更改了ID,使这两个按钮都工作的最简单方法就是复制JS调用并在应该的地方更改ID(按钮和图像输入)

希望对你有用。

结束

相关推荐

在自定义metabox中将页面从html更改为文本后更新页面时的所有tincymce开关

我有一个使用wp\\u编辑器的自定义元框,当我切换到文本编辑器而不是视觉时,更新时,主要内容tinymce也会更改为文本视图。我想知道我是做错了什么,还是wordpress在创建自定义metabox和wp_编辑器时的正常行为?我用来设置所有这些的代码是:add_action(\'add_meta_boxes\', \'page_tagline_meta_box\'); function page_tagline_meta_box($post) { global $post;