web-dev-qa-db-ja.com

WordPressメディアライブラリの検索フィールドに初期フォーカスを設定できますか？

どういうわけか （アドオン経由で？） WordPressメディアライブラリが検索フィールドになったときに最初のフォーカスを設定することが可能かどうかと思っていましたか？

私は非常に速く画像を選択し、それらを見つけるために画像の名前をタイプする必要があるというたくさんの投稿を持っています、そして私が知っている私が知っている他の場所これを実行できるプラグインが見つかりませんでしたが、ここにいる誰かがその方法を知っているかもしれませんし、おそらくそうする方法かもしれません。

事前に感謝します

ご多幸を祈る、

マーク

wp-adminadminmedia-library
3
Mark Bowen

これをクリックすると検索フィールドにフォーカスを設定するコードがあります。 Add Media ボタンを押したり、注目の画像を設定するときにメディアモーダルを開くときに使用します。このコードをあなたのテーマの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
}
2
Dave Romsey

最初の方法

これには2つの部分が必要です。1つはデフォルトのタブをフィルタを通してメディアライブラリとして設定するためのもので、もう1つはカスタムJSを追加してAdd Mediaがクリックされたときにフォーカスを設定するためのものです。

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

第二の方法

2番目の方法で必要な手順は1つだけです。JSを追加すると、[Add Media]をクリックしたときに[Media Library]タブが自動的に検索され、そのタブをクリックすると自動的に検索フィールドにフォーカスが設定されます。

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

ほら！利益！

0
sMyles

Dave Romseyが上記のコードを手に入れてくれてありがとう、WordPress用のクイックプラグインにこれ​​を追加しました。

もう一度ありがとうDave！

ダウンロード/クローンプラグインhttps://github.com/MarkBowenPiano/media-library-search-focus

0
Mark Bowen