web-dev-qa-db-ja.com

画像メディアアップロードメタボックス

最初の画像アップロードメタボックスを作成しましたが、問題があるようです。

  1. 画像を追加してページを更新してもデータが保存されない - これは私の側ではタイプミスであり、見逃していると確信しています。

  2. 2番目の入力ボックスの[Upload image]ボタンは、最初の入力ボックスのようにメディアライブラリボックスをロードしません - おそらく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);
}
};
});
phpfunctionsmetabox
1
Dannyw24

あなたのJSでは$('#dd_image')の呼び出しが2回ありますが、あなたのHTMLではdd_imageという名前の入力はありませんが、dd_image_oneとdd_image_two ...

そしてあなたのHTMLにも2回id="upload_image_button"があります、それは悪いです:-)。このようにしてあなたが最初のボタンか二番目のボタンをクリックするとき、あなたは同じ正確な呼び出しをしてそしてただ一つの存在しない入力を修正する（#dd_image）

ボタンには2つの異なるIDが必要です。

IDを変更したら、両方のボタンを機能させる最も簡単な方法は、JS呼び出しを複製してIDを変更することです（ボタンと画像の入力）。

それがあなたのために働くことを願っています。

1
anou