WordPress 在图片预览窗口显示图片名字

如果在你的媒体库里你有大量的图片,特别是你有很多相似的图片,这个方法能够很醒目的让你找到你想要的图片,如果没有文字提醒你可能需要一个个打开来查看。

 

media-browser-1024x496

我想给每一个图片添加一个图层来显示这个文件名字,这样就可以很轻松的浏览这个媒体库了。Wordpress媒体库的HTML代码是通过函数wp_print_media_templates()生成的,并且没有任何hooks让我们去操作这些内容。但是能够将他们输出到输出缓冲然后重新定义这个模板。

// hook in at the beginning of the footer to see if we need to add our wrapper
add_action( 'in_admin_footer', 'my_wrap_media_template_callback', 10, 0 );

// if the media templates are going to be rendered on this page, remove
// the default hook and put our wrapper in its place
function my_wrap_media_template_callback() {
 if ( has_action( 'admin_footer', 'wp_print_media_templates' ) ) {
 remove_action( 'admin_footer', 'wp_print_media_templates' );
 add_action( 'admin_footer', 'my_wp_print_media_templates_wrapper' );
 }
}

// get the default templates, but add our HTML in the correct location
function my_wp_print_media_templates_wrapper() {
 ob_start();
 wp_print_media_templates();
 $output = ob_get_clean();


 // make sure to keep all of the whitespace here
 $to_find = '<# if ( data.buttons.close ) { #>';
 // this is the HTML that will render our filename
 $to_add = '<div class="filename">
 <div>{{ data.filename }}</div>
 </div>
 ';
 $output = str_replace( $to_find, $to_add.$to_find, $output );
 echo $output;
}

这个在Wordpress 4.0 4.1 运行完美,如果没有效果,你可以将$output 保存到文件中,查看具体内容然后执行替换。如:

// get the default templates, but add our HTML in the correct location
function my_wp_print_media_templates_wrapper() {
 ob_start();
 wp_print_media_templates();
 $output = ob_get_clean();
 file_put_contents(dirname(__FILE__) . 'meida.html', $output);

 // make sure to keep all of the whitespace here
 $to_find = '<# if ( data.buttons.close ) { #>';
 // this is the HTML that will render our filename
 $to_add = '<div class="filename">
 <div>{{ data.filename }}</div>
 </div>
 ';
 $output = str_replace( $to_find, $to_add.$to_find, $output );
 echo $output;
}

效果:

media-browser-labeled-1024x460