可以将初始焦点设置为WordPress媒体库中的搜索字段吗?

时间:2017-05-03 作者:Mark Bowen

我只是想知道是否有可能(也许通过一个插件?)当WordPress媒体库弹出作为搜索字段时,设置初始焦点?

我有很多帖子,我需要快速选择图片,需要键入图片名称才能找到它们,这将非常方便,除非我看过Wordpress。org和其他一些我知道的地方,但找不到一个插件可以做到这一点,虽然这里的人可能知道一个或可能是一种方法来做到这一点?

首先非常感谢,

致以最良好的祝愿,

做记号

3 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

以下是一些代码,当单击添加媒体按钮或在设置特色图像时打开媒体模式时,这些代码会将焦点设置为搜索字段。将此代码添加到主题functions.php 或者一个插件来使用它。

注意:这是我的原始解决方案的更新版本。我认为这个更灵活、更可靠,因为它利用了WP Media API。

/**
 * When a wp.media Modal is opened, set the focus to the media toolbar\'s search field.
 */
add_action( \'admin_footer-post-new.php\', \'wpse_media_library_search_focus\' );
add_action( \'admin_footer-post.php\', \'wpse_media_library_search_focus\' );
function wpse_media_library_search_focus() { ?>
<script type="text/javascript">
    ( function( $ ) {
        $( document ).ready( function() {

            // Ensure the wp.media object is set, otherwise we can\'t do anything.
            if ( wp.media ) {

                // Ensure that the Modal is ready. This approach resolves the 
                // need for timers which were used in a previous version of my answer
                // due to the modal not being ready yet.
                wp.media.view.Modal.prototype.on( "ready", function() {
                    // console.log( "media modal ready" );

                    // Execute this code when a Modal is opened.
                    // via https://gist.github.com/soderlind/370720db977f27c20360
                    wp.media.view.Modal.prototype.on( "open", function() {
                        // console.log( "media modal open" );

                        // Select the the .media-modal within the current backbone view,
                        // find the search input, and set the focus.
                        // http://stackoverflow.com/a/8934067/3059883
                        $( ".media-modal", this.el ).find( "#media-search-input" ).focus();
                    });

                    // Execute this code when a Modal is closed.
                    wp.media.view.Modal.prototype.on( "close", function() {
                         // console.log( "media modal close" );
                    });
                });
            }

        });
    })( jQuery );
</script><?php
}
为了子孙后代,这是我发布的原始版本。我认为上面的版本要好得多。

add_action( \'admin_footer-post-new.php\', \'wpse_media_library_search_focus_old\' );
add_action( \'admin_footer-post.php\', \'wpse_media_library_search_focus_old\' );
function wpse_media_library_search_focus_old() {
?>
<script type="text/javascript">
(function($) {
    $(document).ready( function() {

        // Focus the search field for Posts
        // http://wordpress-hackers.1065353.n5.nabble.com/JavaScript-events-on-media-popup-td42941.html
        $(document.body).on( \'click\', \'.insert-media\', function( event ) {
            wp.media.controller.Library.prototype.defaults.contentUserSetting = false;

            setTimeout(function(){
                $("[id^=__wp-uploader-id]").each( function( index ) {
                    if ( $(this).css(\'display\') != \'none\' ) {
                        $(this).find("#media-search-input").focus();
                    }
                }); 
            }, 20);

        }); 

        // Focus the search field for Post Thumbnails
        $( \'#set-post-thumbnail\').on( \'click\', function( event ) {
            wp.media.controller.FeaturedImage.prototype.defaults.contentUserSetting = true;
            setTimeout(function(){
                $("[id^=__wp-uploader-id]").each( function( index ) {
                    //alert( index + ": " + value );
                    if ( $(this).css(\'display\') != \'none\' ) {
                        $(this).find("#media-search-input").focus();
                    }
                }); 
            }, 20);

        }); 
    });
})(jQuery);
</script><?php
}

SO网友:sMyles

第一种方法需要两个部分,一个是通过过滤器将默认选项卡设置为媒体库,另一个是在单击添加媒体时添加自定义JS以设置焦点

1.)将默认选项卡设置为媒体库:

add_filter( \'media_upload_default_tab\', \'smyles_set_default_media_tab\' );

function smyles_set_default_media_tab( $tab ){
    return \'library\';
}
2.)添加自定义JS以设置焦点

add_action( \'admin_footer\', \'smyles_set_default_media_focus\' );

function smyles_set_default_media_focus() {
    // Only output in footer when required
    if ( did_action( \'wp_enqueue_media\' ) ):
    ?>
        <script type="text/javascript">
          jQuery( document ).ready( function ( $ ) {

              $( document ).on( \'click\', \'.insert-media\', function(){
                    // Add slight delay before setting focus just in case
                    setTimeout( function(){
                        $( \'#media-search-input\' ).focus();
                    }, 50 );
              });

          } );
        </script>
    <?php
    endif;
}
第二种方法第二种方法只需要一个步骤,即添加JS,单击“添加媒体”时,JS将自动找到“媒体库”选项卡,然后单击该选项卡,该选项卡还将自动在搜索字段上设置焦点。

add_action( \'admin_footer\', \'smyles_set_default_media_focus_v2\' );

function smyles_set_default_media_focus_v2() {

    // Only execute when required
    if ( did_action( \'wp_enqueue_media\' ) ):
        $tabs = media_upload_tabs();
        if( ! array_key_exists( \'library\', $tabs ) ){
            return;
        }
    ?>
        <script type="text/javascript">
          jQuery( document ).ready( function ( $ ) {

              $( document ).on( \'click\', \'.insert-media\', function(){
                    // Add slight delay for the modal to open
                    setTimeout( function(){
                        $( "a:contains(\'<?php echo $tabs[\'library\']; ?>\')" ).click();
                    }, 50 );
              });

          } );
        </script>
    <?php
    endif;
}
瞧!利润

SO网友:Mark Bowen

感谢戴夫·罗姆西(DaveRomsey)提供的上述代码,我现在将其放入WordPress的一个快速插件中,以防其他人需要类似的东西。

再次感谢Dave!

Download / Clone pluginhttps://github.com/MarkBowenPiano/media-library-search-focus