画像アップロード機能について
-
いつもお世話になっております。
投稿場所はこちらではないのかなぁ~と迷いながらも
投稿してしまいました。m(__)mやりたいことは、管理画面にカスタム投稿メタボックスを追加して、
画像アップロード機能の付いたテキストボックスを追加したいということです。いろいろ検索した結果、まさにその通りの記事を見つけたのですが、
「WordPressの投稿画面に画像アップロード機能つきの自作メタボックスを追加する」
⇒ http://vinypara.s236.xrea.com/archives/177画像の追加ポップアップ画面で、画像選択後、
うまくテキストボックスへ反映されないのです。やったことは、上記記事の通りで、
[function.php]
/*管理画面が開いたときに実行*/
add_action(‘admin_menu’, ‘add_my_meta_box’);
/*更新ボタンが押されたときに実行*/
add_action(‘save_post’, ‘save_custom_field_postdata’);/* カスタムフィールドを投稿画面に追加 */
function add_my_meta_box() {
//ページ編集画面にカスタムセクションを追加
add_meta_box(‘page_layout’, ‘メイン画像’, ‘my_meta_box_html’, ‘page’, ‘normal’, ‘high’);
}/* 投稿画面に表示するフォームのHTMLソース */
function my_meta_box_html() {
//既に値がある場合は値をフォームに反映して出力
$uploaded_image = get_post_meta( $_GET[‘post’], ‘upload_image’ );
echo ‘<div id=”uploadedImageForm”>
<label for=”upload_image”>画像</label>
<input id=”upload_image” type=”text” size=”50″ name=”upload_image” value=”‘ . $uploaded_image[0] . ‘” />
<input id=”upload_image_button” type=”button” value=”画像の追加/変更” />
</div>
<div id=”uploadedImageView”>’ . $uploaded_image[0] . ‘</div>’;
}/* 設定したカスタムフィールドの値をDBに書き込む記述 */
function save_custom_field_postdata( $post_id ) {
$mydata = $_POST[‘upload_image’];
if ( “” == get_post_meta( $post_id, ‘upload_image’ )) {
/* page_layoutというキーでデータが保存されていなかった場合、新しく保存 */
add_post_meta( $post_id, ‘upload_image’, $mydata, true ) ;
} else if ( $mydata != get_post_meta( $post_id, ‘upload_image’ )) {
/* page_layoutというキーのデータと、現在のデータが不一致の場合、更新 */
update_post_meta( $post_id, ‘upload_image’, $mydata ) ;
} else if ( “” == $mydata ) {
/* 現在のデータが無い場合、page_layoutというキーの値を削除 */
delete_post_meta( $post_id, ‘upload_image’ ) ;
}
}//バイパススクリプト+メタボックスのスタイリングCSS読み込み
add_action(‘admin_print_scripts’, ‘add_my_js’);
add_action(‘admin_head’ , ‘add_my_css’);
function add_my_js() {
wp_enqueue_script(‘admin_print_styles’, get_bloginfo(‘url’) . ‘/bd/001/js/my_admin_scripts.js’);
}
function add_my_css() {
echo “\n” . ‘<link type=”text/css” rel=”stylesheet” href=”‘ . get_bloginfo(‘url’) . ‘/bd/001/css/my_admin.css” />’ . “\n”;
}[my_admin_script.js]
jQuery(document).ready(function() {
var formfield;
//メタボックス内のボタンからmedia_upload.phpを呼び出す
jQuery(‘#upload_image_button’).click(function() {
jQuery(‘#upload_image’).addClass(‘image’);
formfield = jQuery(‘.image’).attr(‘name’);
tb_show(”, ‘media-upload.php?type=image&TB_iframe=true’);
return false;
});window.original_send_to_editor = window.send_to_editor;
//メディアアップローダーからきた変数htmlを各々へ挿入
window.send_to_editor = function(html){
//「”」を「’」に変換
html = new String(html).replace(/\”/g, “‘”);
if (formfield) {
jQuery(‘.image’).val(html);
tb_remove();
jQuery(‘#upload_image’).removeClass(‘image’);
//挿入した画像プレビューさせるエリアへソースをいれる
jQuery(‘#uploadedImageView’).html(html);
} else {
window.original_send_to_editor(html);
}
};
});[my_admin.css]
#uploadedImageView {
border-top: 1px solid #DFDFDF;
margin-top: 10px;
padding-top: 10px;
overflow: auto;
}
#uploadedImageView img {
border: 1px solid #DFDFDF;
padding: 5px;
}上記内容で試しています。
どうか皆様、よろしくお願いいたします。m(__)m
- トピック「画像アップロード機能について」には新たに返信することはできません。