WordPress的媒体按钮设置

我已经在我的wordpress管理员中建立了一个自定义选项页面。在其中, 我有一些利用以下内容的”媒体”选择器按钮：

jQuery( document ).ready( function( $ ) {
    // pop the media box
    $('.gyo_upload').on( 'click', function( e ) {
        e.preventDefault();
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var $button = $( this );
        wp.media.editor.send.attachment = function( props, attachment ) {
            alert(props.library);
            var $_which = $button.data( 'which' );
            $( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
            $( '#' + $_which ).val( attachment.url );
            wp.media.editor.send.attachment = send_attachment_bkp;
        }
        wp.media.editor.open( $button );
        return false;
    } );
    $('.remove_image_button').click(function() {
        var answer = confirm('Are you sure?');
        if (answer == true) {
            var src = $(this).parent().prev().attr('data-src');
            var $this = $( this );
            var $_which = $this.data( 'which' );
            $( '#img_' + $_which ).attr('src', '');
            $( '#' + $_which ).val('');
        }
        return false;
    });
} );

尽管效果很好, 但我还没有发现如何将其限制为仅显示图像, 而是显示整个媒体范围。

如何强制它仅使用/显示图像？

#1

我的建议是更改查询参数, 以便仅在媒体库中显示图像。你可以将以下代码段添加到functions.php文件中

add_filter('ajax_query_attachments_args', function($query){

  /**
   * check if you're on the correct page
   */
  if(filter_var($_SERVER['HTTP_REFERER'], FILTER_VALIDATE_URL) == 
     'https://yourhostdomain.com/wp-admin/admin.php?page=_your_options_page'){
      $query['post_mime_type'] = [
         'image/jpeg', 'image/gif', 'image/png', 'image/bmp', 'image/tiff', 'image/x-icon'
      ];
  }
  return $query;
});

#2

我实际上已经弄清楚了。

我最终修改了问题中的代码, 以包括”类型”检查以弹出完整的媒体浏览器, 或仅弹出图像浏览器：

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

    // pop the media box
    $('.gyo_upload').on( 'click', function( e ) {

        // prevent the default behavior
        e.preventDefault();

        // get what we're clicking
        var $button = $( this );

        // now figure out which one we want to popup
        var $what = $button.data( 'what' );

        // what do we actually want to popup here?
        if ( $what == 'image' ) {
            // image frame
            mediaUploader = wp.media.frames.file_frame = wp.media( {
                title: 'Choose Image', button: {
                text: 'Choose Image'
                }, multiple: false } );
            mediaUploader.on( 'select', function( ) {
                var $_which = $button.data( 'which' );
                var attachment = mediaUploader.state().get( 'selection' ).first().toJSON();
                $( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                $( '#' + $_which ).val( attachment.url );
            } );
            mediaUploader.open();
        } else if ( $what == 'media' ) {
            // media frame
            var send_attachment_bkp = wp.media.editor.send.attachment;
            wp.media.editor.send.attachment = function( props, attachment ) {
                var $_which = $button.data( 'which' );
                $( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                $( '#' + $_which ).val( attachment.url );
                wp.media.editor.send.attachment = send_attachment_bkp;
            }
            wp.media.editor.open( $button );
        }       

        return false;
    } );

    // process the remove attachment button
    $( '.remove_image_button' ).click( function() {
        var answer = confirm( 'Are you sure?' );
        if ( answer == true ) {
            var $this = $( this );
            var $_which = $this.data( 'which' );
            $( '#img_' + $_which ).attr('src', '');
            $( '#' + $_which ).val( '' );
        }
        return false;
    } );

} );