サポート » 使い方全般 » 画像選択ができるカスタムフィールドを追加する方法について

  • 解決済 quiqui

    (@quiqui)


    カスタムフィールドで画像選択ボタンを設置したいと思っているのですが、苦戦しています。WordPressのバージョンは4.9.5です。ご助言いただけると幸いです。

    まずは、functions.phpに以下を追加して、画像選択用のカスタムフィールドを追加しました。併せてmedia-uploader.jsを呼び出しています。

    function uploader_script_load() { 
      wp_enqueue_script( 'media-uploader', get_template_directory_uri() . '/js/media-uploader.js', array(), '1.0', true );
      wp_enqueue_script('thickbox');
    }
    add_action('admin_print_scripts', 'uploader_script_load');
        
    function image_meta() {
      add_meta_box('image-meta', '画像選択', 'image_meta_fields', 'post', 'normal', 'high');
    }
    add_action('admin_menu', 'image_meta');
    
    function image_meta_fields($post){
      echo wp_nonce_field('image-meta', 'my_meta_nonce');
      $add_img = get_post_meta($post->ID, 'add_img' );
      $add_img[0] = (isset($add_img[0])) ? $add_img[0] : '';
      $view = ($add_img[0] !== '') ? '<img src="' . $add_img[0] . '">' : ''; 
      $html = '<fieldset>' 
            . '<label for="add_img">画像:</label>'
            . '<input id="add_img" type="text" size="50" name="add_img" value="' . $add_img[0] . '">'
            . '<input class="upload_button" type="button" value="画像の選択">'
            . '<input class="media_clear" type="button" name="media_clear" value="クリア">'
            . '<div id="view" class="view">' . $view . '</div>'
            . '</fieldset>';
      echo $html;
    }
    
    function image_meta_save($post_id){
      if (isset($_POST['my_meta_nonce_wpnonce']) && !wp_verify_nonce( $_POST['my_meta_nonce'], 'image-meta')) {
        return $post_id;
      }
      if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return $post_id;
      }
      if (isset($_POST['post_type']) && 'imagemeta' == $_POST['post_type']) {
        if (!current_user_can('edit_post', $post_id)) {
          return $post_id;
        }
      } else {
        return $post_id;
      }
      // フォームの値を取得
      $upload_img = $_POST['add_img'];
      // フォームの値を更新
      if ($upload_img == '') {
        delete_post_meta($post_id, 'add_img');
      } else {
        update_post_meta($post_id, 'add_img', $upload_img);
      }
    }
    add_action('save_post', 'image_meta_save');

    media-uploader.jsの中身はhttps://firegoby.jp/archives/4031の情報を参考にしました。

    jQuery(document).ready(function($){
        var custom_uploader;
        $('.upload_button').click(function(e) {
            e.preventDefault();
            if (custom_uploader) {
                custom_uploader.open();
                return;
            } 
            custom_uploader = wp.media({
                title: 'Choose Image',
                button: {
                    text: 'Choose Image'
                },  
                multiple: true
            }); 
            custom_uploader.on('select', function() {
                var images = custom_uploader.state().get('selection');
                images.each(function(file){
                    $('#view').append('<img src="'+file.toJSON().url+'" />');
                });
            }); 
            custom_uploader.open();
        }); 
    });

    投稿画面にカスタムフィールドと画像選択ボタンは表示できたのですが、ボタンをクリックしても何も反応しません。Chromeのデベロッパーツールでコンソールを確認すると、以下のようなエラーが表示されてしまいます。

    HTMLInputElement.<anonymous> (media-uploader.js:13)
    HTMLInputElement.dispatch (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,jquery-ui-position,wp-a11y,u&load[]=nderscore,wp-pointer,quicktags,jquery-ui-draggable,jquery-ui-tabs,jquery-ui-resizable,jquery-ui-button,jquery-ui-dialog&ver=4.9.5:3)
    HTMLInputElement.r.handle (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,jquery-ui-position,wp-a11y,u&load[]=nderscore,wp-pointer,quicktags,jquery-ui-draggable,jquery-ui-tabs,jquery-ui-resizable,jquery-ui-button,jquery-ui-dialog&ver=4.9.5:3)

    カスタムフィールドでメディアアップローダーの呼び出しをする方法について、ご教示いただけると大変ありがたいです。

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

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは。

    原因はお答えできないのですが、twentyfifteenのテーマに入れて試したところ、メディアアップローダが起動し画像選択後、画像の表示まで確認できました。

    以下検証バージョン、ブラウザ

    • WordPress 4.9.5
    • Firefox Quantum
    • Chrome
    トピック投稿者 quiqui

    (@quiqui)

    Tsuyoshi.様
    コメントありがとうございます。

    TwentySeventeenでも試してみた所、メディアアップローダーは起動できました。
    テーマ側に原因がありそうですね。失礼しました。

    Please post your question to the ImageMeta support forums, here:
    https://wordpress.org/support/plugin/imagemeta

    If you explain what you wish for the plugin to do, it’s possible the changes can be made for you.

    ERA404

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「画像選択ができるカスタムフィールドを追加する方法について」には新たに返信することはできません。