Peut-on définir l’accent initial sur le champ de recherche dans la médiathèque WordPress?
Je me demandais s'il était possible (via un addon peut-être?) de définir le focus initial lorsque la médiathèque WordPress apparaît pour être le champ de recherche?
J'ai beaucoup de messages dans lesquels je dois sélectionner des images très rapidement et taper les noms des images pour les trouver. Ce serait extrêmement pratique, sauf que j'ai consulté Wordpress.org et quelques autres endroits que je connais de et ne peut pas trouver un plugin qui peut faire cela bien que quelqu'un ici puisse en savoir un ou peut-être un moyen de le faire?
Merci d'avance,
Meilleurs vœux,
Marque
Voici un code qui va mettre le focus sur le champ de recherche en cliquant sur le bouton Add Media ou lorsque vous ouvrez le mode multimédia lorsque vous définissez une image sélectionnée. Ajoutez ce code au functions.php de votre thème ou à un plugin pour l'utiliser.
Remarque: Ceci est une version mise à jour de ma solution d'origine. Je pense que celui-ci est un peu plus flexible et fiable car il exploite l'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
}
Pour l'amour de la postérité, voici la version originale que j'ai postée. Je pense que la version ci-dessus est bien meilleure.
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
}
Première méthode
Cela nécessite deux parties, l'une pour définir l'onglet par défaut comme bibliothèque multimédia via un filtre et l'autre pour ajouter un JS personnalisé afin de définir le focus lorsque l'utilisateur clique sur Ajouter un média.
1.) Définir l'onglet par défaut comme médiathèque:
add_filter( 'media_upload_default_tab', 'smyles_set_default_media_tab' );
function smyles_set_default_media_tab( $tab ){
return 'library';
}
2.) Ajouter un JS personnalisé pour définir le focus
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;
}
Deuxième méthode
La deuxième méthode ne nécessite qu'une étape. Elle consiste à ajouter JS qui trouvera automatiquement l'onglet Bibliothèque de supports lorsque l'utilisateur clique sur Ajouter un média, puis sur cet onglet, ce qui activera automatiquement le focus sur le champ de recherche.
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! Profit!
Avec tous nos remerciements à Dave Romsey pour le code ci-dessus, je l'ai placé dans un plugin rapide pour WordPress, car tout le monde a besoin de quelque chose comme ça.
Merci encore Dave!
Télécharger/plugin de clonage https://github.com/MarkBowenPiano/media-library-search-focus