Wordpress 媒体按钮设置

Question

我在我的 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;
    });
} );

虽然效果很好，但我还没有找到如何将其限制为仅显示图像，而是显示完整的媒体范围。

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

Answer 1

我的建议是更改查询参数，以便在媒体库中仅显示图像。您可以将如下所示的 sn-p 添加到您的 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;
});

Answer 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;
    } );

} );