O foco inicial pode ser definido para o campo de pesquisa na Biblioteca de Mídia do WordPress?

4

Eu estava imaginando se é possível de alguma forma (através de um addon talvez?) definir o foco inicial quando a biblioteca de mídia do WordPress aparecer como campo de pesquisa?

Eu tenho muitos posts onde eu preciso selecionar imagens muito rápido e preciso digitar os nomes das imagens para encontrá-las e isso seria excepcionalmente acessível, exceto pelo fato de eu ter consultado o Wordpress.org e alguns outros lugares que eu conheço e não consigo encontrar um plugin que pode fazer isso, embora alguém aqui possa saber de uma ou talvez uma maneira de fazer isso?

Muito obrigado antecipadamente,

Felicidades,

Marcar

    
por Mark Bowen 03.05.2017 / 23:57

3 respostas

2

Aqui está um código que irá definir o foco para o campo de pesquisa ao clicar no botão Adicionar mídia ou ao abrir o meio de mídia ao definir uma imagem em destaque. Adicione esse código ao functions.php do seu tema ou a um plug-in para usá-lo.

Nota: esta é uma versão atualizada da minha solução original. Eu acho que este é um pouco mais flexível e confiável, pois aproveita a API de mídia do WP.

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

Para o bem da posteridade, aqui está a versão original que postei. Eu acho que a versão acima é muito melhor.

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

Primeiro método

Isso requer duas partes, uma para definir a guia padrão como biblioteca de mídia por meio de filtro e outra para adicionar o JS personalizado ao foco do conjunto quando a opção Adicionar mídia é clicada

1.) Definir guia padrão como Biblioteca de mídia:

add_filter( 'media_upload_default_tab', 'smyles_set_default_media_tab' );

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

2.) Adicionar JS personalizado para definir o foco

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

O segundo método requer apenas uma etapa, que adiciona JS que encontrará automaticamente a guia Biblioteca de Mídia ao clicar em Adicionar Mídia e clicar nessa guia, que também definirá automaticamente o foco no campo de pesquisa.

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

    
por sMyles 04.05.2017 / 01:17
0

Com todos os agradecimentos a Dave Romsey por seu código acima, eu coloquei isso em um plugin rápido para o WordPress, caso alguém mais precise de algo assim.

Obrigado mais uma vez Dave!

Download / plugin Clone enlace

    
por Mark Bowen 04.05.2017 / 23:15