web-dev-qa-db-ja.com

Wordpress 3.5の独自のプラグインでディスプレイメディアアップローダ

私は新しいWordPress 3.5のMedia Uploaderにはほとんど問題がありません。私は写真をアップロードする独自のプラグインを作成しました。私はこのコードを使っていますJS：

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

コードは問題なく動作しますが、残念ながらフォームは不完全なようです。写真を選択しても右側に[添付ファイルの表示設定]が表示されません。理由はわかりません。メディアにオプションを追加してみます。

displaySettings: true,
displayUserSettings: true

しかし、それはまたうまくいきません。

jquerymedia
10
user1320276

アップローダのみ

サンプルコードの下では、投稿編集ページでのみ機能します。他のページでも使用する場合は、関数wp_enqueue_media()を含めます。次の見出しを参照してください。

jQuery(document).ready(function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {

    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Media Managerの簡単な説明

  1. 最初に関連するスクリプトを含め、コア関数を使用します。wp_enqueue_media();この関数は、すべての関連設定をセットアップし、メニューテキストをローカライズし、すべての適切なJavaScriptファイルをロードします。

    あなたはwp_enqueue_script()を通してカスタムスクリプトを追加することができます。

    // Also adds a check to make sure `wp_enqueue_media` has only been called once.
// @see: http://core.trac.wordpress.org/ticket/22843
if ( ! did_action( 'wp_enqueue_media' ) )
    wp_enqueue_media();

    カスタムヘッダー用のデフォルトスクリプトも追加します。wp_enqueue_script( 'custom-header' );これは画像選択フレームを作成し、それをボタンやリンクなどのインターフェース要素に結び付けます。その後、選択された画像IDを使用してURLまたは私たちの選択を呼び出します。これは、テーマのカスタムヘッダー画像を選択するときに使用されるのと同じスクリプトです。

  2. ボタンをメディアマネージャに追加します。

    <?php
$modal_update_href = esc_url( add_query_arg( array(
    'page'     => 'my_media_manager',
    '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
), admin_url( 'upload.php' ) ) );
?>

<p>
<a id="choose-from-library-link" href="#"
    data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
    data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
    data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
</a> |
</p>

  3. 最後にAction Functionを定義し、data-update-link URLに渡す画像IDを処理するためのコードを追加する必要があります。

    // Add to the top of our data-update-link page
if ( isset($_REQUEST['file']) ) { 
    check_admin_referer( 'my_media_manager_options' );

        // Process and save the image id
    $options = get_option( 'my_media_manager_options', TRUE );
    $options['default_image'] = absint( $_REQUEST['file'] );
    update_option( 'my_media_manager_options', $options );
}

情報源とヒント：

7
bueltge

このコードをメディアアップローダーに使用するだけです。あなたはjqueryの応答にリンクを得ました。

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>
0
Rutunj sheladiya

私は answer をstackoverflow.comサイトにも入れました、そしてそれは助けになるでしょう。

私は私のカスタムプラグインにメディアアップローダーを使うためにこのメソッドを使っています。これが助けになるかもしれません。

メインテーマファイル（index.php）に を追加してください。

wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');


admin_script.js ファイルでは、

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

管理ファイル（admin_settings.php）、 

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />

もっと詳しく 私のブログで

より多くの情報 http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

0
Sumith Harshan