¿Se puede configurar el enfoque inicial para buscar el campo en la Biblioteca de medios de WordPress?

4

Me preguntaba si es posible de alguna manera (¿a través de un complemento?) establecer el enfoque inicial cuando la biblioteca de medios de WordPress aparece como el campo de búsqueda?

Tengo muchas publicaciones en las que necesito seleccionar imágenes muy rápido y debo escribir los nombres de las imágenes para encontrarlas, y esto sería excepcionalmente útil, excepto que he buscado en Wordpress.org y en algunos otros lugares. ¿Conozco y no puedo encontrar un complemento que pueda hacer esto aunque alguien aquí pueda saber de uno o quizás una forma de hacerlo?

Muchas gracias de antemano,

Mis mejores deseos,

marca

    
pregunta Mark Bowen 03.05.2017 - 23:57

3 respuestas

2

Aquí hay un código que establecerá el foco en el campo de búsqueda al hacer clic en el botón Agregar medio o al abrir el modal de medios al configurar una imagen destacada. Agregue este código a functions.php de su tema o a un complemento para usarlo.

Nota: Esta es una versión actualizada de mi solución original. Creo que este es un poco más flexible y confiable porque aprovecha la API WP Media.

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

Por el bien de la posteridad, aquí está la versión original que publiqué. Creo que la versión anterior es mucho mejor.

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
}
    
respondido por el Dave Romsey 04.05.2017 - 00:10
0

Primer método

Esto requiere dos partes, una para establecer la pestaña predeterminada como biblioteca de medios a través del filtro y otra para agregar JS personalizado para establecer el enfoque cuando se hace clic en Agregar medios

1.) Establezca la pestaña predeterminada como Biblioteca de medios:

add_filter( 'media_upload_default_tab', 'smyles_set_default_media_tab' );

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

2.) Agrega JS personalizado para establecer el enfoque

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

Segundo método

El segundo método solo requiere un paso, que agrega JS que encontrará automáticamente la pestaña de la Biblioteca de Medios cuando se haga clic en Agregar Medios, y haga clic en esa pestaña, que también se enfocará automáticamente en el campo de búsqueda.

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! Beneficio!

    
respondido por el sMyles 04.05.2017 - 01:17
0

Gracias a Dave Romsey por su código anterior. Ahora he colocado esto en un complemento rápido para WordPress en caso de que alguien más necesite algo como esto.

Gracias de nuevo Dave!

Descargar / Clonar plugin enlace

    
respondido por el Mark Bowen 04.05.2017 - 23:15

Lea otras preguntas en las etiquetas