it-swarm.com.de

Kann der anfängliche Fokus auf das Suchfeld in der WordPress-Medienbibliothek gesetzt werden?

Ich habe mich nur gefragt, ob es irgendwie möglich ist, (vielleicht über ein Addon?) den anfänglichen Fokus zu setzen, wenn die WordPress-Medienbibliothek als Suchfeld angezeigt wird.

Ich habe viele Posts, in denen ich Bilder sehr schnell auswählen und die Namen der Bilder eingeben muss, um sie zu finden. Dies wäre außerordentlich praktisch, es sei denn, ich habe auf Wordpress.org und einigen anderen mir bekannten Orten nachgesehen von und können kein Plugin finden, das dies kann, obwohl jemand hier vielleicht eine oder vielleicht eine Möglichkeit kennt, dies zu tun?

Vielen Dank im Voraus,

Schöne Grüße,

Kennzeichen

4
Mark Bowen

Hier ist ein Code, der den Fokus auf das Suchfeld setzt, wenn Sie auf klicken Add Media Taste oder beim Öffnen des Medienmodals beim Einstellen eines vorgestellten Bildes. Fügen Sie diesen Code zum functions.php Ihres Themas oder zu einem Plugin hinzu, um ihn zu verwenden.

Hinweis: Dies ist eine aktualisierte Version meiner ursprünglichen Lösung. Ich denke, dieses ist etwas flexibler und zuverlässiger, da es die WP Media-API nutzt.

/**
 * 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
}

Für die Nachwelt ist hier die Originalversion, die ich gepostet habe. Ich denke die obige Version ist viel besser.

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
}
2
Dave Romsey

Erste Methode

Dies erfordert zwei Teile, einen zum Festlegen der Standardregisterkarte als Medienbibliothek über den Filter und einen zum Hinzufügen eines benutzerdefinierten JS, um den Fokus festzulegen, wenn auf Medien hinzufügen geklickt wird

1.) Standardregisterkarte als Medienbibliothek festlegen:

add_filter( 'media_upload_default_tab', 'smyles_set_default_media_tab' );

function smyles_set_default_media_tab( $tab ){
    return 'library';
}

2.) Fügen Sie benutzerdefiniertes JS hinzu, um den Fokus festzulegen

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

Zweite Methode

Bei der zweiten Methode ist nur ein Schritt erforderlich, bei dem JS hinzugefügt wird, um die Registerkarte Medienbibliothek automatisch zu finden, wenn auf Medien hinzufügen geklickt wird, und auf diese Registerkarte geklickt wird, um den Fokus automatisch auf das Suchfeld zu legen.

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

Voila! Profitieren!

0
sMyles

Vielen Dank an Dave Romsey für den obigen Code. Ich habe ihn jetzt in ein schnelles Plugin für WordPress eingefügt, falls jemand etwas Ähnliches benötigt.

Nochmals vielen Dank, Dave!

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

0
Mark Bowen