サポート » プラグイン » 画像アップロード機能について

  • いつもお世話になっております。

    投稿場所はこちらではないのかなぁ~と迷いながらも
    投稿してしまいました。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

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • Custom Field GUI Utility
    というプラグインをおすすめします。
    iniファイルを編集してプラグインを有効化するだけで簡単に希望通りの動きになるかと思います。

    トピック投稿者 hamachan

    (@hamachan)

    ご返信ありがとうございました。
    言葉足らずでした。すみません。

    「Custom Field GUI Utility」は、既に使用しているのですが、
    今回は、入力項目が非常に多く、視覚的にわかりやすくしたい
    というのが、投稿した理由です。

    「Custom Field GUI Utility」だと、縦長になり
    わかりづらいということで、メタボックスを追加して対応
    できれば一番理想なのですが。。。

    画像の追加ポップアップ画面が表示されるので、
    受け渡し部分がうまく働いていないのかなぁ~と思いますが、
    よくわからず、こちらへ投稿しました。

    どうぞよろしくお願い申し上げます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「画像アップロード機能について」には新たに返信することはできません。